HTML and CSS Reference
In-Depth Information
It's time to talk about your inheritance…
Did you notice when you added the
font-family
property to your
p
selector that it also affected the
font family of the elements inside the
<p>
element?
Let's take a closer look:
Wh
en y
ou a
dde
d th
e
fon
t-f
amil
y pr
oper
ty
to y
our
CS
S p
sele
ctor
, it
chan
ged
the
fo
nt f
amil
y of
you
r <
p>
ele
men
ts. B
ut
it a
lso c
han
ged
th
e fo
nt f
amil
y of
th
e tw
o lin
ks
an
d th
e em
pha
size
d t
ext.
The elements inside the p element inherit the
font-family style from p
Not
every s
tyle is
inhe
rited. J
ust som
e
are,
like fo
nt-fam
ily.
Just like you can inherit your blue eyes or brown hair from your parents, elements can
inherit styles from their parents. In this case, the
<a>
and
<em>
elements inherited the
font-family
style from the
<p>
element, which is their parent element. It makes sense
that changing your paragraph style would change the style of the elements in the paragraph,
doesn't it? After all, if it didn't, you'd have to go in and add CSS rules for every inline
element in every paragraph in your whole site…which would definitely be so NOT fun.
Let's take a look at the HTML tree to see how inheritance works:
If we set
the font-
family of
all the <p>
elements,
here are a
ll the elem
ents that
would be
affected.
html
T
he <a>, <
em>, and
<a>
e
lements in
the two
p
aragraphs
inherit
the
f
ont-fami
ly from t
heir
p
arent ele
ments, th
e
<
p> elemen
ts.
body
p
p
p
h1
h2
img
a
em
a
