HTML and CSS Reference
In-Depth Information
The cascade
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:
Step one:
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 !)
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 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.
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 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.
Step five:
Finally, sort any conflicting rules in the order they appear in their
individual stylesheets.
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.
