getting started with css
you are here
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
Let’s take a closer look:
When you added the font-family
property to your CSS p selector, it
changed the font family of your
<p> elements. But it also changed
the font family of the two links
and the emphasized text.
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
elements inherited the font-
family style from the
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 deﬁnitely be so NOT fun.
Let’s take a look at our XHTML tree to see how inheritance works:
Not to mention, error-
prone, tedious, and
The elements inside the <p> element inherit the
font-family style from <p>
The <a>, <em>, and <a>
elements in the two
paragraphs inherit the
font-family from their
parent elements, the
The <p> elements, of course, would
be styled with the font-family.
Not every style is
inherited. Just some
are, like font-family.
If we set the font-family of all the <p> elements, here
are all the elements that would be affected.
The <img> element is a
child of a paragraph, but
it doesn’t have any text,
so it’s not affected.