HTML and CSS Reference
In-Depth Information
Inheritance
The final fundamental aspect to understanding CSS is understanding when styles from the
parent are inherited by their children and when they are not. For instance, consider the fol-
lowing HTML:
<div>
<span>this is text</span>
<span>this is more text</span>
</div>
If we apply a style to the
div
, it may or may not make sense to apply that style to the
span
elements. For instance, it does make sense to cascade the font, since it is a reasonable as-
sumption that parents and children will use the same fonts. This means we can set a font for
the body of the document, and automatically have it apply to all elements unless it is over-
ridden.
Consider the case of a border though. If we were to specify a border for the
div
, we would
not want this to cascade to the
span
, since that would cause a border to be rendered around
the
span
elements. Likewise, positioning and spacing styles such as padding, margin, top
and left are not inherited.
There are some styles where it is dubious whether they should be inherited. Background col-
or is an example, this does not get inherited, although there are many cases where this would
make sense. It is however possible for a child to inherit this if it wants using:
background-color: inherit;
