In what order does the browser process css?

Question

I have a class that is being styled in 5 different places, what is the order in which the browser goes through each of the different places?

Inline

 <div class="yellowtag" style="background: yellow;">This is yellow</div>

First processed css file

// First instance inside of style.css
.yellowtag {
    background: yellow;        
}

Second instance of yellow tag in first processed css file

// Second instance inside of style.css
.yellowtag {
    background: yellow;        
}

Second processed css file (below the first .yellowtag rule)

// style2.css
.yellowtag {
    background: yellow;        
}

In the head

<head>
     <style>
         .yellowtag {
             background: yellow;        
         }
     </style>
</head>

css is processed in the order it's encountered while parsing the dom. depending on the specific browser implementation, the dom **MIGHT** be modified as the various files are processed, or it can load all the css, THEN apply the rules. There's a number of rules on what order CSS should be applied: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Marc B, Jul 05 '13 at 22:05
@cimmanon Yes, there are lots of practical applications for this question, you've never had two files create the same rule? Happens a lot when you're trying to style third party components... — Ruan Mendes, Jul 06 '13 at 17:53
This is not really a duplicate of http://stackoverflow.com/questions/5902858/order-of-prioritization-when-using-multiple-contradictory-css-files In that case, specificity matters (and the order doesn't) , in this case, specificity doesn't matter, because it's the same but the order does matter — Ruan Mendes, Jul 06 '13 at 17:56

score 5 · Accepted Answer · answered Jul 05 '13 at 22:11

The specific order in which the browser processes CSS is:

1: Inline -then-

2: Style Tags -then-

3: 1st CSS File defined in HTML (From top to bottom) -then-

4: 2nd CSS File defined in HTML -And so on-

So if you had a tag in all four the one applied would be the Inline style

Yet all this can be overridden by using !important when defining the property

score 2 · Answer 2 · answered Jul 05 '13 at 22:06

2

Since they all have the same specificity (single class name, .yellowtag), the last one in the source code would be the one that would apply.

However, you have an inline style style="background: yellow;", inline styles override other rules and specificity doesn't apply

answered Jul 05 '13 at 22:06

Ruan Mendes

No. I think the first one would apply, since inline style always overwrites everything else. – Geeky Guy Jul 05 '13 at 22:08
@Renan Thanks, I did miss the inline style there... – Ruan Mendes Jul 05 '13 at 22:08
I see your edit and now I agree with the answer. +1 – Geeky Guy Jul 05 '13 at 22:12

2 Answers2