DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nic
Nic

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And you have

.header {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And you have

#header {
  color: pink;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And you have

#header {
  color: pink !important;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

header {
  text-transform: none;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content