!important property

If you ever find yourself with conflicting rules on an element, and want one to take precedence even over rules with higher specificity. you can add the !important property, to override all other rules.

Here is an example:

#id {
  background-color: blue;
}

.class {
  background-color: gray;
}

p {
  background-color: red !important;
}

<p>This is some text in a paragraph.</p>

<p class="class">This is some text in a paragraph.</p>

<p id="id">This is some text in a paragraph.</p>

In this case, all of these <p> tags will have a red background.

Tweet