!important
Makes a declaration win over all ordinary declarations, regardless of specificity.
Syntax
property: value !important;Examples
A class with !important beats an id:
<style>
#title { color: crimson; }
.muted { color: gray !important; }
</style>
<h3 id="title" class="muted">Gray: !important beats even the id</h3>Notes
!important is a sign of a specificity problem, not a solution: the only way to override it is another !important. Acceptable uses are utility classes like .hidden and overriding third-party styles you cannot change. Cascade layers (@layer) and :where() usually solve the same problem cleanly.
See also
- inherit, initial, unset, revert — Keywords that work in any property and reset it in different ways.
- @layer — Groups styles into cascade layers: a later layer wins regardless of specificity.
- :where() — Works like `:is()`, but always has zero specificity.
In the tutorial
- Cascade and specificity — Which rule wins when several set the same property: order, specificity, inheritance and !important.