Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Display Values

Enemuo Felix
Enemuo Felix
1,895 Points

The Inherit value

I have been curious about what the Inherit value really does in CSS. I have come to notice that it is also accepted by all css properties. Can someone please explain it for me? I will also appreciate if With code pen or any other online editor if. Thanks

-Noob

Eusebiu Gagea
Eusebiu Gagea
14,127 Points

What it does is assigning the value with the parent property value. On my experiences there aren't so many cases when you should use it. A child takes by default its parent property value, and in this way you can override some properties. For example, say you have a div with p tags inside it and you set some properties for that p tags. Now, some p tags need to have let's say the same color value as the div, and now you use inherit. In my opinion this is the best practice for it. Let me know if you understood what I tried to explain here and please come back with more questions if not. + I've recently found that not all the properties are inherited by default.

Eusebiu Gagea
Eusebiu Gagea
14,127 Points

div { color: #666; } div p { color: blue; text-decoration: underline; } div p.inactive { color: inherit; text-decoration: none; } <div> <p></p> <p class="inactive"></p> <p></p> </div> That's the example I talked about.

Enemuo Felix
Enemuo Felix
1,895 Points

Eusebiu Gagea
CSS

div {
 color: #666;
 } 
div p {
 color: blue;
 text-decoration: underline;
 } 
div p.inactive { 
color: inherit;
 text-decoration: none; 
}

HTML

<div> <p></p> <p class="inactive"></p> <p></p> </div> 

According to your explanation, the color value for the div p.inactive will be the same as the parent element. Which is #666? So what happens if you repeat the same color value(#666) instead of giving it the 'Inherit' value?

Eusebiu Gagea
Eusebiu Gagea
14,127 Points

It's the same thing. But you'll see that css is all about pattern and is good to know that this color is inherited from the parent.

Enemuo Felix
Enemuo Felix
1,895 Points

Thanks so much Eusebiu Gagea Perhaps, you could change to answer instead of comment so that i can mark you

Eusebiu Gagea
Eusebiu Gagea
14,127 Points

Happy to help you! Whenever you have more questions just let me know.

1 Answer

Eusebiu Gagea
Eusebiu Gagea
14,127 Points

What it does is assigning the value with the parent property value. On my experiences there aren't so many cases when you should use it. A child takes by default its parent property value, and in this way you can override some properties. For example, say you have a div with p tags inside it and you set some properties for that p tags. Now, some p tags need to have let's say the same color value as the div, and now you use inherit. In my opinion this is the best practice for it. Let me know if you understood what I tried to explain here and please come back with more questions if not. + I've recently found that not all the properties are inherited by default.