HTML and CSS Reference
In-Depth Information
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”.
Q:
Can you say more about the
!important thing?
A:
The reader can override a style by
putting an “!important” on the end of his
property declarations like this:
h1 {
font-size: 200% !important;
}
Q:
I can't get the reader's stylesheet,
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 he'll get what he asks for (for
better or for worse).
and this will override any author styles.
Putting it all together
Woo hoo! It's time for an example. Say you want to know the
color
property for this
<h1>
element:
<h1 class="blueberry">Blueberry Bliss Elixir</h1>
h1 {
color: black;
}
Remem
ber, y
ou're
the b
rowser
, beca
use
you're
tryin
g to
figure
out h
ow to
displa
y this
<h1>
eleme
nt.
Let's take this through all the cascade steps:
Step one:
Gather all your stylesheets together.
The browser
h1 {
color: #efefef;
}
body h1 {
color: #cccccc;
}
h1.blueberry {
color: blue;
}
The reader
The author
