Head First HTML with CSS

Q: What makes a specificity number
bigger than another?
A: Just read them like real numbers:
100 (one hundred) is bigger than 010 (ten)
which is bigger than 001 (one), and so on.
Q: What about a rule like “h1, h2”;
what is its specificity?
A: Think of that as two separate rules:
an “h1” rule, which has a specificity of “001”
and an “h2” rule that also has a specificity
of “001”.
Putting it all together
there are no
Dumb Questions
Q: Can you say more about the
!important thing?
A: The reader can override a style by
putting an “!important” on the end of their
property declarations like this:
h1 {
font-size: 200%
!important;
}
and this will override any author styles.
Woo hoo! It’s time for an example. Say you want to know the color
property for this element:
Blueberry Bliss Elixir
Let’s take this through all the cascade steps:
Step one:
Gather all your style sheets together.
h1 {
color: #efefef;
}
h1.blueberry {
color: blue;
}
Usually, you’re the author
(the person writing the
CSS). But right now,
you’re the browser.
The Author
Remember, you’re
the browser, because
you’re trying to
figure out how to
display this
element.
body h1 {
color: #cccccc;
}
divs and spans
Q: I can’t get the reader’s style sheet,
so how can I ever figure out the way the
cascade works?
A: You can’t, but look at it this way: if
the reader overrides your styles, then that
is really beyond your control. So just make
your pages look like you want them to using
your styles. If the reader chooses to override
them, then they’ll get what they ask for (for
better or for worse).
h1 {
color: black;
}
The Browser
The Reader
That’s you (for now).
The person using the browser.
you are here 477