Alex Rivera | Logout

In which order do CSS stylesheets override?

Asked 2012-02-27T01:38:31.067
173

In an HTML header, I've got this:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.css is my page-specific sheet. master.css is a sheet I use on each of my projects to override browser defaults. Which of these stylesheets takes priority? Example: first sheet contains specific

body { margin:10px; }

And associated borders, but the second contains my resets of 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

In essence, does the cascading element of CSS work the same in terms of stylesheet references as it does in typical CSS functions? Meaning that the last line is the one displayed?

css overriding stylesheet
Edit
Report

1 Answer

27

Order does matter. The last declared value of multiple occurrence will be taken. Please see the same one I worked out: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

If you interchange the order of .test{}, then you can see the HTML takes value of the last one declared in CSS

answered 2013-07-02T11:25:50.770

Your Answer