In which order do CSS stylesheets override?

css overriding stylesheet
ian5v picture ian5v · Feb 27, 2012 · Viewed 171k times · Source

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?

Answer

duskwuff -inactive- picture duskwuff -inactive- · Feb 27, 2012

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.

Related questions

Override body style for content in an iframe

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site. The reason I …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Override and reset CSS style: auto or none don't work

I would like to override following CSS styling defined for all tables: table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } I have specific table with class called 'other'. Finally table decoration should looks like: table.other { font-size: 12px; } so i …

Read More