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.)

Answer 2

You are experiencing CSS Specificity. If you have two conflicting styles that apply to the same element, there is a weighting system that determines which style wins. You can read more about it here:

http://css-tricks.com/specifics-on-css-specificity/

Answer 3

For this case here is what you do

#content input { width: 50%; }
#content .long { width: 75%; }

selecting an element with its ID will take precedence, hence you had that particular problem. adding the ID to your selection and being more specific will solve the problem

for example :

#content input.long { width: 75%; }

is even more specific than

#content .long { width: 75%; }