HTML and CSS Reference
In-Depth Information
Step five:
Finally, sort any conflicting rules in the order
that they appear in their individual stylesheets.
h1.blueberry {
color: blue;
}
Aut
hor
We're okay here, because we don't have
any conflicting rules at this point. The
blueberry, with a score of 11, is the clear
winner. If there had been two rules with
a score of 011, then the rule appearing
latest would be the winner.
h1 {
color: #efefef;
}
body h1 {
color: #cccccc;
}
h1 {
color: black;
}
Browser
We have a winner…
After sweating through the first choice of elements, the
sorting, more sorting, and being judged on specificity,
the “h1.blueberry” rule has risen to the top. So the color
property in the <h1> element will be blue.
Q:
So, one more time: I get that the lower in the CSS file, the
higher the precedence, but how does having multiple links to
stylesheets in my HTML work?
A:
It's always top to bottom, whether it is in the same CSS file or
not. Just pretend that you inserted the CSS all together right into your
file in the order the files are linked. That's the order that counts.
Q:
So when you sort for specificity, you don't re-sort
everything?
A:
No. Think of each time you sort as refining what you've done
before. So first you sort for author, reader, browser. Then, within each
of those sortings, you sort for specificity. And then, for any elements
that have the same specificity, you sort again based on the ordering
in the stylesheets.
Q:
Do readers really make their own stylesheets?
A:
By and large, no. But there are cases where people with visual
impairments do, and of course you've always got the crowd that just
has to tinker with everything. But since each reader is controlling only
how she sees things, it really shouldn't factor into your designs.
Q:
How much of this do I really need to remember?
A:
You're going to develop some intuition for how all these
stylesheets fit together, and on a day-to-day basis that intuition will
get you a long way. Every once in a while, though, you'll see a style
popping up in your pages that just boggles your mind, and that's
when you fall back on your training. You'll be able to work through
the cascade, and before you know it, you'll know exactly what's
happening in your page.
