You might have noticed the term inheritance used for

certain CSS properties.

Inheritance in CSS means that an element's style values are copied from

its parent element.

Let's take a look at some examples.

So a good example of inheritance in a CSS property is with the color property.

If a color value is applied to an element,

any child of that element will inherit that color value.

Except for the text color in links,

since browsers assign specific color styles for those.

So for instance, notice how our title and

h1 elements share the same white color value.

So if we go back and remove the color property from each rule, so

I'm going to delete the color property from the h1 rule,

then scroll down to the title rule and delete the color property from here.

So now as we can see, the title and

heading are now inheriting the gray color value declared in the body rule.

But now, if we go back and give our main header a color property.

So right beneath background size let's type color property, and

set the color value to white.

When we save and refresh the page, notice how the title and heading

elements are now inheriting that white color value declared in the main header.

So when a CSS property is said to be inherited,

it just means that the value is determined by that inheritance from its parent.

It's part of what allows us to keep styles consistent throughout our website,

without having to repeat them in our code.

Now, CSS also has a value that we can use to sort of

break all inheritance from a paired element.

So, if we scroll down, notice the large intro paragraph in our layout, and

it's inheriting the grey text color from the body.

Now let's say we wanna change this text color back to

the browser's default color for body text, which is black.

Well, instead of going to the intro rule, and

setting a color property and defining the color value back to black.

Instead of doing that, we can also use the value initial.

So the value initial displays the value that is designated as

the property's initial value.

So the browser ignores the inheritance from the body element and

the intro's text color goes back to the initial value of black.