Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Customizing Colors and Fonts Organize CSS with Comments

if the text of the body is set to grey...

Hello,

In the css of my techproject, the text of the body is set to grey, while the color of the text for the nav and the headers have their own color. Looking at the order of our css selectors and their styles in the below, I wonder why the color of the text in the nav and headers are not grey.

/*

a{ text-decoration:none;

}

wrapper{

max-width:940px; margin:0 auto; padding:0 5%;

}

logo{

text-align:center; margin: 0;

}

a{ color:#6ab47b;

}

header{ background:#6ab47b; background-color:#599a68;

} h1, h2{ color:#fff;

} nav{ background-color:#599a68;

}

nav a, nav a:visited{ color:#fff;

}

nav a.selected, nav a:hover{ color:#32673f;

} body{

background-color:#fff; color:#999;

}

*/

3 Answers

Hey orange Sky (Your name did make me ponder for a while though... As far as I remember the sky is green.) Now coming back to your question (which was set 5 months prior to my writing this answer, but still I'm gonna write it) Actually, I bumped into that same question as soon as I saw all the paragraph elements in green even after refreshing for thousands of times after a while I found the real reason out.

You see, at the very beginning, we had to set the anchor elements of the page to green color, which is more specific than the body element. That's why even after adding the text color of the body to a specific color, your code doesn't affect the whole body. Hope you find that useful.

Steven Parker
Steven Parker
217,519 Points

:point_right: The header and nav colors are explicitly set to white:

h1, h2 {
    color:#fff;
}

nav a, nav a:visited {
    color:#fff;
}

Hello Steven,

Yes the headers and navs have their text color set to white, but the body text-color comes last, so I would imagine the color set in the body would win and the entire page's text would be in the color of the body's text color of #999;

thanks

nico dev
nico dev
20,364 Points

Hi orange sky,

The reason for that lies in the selector specificity. True, color for all the body comes later, and it's true that the cascading feature implies overriding earlier values, but in the case of the color, for example, of the headers 1 and 2, the selector used to assign them the color is

h1, h2 {
  color: #fff;
}

That, of course, is more specific than simply "body," because clearly h1 and h2 are parts inside the body.

I am just rephrasing here what Nick explained in another video. You do well in reviewing videos; you may find his explanation.

HTH.