HTML and CSS Reference
In-Depth Information
The values for some properties, such as
color
and
font-family
, are
inherited by child elements of the element where the property was set. If
that property was not explicitly declared for the child element, it will use
the inherited value for display. In the case of
color
, if the
<body>
element
has been set to
black
, then paragraphs, list contents, block quotes, and
other children will also have a
color
value of
black
. Because links have a
different color defined in the user agent style sheet, they will not appear
as black but as the default blue color (or other set default link color).
Inherited values are passed along to child elements as their
computed
value. For example,
font-size
is inherited; thus, the value passed to the
child elements would be the final, calculated value in pixels and not the
original units, which may have been ems, ens, points, or pixels. If the
inherited value were to be in ems instead, the size would then be recal-
culated for each child that inherited it.
<p style=”font-size: 10px”>
<strong style=”2em”>
<span>Text</span>
</strong>
</p>
In the previous code example, the
font-size
for the
<strong>
element
is calculated to be
20px
, and this is the value inherited by the
<span>
element. If the specified value of
2em
was inherited and the size recal-
culated, the
<span>
would have a font-sized value of
40px
instead. I'll
further explain computed values in the next section.
Other properties, such as
width
,
height
, and
margin
, are not inherited
and cannot be inherited. This means that although you may place a
height value on a
<div>
or
<article>
element of
400px
, all of that
<div>
or
<article>
's children will continue to use the default value of
height
(
auto
) unless their
height
is explicitly set.
