How does a browser choose which style sheet to use

Question

Lets say I have this simple HTML page

<html>
    <head>
        <link href="/styleA.css" rel="stylesheet" type="text/css" />
        <link href="/styleB.css" rel="stylesheet" type="text/css" />
        <link href="/styleC.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class='myDivClass'>Hello World!</div>
    </body>
</html>

As you can see there are three style sheets. Lets say these style sheets look like so:

styleA.css

.myDivClass{
    background-color:red;
    color:black;
}

styleB.css

.myDivClass{
    background-color:blue;
    color:white;
}

styleC.css

.myDivClass{
     background-color:green;
}

As you can see they all apply a style to myDivClass in some way. How does the browser pick which style sheet is more important in terms of applying its style?

it's called "Cascading" style sheets for a reason...http://www.w3.org/TR/CSS2/cascade.html#cascade — Marc B, Jun 09 '15 at 18:54
See stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override. There is a link to the spec with all the info you need — sudo rm -rf slash, Jun 09 '15 at 18:55

connexo · Accepted Answer · 2015-06-09T18:59:30.897

3

Since all your rules in all stylesheets have the same specificity, the one defined last wins when there are concurring definitions. So your div.myDivClass will have white text on green background.

This might help you understand specificity.

edited Jun 09 '15 at 18:59

answered Jun 09 '15 at 18:54

connexo

53,704
14
91
128

score 2 · Answer 2 · answered Jun 09 '15 at 18:55

2

See section 6.4.1 Cascading Order http://www.w3.org/TR/CSS2/cascade.html#cascading-order

Basically, the more specific should win, but in your case, the selectors are identical, therefore, rule 4 applies, in which the last specified declaration wins.

answered Jun 09 '15 at 18:55

Paul Butcher

6,902
28
39

score 1 · Answer 3 · answered Jun 09 '15 at 18:54

1

It goes in order. The "C" in CSS stands for "Cascading" meaning that the browser starts at the top and works it's way down. Whichever style is defined last is the one used.

answered Jun 09 '15 at 18:54

Dryden Long

10,072
2
35
47

1

If they're the same definitions, yes, but this can be affected by variances in specificity (ID beats class, `!important` etc.). – ceejayoz Jun 09 '15 at 18:55
@ceejayoz Yeah, you're right, given that OP's example shares the same class though, I went with that. – Dryden Long Jun 09 '15 at 18:56

How does a browser choose which style sheet to use

3 Answers3