Make entire CSS sheet !important

Question

Is there a way to make an entire CSS Style sheet take precedence over another? I know you can do the !important but can I do that with one line rather than modify all thousand properties on the sheet?

Thanks!

Answer 1

Rules with identical specificity that come later will overrule previous ones, so if both style sheets contain the identical selectors, you should be able to do this by just loading the one before the other.

If they contain different selectors, like

#navigation h3 { color: red }

and

.mainpage .navmenu h3 { color: blue }

you are likely to get specificity conflicts. The only blanket solution for that is indeed !important (although that is really, really terrible architecturally. Are you sure you need this? Maybe explain why, it's possible somebody is able to come up with a better solution.)

There is, however, no single-line directive to elevate the "importance" of one style sheet over the other.

Answer 2

Make sure the stylesheet you want is called last (or a specific style you want is called last). For example, using this:

span { color: red; }
span { color: blue; }

...will turn all text in <span>'s blue. Take a look here.