CODEWITHSUNDEEP
htmlcssdom
Douglas Denhartog
Douglas Denhartog

Reputation: 2054

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?

Upvotes: 2

Views: 1704

Answers (1)

user1720624
user1720624

Reputation:

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

Upvotes: 5

Related Questions