There are updates to this page that haven't been applied because you've entered text. Refresh this page to see updates.
Hide this message.

In what order do CSS definitions take priority?

We have browser default styles, linked style sheets, on page style sheets (eg in a style tag), inline styles and user styles. On top of that !important can be used to modify this. Which ends up being the "most" important and how does !important modify this?
CSS declarations are applied in this order (from lowest to highest priority):
  • user agent declarations (the default styles your browser applies to elements)
  • user normal declarations (a user's own stylesheet if they're using one)
  • author normal declarations (this is your normal stylesheet)
  • author important declarations (anything your mark important)
  • user important declarations (any important styles from the user's stylesheet)

Any conflicting rules are resolved within each level first, sometimes with specificity, or failing that, the last rule wins. Specificity is a number defined as:
  • a: 1 if the declaration is from an inline style attribute, 0 otherwise
  • b: the number of IDs in the selector (#one #two would be 2)
  • c: the number of other attributes and pseudo-classes (:focus would be 1)
  • d: the number of element names and pseudo-elements (div would be 1)

i.e an inline style would have a specificity of 1000, whereas a declaration in your stylesheet might have a specificity of 0100 or 0010 etc. - this is why inline styles override styles from stylesheets.

But, since the rules are applied in the order above, an important rule in a stylesheet can override an inline style (since author important styles are applied after author normal styles). e.g:

1
2
3
4
5
6
<style>
p {
  color: black !important;
}
</style>
<p style="color: red">Will be black</p>


Rules in later declarations take precedence over rules in earlier declarations, so declarations in a style tag can override the declarations from a linked stylesheet if the style tag appears after the link tag. The rules mean you can use a normal stylesheet to override a user's own stylesheet, but you can never override any styles the user marks as !important.
Brian YeeBrian Yee, Student at CMU
2 upvotes by Charlie Cheever and David Hunter.
Without adding in !important, it goes (in order from least to most important):

  1. Linked style sheets.
  2. Page styles (or head styles, anything inside a <style>).
  3. Inline style.

!important will override everything above, respectively.  So an !important linked stylesheet will take precedence over everything unless there's an !important on an inline style.

http://jsfiddle.net/byee/LQDjf/2/

I'm not entirely sure about user styles - it depends on the browser implementation, in which case it can be considered a linked style sheet, where you would want to use !important to override any styles that the website uses.

http://www-archive.mozilla.org/u...
Dev AnandDev Anand, Front-End Developer, Avid Gamer
1 upvote by Charlie Cheever.
Here’s how CSS Prioritizes or Cascades:
  1. First it gathers all the style sheets like Author or coder's, Reader's if any and Default Browser's style sheet.
  2. Finds all the declarations that match. For example lets look specifically for the font-size property, so it looks at all the declarations for font-size that have a selector which could possibly select the <h1> element,  goes through all the style sheets and pull out any rules that match <h1> and also have a font-size property.
  3. Then it sorts them in the order of author, reader, browser as in most important would be the Author and least in the priority would be the Browser. And if User has put !important, that gets the highest priority and tops the list.
  4. Next would be the sorting all the declarations by how specific they are, rule being more specific if it more accurately selects an element; for instance, the descendant selector “blockquote h1” is more specific than just the “h1” selector because it only selects <h1>s inside of <blockquote>s.
  5. Finally, it sorts any conflicting rules in the order they appear in their
    individual style sheets, so that the ones appearing later (closer to the bottom) of their respective style sheets are more important.
That’s it! The first rule in the sorted list is the winner, and its font-size property is
the one to use.
Martin RaymondMartin Raymond, Web Developer
Check out this article on CSS specificity. It covers just about everything you need to know.
CSS Specificity: Things You Should Know
Priorities in a scheme variant:
#id    = [1,0,0]
.class = [0,1,0]
tag    = [0,0,1]
// compare:
[1,0,0] > [0,1,0] > [0,0,1]
[1,0,0] > [0,100,100]
[0,1,0] > [0,0,100]
Write an answer