Overriding styles without !important

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)