2

Is there a consistent/universal order by which browsers apply CSS styles to DOM elements?

For example, the box model is: margin, border, padding and width.

Does a browser process CSS styles that are listed in the same order as the box-model faster than say CSS styles listed: width, padding, border and margin?

And, is there a standard/rule for the order in which ALL CSS styles are processed?

EDIT: I am asking about the specific order in which Browsers apply specific CSS styles. Is this a universal standard or per browser? For example, does a browser have to apply z-index before it can apply a background-color?

Douglas Denhartog
  • 2,036
  • 1
  • 16
  • 23
  • there is no universal way how to apply the css-styles. The css spec defines HOW it has to look like in the end. How this is being achieved is pretty much up to the vendors. Nonetheless the styles are processed in the order the appear in the stylesheets. – Christoph Nov 23 '12 at 16:45
  • What do you mean by the terms "process" and "styles"? – BoltClock Nov 23 '12 at 17:19
  • possible duplicate of http://stackoverflow.com/questions/3527800/how-do-browsers-read-and-interpret-css – chharvey Mar 11 '15 at 06:52

1 Answers1

5

CSS styles will always be applied from top to bottom, beginning with external stylesheets (in the order they are linked), then styles in the head of the document, then inline styles. Styles later in the hierarchy will overwrite styles that appear earlier.

EDIT: I need to amend my answer. Specificity plays a role as well. The more specifically defined a CSS selector is, the more precedence it takes. Selectors with equal specificity work the way I originally stated.

[ http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ]

EDIT #2: There is actually a good way to calculate the amount of specificity a given set of selectors has that can be found here: [ http://www.htmldog.com/guides/cssadvanced/specificity/ ]

(id selectors) #foo are worth 100
(class selectors) .bar are worth 10
(html selectors) html/body/p/span/div/etc are worth 1

#foo span.bar= 111
html body p span = 4
etc