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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Martijn de Jong
Martijn de Jong
590 Points
Posted by Martijn de Jong
Martijn de Jong
590 Points

Why isn't the color grey in <body> not overriding <h1> and <h2>?

In this lessons he was talking about coloring within css, in the last part of the video. He was making the color of the body grey with the code: 

body {
  background-color: #fff;
  color: #999;
}

In this case the color of h1 and h2 remain white. Shouldn't they change to grey? As this rule should override the previous rule?

Code:

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;
  border-color: #599a68;
}

h1, h2 {
  color: #fff; 
}

nav {
  background: #599a68; 
}

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

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

body {
  background-color: #fff;
  color: #999;
}

MOD: edited to format code.

3 Answers

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

As a preface, I think this is the answer but do not know for sure.

CSS relies on specificity and order. I believe that h1 and h2 are more specific than body, therefore body will not override h1 and h2. But, I would have to test it to make sure that is correct.

Martijn de Jong
Martijn de Jong
590 Points
Martijn de Jong
Martijn de Jong
590 Points

That makes sense, thank you.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

To test this, I would comment out the h1 and h2 code and see if it changes color. Then put it back in and see what happens.

Martijn de Jong
Martijn de Jong
590 Points
Martijn de Jong
Martijn de Jong
590 Points

When I remove the h1 and h2 code, it will hide the text.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I just tested this on codepen.io and I am correct about specificity.

Alexander Mooney
Alexander Mooney
7,321 Points

This answer is correct.

Stamford Hwang
Stamford Hwang
3,329 Points
Stamford Hwang
Stamford Hwang
3,329 Points

I took out the h1, h2 code but the header text revert back to green, what gives?

My thinking is that the header text are hyperlinks, and so they are not really considered text?

Subhan Khalid
Subhan Khalid
6,844 Points
Subhan Khalid
Subhan Khalid
6,844 Points

Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied.

So, your body styling should be above the h1, h2 styles.

body { background-color: #fff; color: grey;}

h1, h2 {color: #fff; }

I hope this helps.

Martijn de Jong
Martijn de Jong
590 Points
Martijn de Jong
Martijn de Jong
590 Points

So even if I place h1 and h2 above the body, but making h1 and h1 more specifier. It should take the rule of h1 and h2, correct?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

If everything is equal in specificity, later code will override earlier code.

Subhan Khalid
Subhan Khalid
6,844 Points

That makes sense, h1, h2 are more specific, what about adding !important rule to the body tag?

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Is there any validity to what Stamford Hwang suggested in his post?