Solution: Understanding the Sort Order Within CSS

Problem: You want toYou want to know how a browser handles the application of CSS rules.
Solution
The basic rule of thumb is “any CSS rule that is closest to the content wins” over any
other CSS rule.
Discussion
With so many ways CSS can be associated to a web document (see Recipe 2.12), there
needs to be a way for the browser to handle potential conflicts if the same or a similar
rule appears from two different sources.
Follow this guideline when trying to determine how to resolve conflicts within your
CSS rules:

• The user’s own styles take priority over browser styles.
• The author’s (your) styles take priority over user styles.
• Embedded styles take priority over linked or imported styles.
• Inline styles take priority over embedded, linked, or imported styles.

For example, say we have a series of paragraphs, all set to a sans serif font, as shown
in Above picture:
p {
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
}

But when we bring in another rule to style the paragraphs with a serif font and place
this new rule before the previous rule, as shown in the following code, the paragraphs
remain unchanged:

Only when we place the serif font rule for the paragraphs after the sans serif font rule
does the change in the browser take place, as shown below.


p {
font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif;
}
p {
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
}




Again, this occurrence follows the rule of thumb that “any CSS rule that is closest to
the content wins.”
However, there is an exception to this rule—Clarifying Specificity


Problem
You want to understand how potential conflicts within CSS are resolved, if origin and
sorting order for a CSS rule are the same.
Solution
Each CSS rule carries information that lets the browser (and us) know its weight or
specificity.
Consider the following three CSS rules:
#header p.big {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
p.big {
font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
}
p {
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;


The higher the specificity a CSS rule possesses, the greater the chance that the CSS rule
will win out over another rule. However, when viewed in the browser, the first CSS rule
(with the Impact font) wins out, as shown below

To determine why the first rule wins, determine the CSS rule’s specificity. Follow
Table when trying to determine a CSS rule’s specificity.

Selector example Inline style Number of ID selectors Number of class selectors Number of elements
p                             0                             0                      0                                  1

p.big                       0                              0                      1                                  1

#header p.big         0                                1                  1                                    1


According to Table
• The p selector has a specificity value of 0,0,0,1.
• The p.big selector has a specificity value of 0,0,1,1 because of the class selector.


• The #header p.big selector has a specificity value of 0,1,1,1 because of the class
and ID selectors.
In these examples, the last selector has a greater specificity, and therefore wins in a
conflict.


Discussion
The origin and sorting order of CSS help a browser to determine which rules win out
over others (and the !important declaration allows certain rules to override others).
When those methods of determining which CSS rules should win fail, there is a conflict.
CSS has in place a way to deal with those conflicts: the specificity of the CSS rule
itself.

The higher the specificity of a CSS rule, the greater the likelihood that the CSS wins.


Several CSS specificity calculators are available online to help you determine the specificity
of rules. One such calculator is available at http://www.suzyit.com/tools/specific
ity.php.