How to use the !important Property in CSS

John on June 18, 2021

The !important property interrupts the cascading priority of a CSS rule.

The normal behaviour of CSS is to apply the last rule found for a particular selector. To demonstrate this let's a look at a simple example of how one rule overrides another by simply being further down the hierarchy of rules:

<h1>Title</h1>

h1 {
  color: red;
}

h1 {
  color: blue;
}

The text is blue because that rule is applied after the red color rule.

If we wanted to make the text red without changing any of the existing code structure in the above example, we could use the !important property like this:

<h1>Title</h1>

h1 {
  color: red!important;
}

h1 {
  color: blue;
}

It is crucial to only use the !important property when you absolutely need to. Interrupting the flow of CSS using !important is generally considered poor practice as it makes the code increasingly difficult to maintain every time it is used.

If you are only using it once or twice in your document, that might be fine, but otherwise, it is much better practice to refactor your CSS to solve the problem.