This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Inheritance in CSS means that an element’s style values are copied from its parent element. Inheritance allows us to keep styles consistent throughout a website without having to repeat them in our code.
Quick Reference
You might have noticed the term
inheritance used for
0:00
certain CSS properties.
0:03
Inheritance in CSS means that an element's
style values are copied from
0:04
its parent element.
0:08
Let's take a look at some examples.
0:10
So a good example of inheritance in a CSS
property is with the color property.
0:12
If a color value is applied to an element,
0:17
any child of that element will inherit
that color value.
0:19
Except for the text color in links,
0:23
since browsers assign specific color
styles for those.
0:25
So for instance, notice how our title and
0:28
h1 elements share the same white color
value.
0:32
So if we go back and remove the color
property from each rule, so
0:37
I'm going to delete the color property
from the h1 rule,
0:41
then scroll down to the title rule and
delete the color property from here.
0:44
So now as we can see, the title and
0:49
heading are now inheriting the gray color
value declared in the body rule.
0:53
But now, if we go back and give our main
header a color property.
0:58
So right beneath background size let's
type color property, and
1:04
set the color value to white.
1:09
When we save and refresh the page, notice
how the title and heading
1:12
elements are now inheriting that white
color value declared in the main header.
1:17
So when a CSS property is said to be
inherited,
1:22
it just means that the value is determined
by that inheritance from its parent.
1:25
It's part of what allows us to keep styles
consistent throughout our website,
1:29
without having to repeat them in our code.
1:33
Now, CSS also has a value that we can use
to sort of
1:35
break all inheritance from a paired
element.
1:38
So, if we scroll down, notice the large
intro paragraph in our layout, and
1:41
it's inheriting the grey text color from
the body.
1:46
Now let's say we wanna change this text
color back to
1:49
the browser's default color for body text,
which is black.
1:52
Well, instead of going to the intro rule,
and
1:56
setting a color property and defining the
color value back to black.
1:59
Instead of doing that, we can also use the
value initial.
2:07
So the value initial displays the value
that is designated as
2:12
the property's initial value.
2:17
So the browser ignores the inheritance
from the body element and
2:20
the intro's text color goes back to the
initial value of black.
2:23
You need to sign up for Treehouse in order to download course files.
Sign up