Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does the order of css stylesheet definitions matter?

Tags:

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!

like image 352
Jon Onstott Avatar asked Feb 10 '12 16:02

Jon Onstott


People also ask

Does order of CSS link matter?

The simple answer is yes.

What order should my CSS be?

CSS rules always prioritize from left to right, then from top to bottom.

Does the order of internal and external CSS matter?

Does The Order Of Internal And External Css Matter? However, it matters. multiple css selectors match the exact same element to the exact same extent. It makes no difference if specificity is the same or not, and if it is the same, order does matter.

Does CSS execute in order?

CSS is "executed" in order. You want the media queries to override the defaults in specific instances so you must declare them after.


2 Answers

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)

like image 196
Fabian Barney Avatar answered Nov 15 '22 02:11

Fabian Barney


If the selectors are identical, the last loaded takes precedence, just as if you declared the same class twice in the same stylesheet.

like image 40
Diodeus - James MacFarlane Avatar answered Nov 15 '22 03:11

Diodeus - James MacFarlane