HTML and CSS Reference
In-Depth Information
Despite the fact that there is a color assigned in the
style
attribute of the paragraph,
the
!important
rule wins out, and the paragraph is gray. This gray is inherited by the
em
element as well.
Furthermore, the origin of a rule is considered. If an element is matched by normal-
weight styles in both the author's style sheet and the reader's style sheet, then the
author's styles are used. For example, assume that the following styles come from the
indicated origins:
p em {color: black;} /* author's style sheet */
p em {color: yellow;} /* reader's style sheet */
In this case, emphasized text within paragraphs is colored black, not yellow, because
normal-weight author styles win out over normal-weight reader styles. However, if both
rules are marked
!important
, the situation changes:
p em {color: black !important;} /* author's style sheet */
p em {color: yellow !important;} /* reader's style sheet */
Now the emphasized text in paragraphs will be yellow, not black.
As it happens, the user agent's default styles—which are often influenced by the user
preferences—are figured into this step. The default style declarations are the least in-
fluential of all. Therefore, if an author-defined rule applies to anchors (e.g., declaring
them to be
white
), then this rule overrides the user agent's defaults.
To sum up, there are five levels to consider in terms of declaration weight. In order of
most to least weight, these are:
1. Reader important declarations
2. Author important declarations
3. Author normal declarations
4. Reader normal declarations
5. User agent declarations
Authors typically need to worry about only the first four weight levels, since anything
declared by an author will win out over the user agent's styles.
Sorting by Specificity
According to the third rule, if conflicting declarations apply to an element and they all
have the same weight, they should be sorted by specificity, with the most specific dec-
laration winning out. For example:
p#bright {color: silver;}
p {color: black;}
<p id="bright">Well, hello there!</p>
