CSS: overriding styles

I have spent quite a bit of time this week overriding CSS from a library, so here's a basic guide to the things you have to think about when doing it.

Specificity

This is as massive topic of what is more specific than what. All I'm going to give are the very basics. There's a lot more information on specificity on MDN.

Order

Generally speaking, CSS is evaluated in the order it's written. So if you have

header {
  color: red;
}

header {
  color: blue;
}

Then the header's text will be blue.

The same goes for CSS files. Anything you put in your file will override anything in the library's file because your file comes after the library's file. As long as it's at least as specific...

Selectors

It is useful to have an idea of what beats what when it comes to selectors. The order goes, from least specific to most specific:

1. HTML tags
2. Classes
3. Ids

So if the CSS you're trying to override has

#header {
  color: yellow;
}

And you have

.header {
  color: green;
}

The header text will stubbornly stay yellow, because an id beats a class.

Multiple selectors

Adding selectors makes something more specific. So if the CSS you're trying to override has

body .header {
  color: purple;
}

And you have

#header {
  color: pink;
}

The header text will stay purple.

!important

Generally speaking !important beats everything else. So if the CSS you're trying to override has

body .header {
  color: purple;
}

And you have

#header {
  color: pink !important;
}

Now your header text will be pink.

But generally speaking you want to avoid using !important if you can. Because it beats everything else, it can make it hard to work out what's going on.

initial and unset

The library has some CSS in there that you don't want. Let's say it's a text colour. In your dev tools you can just untick that style, but you can't delete it from the library because you have no control over that. How do you reset the colour?

One of the things you can do is to use the initial, inherit and unset properties.

initial

initial re-sets it to its initial state. You know how on a site, if you have no CSS you'll have black text, blue links and purple visited links? Those are the initial properties. So if you set

header {
  color: initial;
}

Then your header text will be black.

inherit

If you instead want your header text to have the same colour text as you've set on the body, then inherit is your friend

body {
  color: orange;
}

header {
  color: inherit;
}

Now your header text will be orange.

unset

unset is a combination of the above. If there's something to inherit, it will inherit it. If not, it will use the initial value.

normal and none

You can always set a property to be the default. So, for example, if you have text that's in italics and you want it to not be in italics, then you can use

header {
  font-style: normal;
}

Or if the text is in uppercase and you want it to be in normal case, then you can use

header {
  text-transform: none;
}

There are other things here, such turning off a display flex with display: block. It's a case of looking at what property has been used and finding out what other options there are for it.

If in doubt...

Look at what selector has been used in the dev tools and use that. That way you'll know it has the same specificity, so what you use will override what's in the library.