The special case of !important

The !important keyword can be appended to the value of any CSS declaration. It sets the specificity of that rule to have a special value of 1, 0, 0, 0, 0, which will give it precedence over any style including inline styles.

As an example of where it can be useful, we might want to create a style rule that is reusable and lets us hide content on a web page. If we apply this class to an element, we want that element to be hidden and not be rendered on the web page. However, consider the following example:

<style>
div.media {
  display: block;
  width: 100%;
  float: left;
}
.hide {
  display: none;
}
</style>
<div class="media hide">
  ...Some content
</div>

We might expect our div element to be hidden because the .hide class appears second in the style sheet. However, if we apply the specificity calculations we’ve learned about, we can see that div.media...