CSS – !important examples

CSS annotation !important will override all other styles (irrespective if specificity). Note that using annotation !important is discouraged and should be avoided.

Here are some examples.

CSS without !important

Here background-color set by #id1 will override.

<style type="text/css">
div {width: 100px; height:100px;}
#id1 {
  background-color:lightgray;
}
.box {
  background-color:lightgreen;
}
</style>

<div id="id1" class="box">

CSS with !important

Here background-color set by .box will override as it has !important annotation.

<style type="text/css">
div {width: 100px; height:100px;}
#id1 {
  background-color:lightgray;
}
.box {
  background-color:lightgreen !important;
}
</style>

<div id="id1" class="box">

Related links

CSS specification for annotation !important