How do browsers process and apply CSS styles to DOM elements?


Tags: html,css,dom

Problem :

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?



Solution :

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


    CSS Howto..

    How do I select this Div with CSS

    iOS not showing element on right: 0/float: right

    CSS - How to center a div relative to a background image positioned as cover

    How can I hide page elements till an AJAX call completes?

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How to set content area div height with dynamic header div

    Can't figure out how to horizontally CENTER my content div [duplicate]

    How to check if a css/js resource is included in head

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    How to center my text vertically in a circular div with css

    How do you make 2 YouTube videos automatically play one after the other?

    Why is the icon shown in some browsers while other it is not

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    How do I filter unwanted CS styles from CS sheet?

    How to size relative div which haven't a content?

    CSS: How to load a css file for all browsers except IE?

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    how to highlight currently opened page link in css

    How to expand an abbreviated word onhover in html via css or javascript or even using jquery?

    How to use existing SVG symbols (in a file) as markers in highcharts?

    background image of div element can't show in php file

    How to fixed the form fields alignment issues using css and bootstrap

    How to select multiple items using mouse click?

    How to make css jQuery thumbnail slides loop

    How do I create a class hierarcy in CSS for MVC4 Razor?

    Bootstrap: navbar showing a line

    Does anyone know how to getr this background effect with css?

    Responsive CSS layout - how to stretch the background overlay

    show two texts for one mouseOver event