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

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

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.

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.

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?

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.

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

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

1 Answer

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.