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) Fundamental Concepts Inheritance

CSS Basics: Inheritance

When I gave my .intro {color: initial;} it didn't change the introduction text color to the initial "black" color. It remained #878787 gray color. However, if I gave my .intro {color: black;} then the introduction's text color turned black.

1 Answer

Julian Aramburu
Julian Aramburu
11,368 Points

Hi Kathryn! I just checked myself, and if I set in the media query, the color to initial, when I save and hit refresh text change from #878787 to black as soon as I hit the 768 pixel mark... Did you save and refresh the page when you set color to initial?

Yes, I did save & refresh the page.

The exercise merely deleted the color properties as follows: h1 {color: rgba(255, 255, 255, 1);} & .title {color: white;}, added .main-header {color: white;}. But, when adding color property to .intro {color: black;} or .intro {color: initial;}, then the browser is supposed to ignore the inheritance from the body {color: #878787;}. However, the .intro text remains gray colored & doesn't turn black when I use .intro {color: initial;}. I checked it by shrinking/enlarging the viewpoint window & the .intro text remained gray. The .intro text didn't turn black as it was supposed to do. The instructor didn't place a color property in the @media query in this lesson. I even checked the word spelling.

Maybe I missed something in an earlier lesson in this module.

Well, I discovered that IE 11 doesn't render .intro {color: initial;} to black. The intro text stays the gray color. IE 11 accepts .intro {color: black;}, but not .intro {color: initial;}. However, Google Chrome accepts .intro {color: black;} or .intro {color: initial;}.

Browsers are picky. Wish they were all standardized.