Skip to content

Overriding CSS frameworks

If you're using Bootstrap, Bulma, Materialize, or any other CSS framework, sometimes you want to break out of the box and make a change to the framework! Maybe you want a different background color, to change the font size, or use a different font than what the framework wants.

We're going to say we have a header section on our page that looks like this:

<div id="homepage" class="container">
    <div class="header">
        <h1>Welcome to my website</h1>
    </div>
</div>

And we'll say the header is styled a certain way by default through the CSS framework. Unfortunately the title text is an ugly purple, thanks to this rule:

.container .header h1 {
    color: purple;
}

We want to change it! How can we override the default CSS styles of our CSS framework?

The complicated answer: SCSS/SASS

Most of the frameworks enable some degree of customization through the use of SCSS, SASS or some other compilation process (also known as "write a different language and turn it into CSS"). For example:

That's not what we're doing here. We're doing cheap, quick fixes.

Rule specificity

We first might try to add a <style> section to our page, giving our headline a nice dark grey color:

<style>
h1 {
    color: #333333;
}
</style>

But it won't work! Even if we put it after the link to our CSS framework, it's unfortunately not powerful enough (or specific enough) to override the CSS framework's rule.

The original rule looked like this:

.container  .header h1 {
    color: purple;
}

If we want to override the rule, we need to just as specific about the tags we're looking to style. Not just an h1 tag, but an h1 inside of something with the class of header inside of something with the class of container.

A simple way is to just copy the selector and re-use it completely:

.container .header h1 {
    color: #333333;
}

That would work great! If you'd like to know more, though, read on...

Making use of IDs

The reason the second attempt works is CSS rule specificity. The general idea is something like this:

  • Tag names are worth 1 point
  • Classes are worth 10 points
  • IDs are worth 100 points

And whichever rule has the most points (or comes latest, if there's a tie) wins! So #homepage h1 beats .header h1 beats h1.

It's honestly much more complicated than that but you get the idea.

If you're just changing the header color for one section of your page, or one page on your site, a good idea might be to give your content an id attribute. The id will allow your to write CSS rules for that particular id instead of trying to battle a complicated set of classes that might be used in multiple places in the CSS framework. IDs are almost always more powerful than classes!

For example, if our HTML looked like this:

<div id="homepage" class="container">
    <div class="header">
        <h1>Welcome to my website</h1>
    </div>
</div>

Instead of writing out a series of classes and tag names, like this:

.container .header h1 {
    color: #333333
}

We could just reference our id instead:

#homepage h1 {
    color: #333333
}

Or #homepage .header h1 or whatever you want! Thanks to the #homepage id, chances are it's going to be the most powerful rule on the page and override everything from the framework.

Using ids is a great way to sneak some changes in without having unintended side effects on other parts of your page or site.

Use !important

If you want a CSS rule to override something that's in a different stylesheet, you can use the !important modifier. This makes the 

<style>
    p {
        color: red !important;
    }
</style>

Now every single paragraph tag is going to be red!

Using !important is really a hack, and has the potential for side effects or unintended effects. For example, you might make all <a> tags have underlines for usability purposes. But then it turns out that <a class="button"> is how the framework makes buttons, and suddenly all of your buttons have underlines! That's an awful example, but you get the idea.

Generally speaking, making "more powerful" rules is a better approach.