9

I was reading a decent article here on this topic: http://www.plus2net.com/html_tutorial/css-types.php It came out highest ranked by Google for the search term css style sheets priorities. However I think the site misinforms you and is incomplete! Can someone confirm my suspicions?

1) User Defined style is second lowest priority. In order to override other styles with it, you need to use !important to move it to highest. 2) It fails to mention the relative priorities of <link> versus @import and @import within <link>

A more precise ordering would be (1 wins over 2 etc) :

  1. User defined (browser prefs !important - [not Google Chrome!])
  2. Inline style sheet (style attribute on HTML node)
  3. Internal style sheet (<style> in <head>)
  4. External style sheet (@import)
  5. External style sheet (<link>)
  6. External style sheet (@import inside <link>)
  7. User defined - (browser prefs - [not Google Chrome!])
  8. Browser default - (shipped with browser)

Michael Bowers Pro CSS & HTML Design Patterns is a good source for this too. But it fails to mention inline.

Is there anything else missing?

PS: I was inferring !important was missing from 2-8. So User defined appears twice. Once with important, the second time without it. So user defined is in essence second lowest. The !important can naturally be applied at any level.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
JGFMK
  • 8,425
  • 4
  • 58
  • 92
  • Well I'm not sure about that. It's more like `!important` can act as a trump card at any level in the hierarchy. As far as "what's missing", probably a discussion of selector specificity. That's caught me up on a few occasions. – Sapph Feb 18 '11 at 08:33
  • @Sapph Sure. But user defined is second lowest right? (Not highest) – JGFMK Feb 18 '11 at 08:59
  • 1
    Without accounting for `!important`, inline styles take the highest precedence. – BoltClock Feb 18 '11 at 09:55
  • @BoltClock Added (1 wins over 2 etc, to confirm high to low order) – JGFMK Feb 18 '11 at 10:36

1 Answers1

7

Rather than thinking of it in terms of most important and least important, think of it as cascade order. All the styles are applied, but the last applied one is the one which you see. Styles are applied in the following order:

  1. Browser default
  2. External style sheet (link or @import)
  3. Internal style sheet
  4. Inline style

Within any one of the first three, styles are applied from least specific to most specific (then from top to bottom if the most specific can't be determined). So a tag-selected style will be applied before a class-selected style, so if they disagree about what style should be applied, the class-selected one will win. There is no rule about whether link or @import should be applied first, so they are mixed together and the least-specific-to-most-specific rule applies.

!important makes a less specific style get applied after a more specific one, and an external style sheet style get applied after an internal one or an inline style. I would advise against using !important wherever possible though, as it can cause some pretty confusing results.

Nathan MacInnes
  • 11,033
  • 4
  • 35
  • 50
  • 3
    No, `!important` always wins over inline styles *unless* they are `!important` themselves. – BoltClock Feb 18 '11 at 10:17
  • You've completely flipped the order - so I added 1 wins over 2 etc. (@BoltClock i concur) – JGFMK Feb 18 '11 at 10:32
  • @JGFMK no I haven't. Styles are applied in that order, so if you're thinking of it in terms of importance, 4 is most important. – Nathan MacInnes Feb 18 '11 at 10:34
  • @JGFMK: That is in ascending order. 1 doesn't win over 2. – BoltClock Feb 18 '11 at 10:36
  • @BoltClock It does if 2-8 don't use !important. I was inferring not using important elsehwere. I agreed with your first comment in this answer. So I think we are on same wavelength. (Notice user defined in 1 & 7 - 7 infers not using !important) – JGFMK Feb 18 '11 at 10:41
  • @JGFMK: If any **one** of these declarations is important, it wins over everything else. If there important declarations are found in more than one place, they follow the same order. That's why we say "`!important` notwithstanding". It's just to clarify things in case someone else thinks `!important` doesn't matter elsewhere. – BoltClock Feb 18 '11 at 10:43