How do browsers process and apply CSS styles to DOM elements?
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?
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.
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/ ]
#foo are worth 100
.bar are worth 10
html/body/p/span/div/etc are worth 1
#foo span.bar= 111
html body p span = 4