!important

!important is a CSS declaration that overrides the normal cascade. It has the highest priority after browser declarations. It should be avoided in favor of proper specificity management.

!important Syntax

CSS

/* !important overrides everything */
.button {
  background-color: blue;
}

.button {
  background-color: red !important;
  /* Red wins, even with lower specificity */
}

/* Placed before semicolon */
.element {
  color: red !important;
  /* Correct placement */
}

Priority Order

Priority	Source	Example
Highest	Author !important	color: red !important
High	Author rules	color: red
Low	Browser default	Link is blue

CSS

/* When to avoid !important */

/* Bad: using !important unnecessarily */
.button {
  background-color: blue !important;
}

/* Good: using proper specificity */
.primary-button {
  background-color: blue;
}

/* Exception: utility classes (acceptable) */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center !important;
}

Warning

Avoid !important in general CSS. It breaks the cascade and makes styles hard to override. Only use in rare cases like utility classes or overriding third-party styles.

Note

!important has the highest priority. Avoid it—use proper specificity instead. Only acceptable for utility classes or unavoidable overrides.

CSS variables: [CSS Custom Properties (Variables)](/css/custom-properties).