HTML and CSS Reference
For this exercise, you need to “be the browser.” Let's say you've got an <h1>
element on a page and you want to know the font-size property for it. Here's
how you do it:
Gather all your stylesheets together.
For this step you need all the stylesheets: the stylesheets the web page
author has written, any stylesheets 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 !)
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 that could possibly select the
<h1> element. Go through all the stylesheets and pull out any rules that match
<h1> and also have a font-size property.
R emember we
m entioned that the
r eader cou ld put
!i mportant on his C SS
p roperties, and if
h e does th at, those
p roperties come fir st
w hen you s ort.
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.
Now sort all the declarations by how specific they are.
Remember, we talked about this a little, way back in Chapter 7. 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 <h1> s inside of
<blockquote> 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.
Finally, sort any conflicting rules in the order they appear in their
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 stylesheets are more important.
That way, if you put a new rule in your stylesheet, 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.