0
<link href="style1.css" rel="stylesheet" type="text/css">
<link href="style2.css" rel="stylesheet" type="text/css">

In style1, let's say I declare color to be white:

.box{
    color:#fff;
}

In style2, I declare it to be black.

.box{
    color:#000;
}

How come style1 takes priority?

Dror
  • 7,255
  • 3
  • 38
  • 44
TIMEX
  • 259,804
  • 351
  • 777
  • 1,080
  • 4
    Because something else is going on. Show us an [SSCCE](http://sscce.org) or you're wasting everyone's time, including your own. – Matt Ball Aug 11 '11 at 03:36
  • It's supposed to be the last rule wins when it's the same weight. Check your browser's debug/dev tools network panel. What is the order the files are finished downloading? – Detect Aug 11 '11 at 03:38
  • See this question: http://stackoverflow.com/questions/4772333/are-css-stylesheets-loaded-asynchronously – Rikon Aug 11 '11 at 03:40
  • Never had a small answer converted to comment before :) It threw some javascript error... Fail whale SO – Rikon Aug 11 '11 at 03:42
  • Just post a link to the site. – Steve Robbins Aug 11 '11 at 03:44
  • Agree with Matt above but in any case for CSS cascade, a good read is at http://www.maxdesign.com.au/articles/css-cascade/ – Dror Aug 11 '11 at 06:50

1 Answers1

0

If both CSS contains the exact same css class, the last loaded CSS file will be looked upon as an extender - meaning you have to put !important after the last defined style in your css.

Sample

Style1

.box{
    color:#fff;
}

Style2

.box{
    color:#000 !important;
}

This way, Style2 will at all times overrule Style1.