Question

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?

Answer 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;
}