CSS 2, precedence of stylesheets imported using link element

Question

Given

<link rel="STYLESHEET" href="/css/t.cake.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/f.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/t.generic.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/t.head.css" type="text/css"/>

which rules have a higher priority in the cascade? Assume all have equal priority wrt other CSS comparisons? Those in the first, or last stylesheet?

TIA DaveP

Answer 1

According to the specs, the latest one is applied.

4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Anyhow, would not be good practice to rely on this alone, as it makes your code hard to read and interpret. I would make sure the correct rules were applied through specificity of the selectors, no matter what stylesheet they are placed in.

Answer 2

last styles have priority ! but you can use

.nameclass{ font-size:11px !important; }

Answer 3

The highest precedence goes to inline styles. style rules from external stylesheets follow a simple formula (see http://www.htmldog.com/guides/cssadvanced/specificity/)

as to the order of sheets, the rules in the last sheet would take precedence in the event of a collision (unless you use the !important flag)

edit: better ref on specificity http://css-tricks.com/specifics-on-css-specificity/

Answer 4

The stylesheets are downloaded and applied in the order they are linked, i.e:

• t.cake.css
• f.css // Will override conflicting rules of the stylesheet above
• t.generic.css // Will override conflicting rules of the twostylesheets above
• t.head.css // Will override conflicting rules of the three stylesheets above