Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

!important – CSS

Demo

Summary

You can override a declaration in another rule by using the !important keyword:

p {
  color: red !important;
}

Details

If you need to override a style in CSS, you can use the !important keyword. The !important keyword is placed after the value(s) and before the semi-colon, like this:

p {
  color: red !important;
}

p {
  color: blue;
}

In the example above, the first rule will override the second and all of the paragraphs will be red. If the first rule did not have the !important keyword, the paragraphs would be blue.

In general, you should avoid using the !important keyword. You should first try overriding a style using a rule with a selector with a higher level of specificity, like a class or ID selector.

You have to use the !important keyword to override a declaration that is also using the !important keyword.

Exercises

First, recreate the CSS code in the embedded CodePen demo. Then try customizing the final color value.

References

Specificity on MDN

Back to: CSS Course > CSS Concepts