Does the order of css stylesheet definitions matter?

css stylesheet
Jon Onstott picture Jon Onstott · Feb 10, 2012 · Viewed 10.9k times · Source

I have several stylesheets. The first one is a stylesheet with some styles that I would like to use as defaults. Depending on several factors, the code being used to generate the page may include some stylesheets with values that should override the defaults.

If I use this, can I trust that the values in the default stylesheet will be overridden by the values from the other stylesheet? I am using class selectors and will override values when the names match.

<link href="defaults.css" rel="stylesheet" type="text/css"/> 
<link href="valuestooverridedefaults.css" rel="stylesheet" type="text/css"/>

This needs to work on all browsers, including mobile. I'd like to avoid having to use "!important", if possible.

Thanks!

Answer

Fabian Barney picture Fabian Barney · Feb 10, 2012

There is a defined cascade in which the styles are sorted and applied. When declarations have the same importance (weight), origin and specificity then the latter declaration wins. Most answers cover importance and specificity here but not origin.

Here are some very good slides about CSS Cascades. (Overview all resources)

Related questions

Can you use if/else conditions in CSS?

I would like to use conditions in my CSS. The idea is that I have a variable that I replace when the site is run to generate the right style-sheet. I want it so that according to this variable the …

Read More
How to use HTML to print header and footer on every printed page of a document?

Is it possible to print HTML pages with custom headers and footers on each printed page? I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the …

Read More
How can I make a TextArea 100% width without overflowing when padding is present in CSS?

I have the following CSS and HTML snippet being rendered. Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use …

Read More