title: Override Background Color
body: <p>Let's say my body is this in my HTML File:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id=&quot;header&quot;&gt;
      &lt;h1&gt;Hello!&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id=&quot;content&quot;&gt;
    &lt;/div&gt;
    &lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>And this is my CSS-File:</p>
  <pre class="lang-css prettyprint-override"><code>* {
      margin:0px;
      padding:0px;
      background-color:#F6F6F1;
  }
  
  body {
      width:800px;
      margin-left:auto;
      margin-right:auto;
  }
  
  div {
      background-color:#F00;
  }
  </code></pre>
  <p>Why does the background-color in the <code>*</code> rule override the background-color in the <code>div</code> rule? Isn't the <code>div</code> rule more specific? If I put the background-color from the <code>*</code> rule to the <code>body</code> rule it works as I expected.</p>