Head First HTML with CSS

The cascade
For this exercise, you need to “be the browser”. Let’s say you’ve got an
element on a page and you want to know the font-size property for it.
Here’s how you do it:
Step one:
Gather all your style sheets together.
For this step you need ALL the styles sheets: the style sheets the
Web page author has written, any style sheets that the reader has
added to the mix, and the browser’s default styles. (Remember,
you’re the browser now, so you have access to all this stuff!)
Step two:
Find all the declarations that match.
We’re looking specifically for the font-size property, so look at all the
declarations for font-size that have a selector which could possibly select
the element. Go through all the style sheets and pull out any rules that
match and also have a font-size property.
Step three:
Now take all your matches, and sort them.
Now that you’ve got all the matching rules together, sort them in the order of
author, reader, browser. In other words, if you wrote them as the author of the
page, then they are more important than if the reader wrote them. And, in
turn, the reader’s styles are more important than the browser’s default styles.
Step four:
Now sort all the declarations by how specific they are.
Remember, we talked about this a little, way back in Chapter 8. You can
intuitively think about a rule being more specific if it more accurately selects
an element; for instance, the descendant selector “blockquote h1” is more
specific than just the “h1” selector because it only selects s inside of
s. But there is a little recipe you can follow to calculate exactly
how specific a selector is, and we’ll do that on the next page.
Step five:
Finally, sort any conflicting rules in the order they appear in their
individual style sheets.
Now you just need to take the list, and order any conflicting rules so that the ones
appearing later (closer to the bottom) of their respective style sheets are more important.
That way, if you put a new rule in your style sheet, it can override any rules before it.
That’s it! The first rule in the sorted list is the winner, and its font-size property is
the one to use. Now let’s see how you determine how specific a selector is.
divs and spans
Remember we
mentioned that the
reader could put
!important on their
CSS properties, and if
they do that, those
properties come first
when you sort.
you are here 475