Overriding styles without !important

How is it possible to override styles specified in another style sheet?

I do not want to use the !important tag to override them. I would much rather specify a new style sheet, put styles in there. Could this be achieved by changing the load order of the style sheets?

Solution 1:

It depends. CSS stands for Cascading Style Sheets, and there's a specific order that styles are applied in, overwriting previous styles. Without going into too much detail:

• If your rules have the same specificity, just load your stylesheet second and everything will work fine.
• If your rules have higher specificity, the order won't matter.
• If your rules have lower specificity, you'll need to modify them to match.

So, what's specificity? Basically, it's the sum of each selector in a rule. So this:

a {
    background-color: black;
    color: white;
}

Has less specificity than this:

body a {
    color: orange;
}

ID selectors have higher specificity than class selectors, which have the same specificity as pseudo-class selectors, which have higher specificity than tag selectors. So if all your content is contained in a <div> with an id of content, you would be able to override a style that looks like this:

body a {
    border: 0;
}

With:

#content a {
    border: 1px solid black;
}

Solution 2:

The boostrap stylesheet should be loaded first, your stylesheet second, this way your overwrites will be picked up.

This is called "cascading", from the documentation:

Cascading

This is the capability provided by some style sheet languages such as CSS to allow style information from several sources to be blended together. These could be, for instance, corporate style guidelines, styles common to a group of documents, and styles specific to a single document. By storing these separately, style sheets can be reused, simplifying authoring and making more effective use of network caching. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones. Not all style sheet languages support cascading.

Solution 3:

If you can increase the specificity of styles, you can do this without the !important.

For example:

HTML

<div id="selector">
  <a>Hello</a>
  <a class="specific">Hi</a>
</div>

CSS

div a {}

Will be ignored, if you give a specific class inside #selector

.specific { }

Here is a demo explaining my point. Basically, the idea is to define the styles as closely as possible.

Solution 4:

look at http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

<p class="example">
    This is a <strong>test</strong>.
</p>

strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }

The text will be blue. The order of the rules doesn't matter.