title: CSS Inheritance involving div
body: <p>I've been reading a lot about CSS inheritance but I haven't been able to find anything about this question, and I'm confused. Please consider the following:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .anc {
    background-color: blue;
    color: red;
  }
  .des {
    background-color: inherit;
    color: inherit;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="anc"&gt;
    &lt;p class="des"&gt;
      One &lt;!-- Blue background, red text. Clearly inheritance. --&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p class="anc"&gt;
    &lt;div class="des"&gt;
      Two &lt;!-- Why is nothing inherited here? --&gt;
    &lt;/div&gt;
  &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The "One" text is working as I'd expect. But I don't understand why the "Two" text doesn't have a blue background and red text as well.</p>
  
  <p>Is there some special rule about inheritance for block elements as opposed to inline elements? Or something special just about div? What am I missing here? Do you have an online reference to a very thorough explanation of inheritance? Everything I've seen (and I've been looking a long time) just explains examples like "One", but doesn't address issues like "Two".</p>
  
  <p>I know that there are many (better) ways to get the same visual effect I'm asking for here. But this example is about me trying to understand inheritance in general, not trying to get any particular effect on this HTML code.</p>
  
  <p>Thank you so much for your help!</p>