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">
refresh

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">
refresh

Related links

CSS specification for annotation !important

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments