Question

Given the following code:

<div id="bla">
    <p class="blubber">Johnny Bananas</p>
</div>

and the style in head of that html doc:

<style>
    div#bla{background:yellow}
    p.blubber{background:purple}
</style>

Why is it that the child will be coloured purple and overlay its parent?

Answer 1

The background property is not inherited by children by default. Therefore, the background style of div#bla does not apply to p.blubber, and p.blubber can specify its own background color independently of its parent and regardless of specificity.

And since background isn’t being inherited, no overriding actually takes place.