CODEWITHSUNDEEP
css
DaveP
DaveP

Reputation: 1089

CSS 2, precedence of stylesheets imported using link element

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

Upvotes: 5

Views: 9548

Answers (4)

AlexC
AlexC

Reputation: 9661

Last styles have priority! But you can use:

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

Upvotes: 3

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

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

Upvotes: 4

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

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/

Upvotes: 1

Arve Systad
Arve Systad

Reputation: 5479

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.

Upvotes: 8

Related Questions