title: When to use the !important property in CSS
body: <p>Consider:</p>
  
  <pre><code>#div p {
      color: red !important;
  }
  ...
  #div p {
      color: blue;
  }
  </code></pre>
  
  <p>I understand how <code>!important</code> works. In this case the div will render red because now it has priority (<code>!important</code>). But I can't still figure out an appropriate situation to use it in. Is there an example where <code>!important</code> saves the day?</p>