HTML and CSS Reference
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.
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.