In which order do CSS stylesheets override?

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?

The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

The most specific style is applied:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

If all of the selectors have the same specificity, then the most recent decleration is used:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

In your case, body:not([input="button"]) is more specific so its styles are used.

In which order do CSS stylesheets override?

Related

Recent Posts