Importance of css stylesheet hierarchy

Question

I\'ve done some Google searches and so far I haven\'t found anything that answers my question about CSS order or importance.

For example, inline overrides external.

Answer 1

The term you want to search for is “specificity”.

When you have two (or more) CSS blocks whose selectors select the same HTML element, and which both try to set the same CSS property on that element, then the block with the more specific selector wins out.

The CSS 3 selectors spec details how specificity should be calculated, and it’s reasonably readable:

• http://www.w3.org/TR/css3-selectors/#specificity

There are also some good blog posts that describe the rules too:

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity

(Note that when the two blocks have selectors with the same specificity, only then does the later block’s rule win out, as in your example with h1s. A rule in a block with a more specific selector will override a rule a later block with a less specific selector.)