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
Peter Hsiao
2,086 PointsQuestion About what 'initial' and 'inherit' Does
Hi everyone,
I have a quick question 1.) on what initial and inherit does and 2.) when to use them as opposed to using a definitive value (eg. #fff rather than inherit)?
In the example CSS below, by setting the last color value to 'initial', does it go back to the INITIAL (or VERY FIRST) color defined in my CSS, which is #ccc?
body {
color: #ccc;
}
.primary-content {
color: #000;
}
@media screen and (max-width: 768px) {
.primary-content {
color: initial;
}
}
Does using the value inherit use the parent's color of the child element? For example...
<body>
<div class="primary-content">
<p>Hello</p>
</div>
</body>
.primary-content {
color: #000;
}
p {
color: inherit; /* use parent's color, which is #000 */
}
Wayne Priestley
19,579 PointsHi Peter
Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.
You have to make sure you have a bit of space under your last line of text in your post. Then you add three back ticks followed by html or css depending on the type of code your inserting.
Then straight after your last line of code you add another three back ticks.
Remember to leave at least a few lines between any text at the top or bottom of your code.
Hope this helps.
3 Answers
Devin Scheu
66,191 PointsInherit is used to get the property from the parent class. For example, you have a unordered list with the text color of black on it. If you used inherit on the list elements inside of it, their color would also be black. As for initial, The ‘initial’ keyword represents the specified value that is designated as the property's initial value. Thus, its meaning depends on the property, but not on anything else, e.g. not on the browser or on the element that the property is being applied to. For Example the display attribute, the initial value is inline.
If you think my answer was good, feel free to mark it as best answer below, if you need more help in the future from me, you can contact me at devinwscheu@gmail.com.
Peter Hsiao
2,086 PointsIf the display attribute's initial value is inline, why don't I just use display: inline rather than display: initial? In the end, I'd get the same answer (inline)....
Ryan Field
Courses Plus Student 21,242 PointsI think the best idea is just to ignore initial as a value for CSS declarations. It's really, really not useful (as you have stated) except in very edge cases, and even then, it's not necessary. Just know that inherit will have the element inherit the value from its parent element, and that you will almost never, ever need initial. :)
Peter Hsiao
2,086 PointsThanks Ryan!
Devin Scheu
66,191 PointsYes Ryan is very right, I almost never use initial as a value when i'm doing CSS, but it is always useful to know what it does :).
Guil Hernandez
Treehouse TeacherYou can also view examples of initial and inherit in this video. :)
Devin Scheu
66,191 PointsThanks Guil, This actually really helped me out!
Máté Végh
25,607 PointsHi,
Initial sets a property to its default value. It's used when an element's value has been overwritten by a parent element and you want to set it back to default.
Inherit sets a property to inherit its value from its parent element. It's useful when you want a property to has the same value as its parent element.
Update: Sorry, I was wrong. This is not the good use case of the initial value, because it doesn't work exactly as I explained. It doesn't reset the values, it actually sets a property to its initial or designated value, not the browser default. For instance, div elements has a display block by default, but if you set it to initial, it will become inline, because that's the initial value of the display property. At this point I have no idea why would I ever use the initial value. Never used it, never will.
Peter Hsiao
2,086 PointsHi Matt,
Thanks for your answer.
Continuing with your div display example, you mentioned that its default is block. But if you set it to initial, it would be inline.
Wouldn't setting it to initial bring the display to block, since it's the default?
Unless default doesn't equal initial?
Máté Végh
25,607 PointsBrowser default ≠ Initial
Normally I'd think that too, and I also believed that until yesterday, but it doesn't work that way. Again, it does not reset a property to its browser default (which I think would be the normal), but it sets it to its initial value, which is a designated value for the actual property.
I know it's very confusing, because it sounds so useless. No idea when it could be useful, but it's good to know what it does, so you'll never use it.
Peter Hsiao
2,086 PointsPeter Hsiao
2,086 PointsWhat do I do to make my codes appear instead of in text form?