0

I have a css sheet for a big project that I can't change, "cantChange.css"

I also have a css sheet for a small portion of the project that I am able to change "canChange.css"

Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.

Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?

bernie2436
  • 21,121
  • 44
  • 141
  • 234
  • 1
    Can we see an example of a CSS definition you want to override? As you mentioned, I suggest using CSS specificity to make certain definitions take precedence over others: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – showdev Dec 05 '13 at 18:48

3 Answers3

0

The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:

background-color: blue !important;

If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.

Severin
  • 8,258
  • 12
  • 65
  • 112
0

You've got a few options to address this:

  • Make your selector more specific (e.g. #body #small-project .cool-class)
  • Apply the styles inline (e.g. style="color: #000")
  • If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
  • Give priority using !important (What does this mean?)
Community
  • 1
  • 1
Justin Helgerson
  • 23,852
  • 17
  • 92
  • 123
0

You can make your own declaration MORE SPECIFIC to override the others.

For example:

body.someclass .anotherclass { ... }    

<body class="someclass">

will always override .anotherclass { ... }

Diodeus - James MacFarlane
  • 110,221
  • 32
  • 151
  • 174