You’ve learned how to add a style sheet to a web page, how to apply styles to HTML elements, how to create classes of HTML elements, and how to target elements that are parts of other elements.
That covers most of what you’ll do with style sheets. For more advanced CSS, we’ll learn how to look at adjacent elements, how to detach elements so that other elements wrap around them, and how to use special “pseudo-elements”.
- Adjacent elements
- Besides singling out elements that are children of other elements, such as table cells inside of tables, we can also single out elements that follow other elements.
- Sidebars and floating blocks
- Some information is best presented, visually, as a sidebar. Rather than presented sequentially, items can be “detached” from their location on the page and “floated off” elsewhere. The easiest way to do this is with the float property. Elements can be floated to the right or the left.
- Before and after
- Our sidebar of book information would look a lot better if we had colons in the row headers. We can use style sheets to add them. There is a special kind of selector called a “pseudo-element”. This is an element that sort of exists, and we can modify it. Two of these are the before and after pseudo-elements. The “before” pseudo-element is a fake element that appears inside of the element and just before any of the true…
Related Pages
