CSS !important Rule

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Even though ID has higher specificity, !important will override it.

This paragraph has a red background.

!important is the only way to override inline styles from an external stylesheet.

This text is blue, overriding the inline red style.

Using !important is considered bad practice because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

Example

.my-class {
  background-color: red !important;
  color: white;
}