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

Peter Hsiao
Peter Hsiao
2,086 Points
Posted by Peter Hsiao
Peter Hsiao
2,086 Points

Adding Background Color to <body> Doesn't Override Header Color <header>?

Hi Everyone,

I'd like to know why adding a background color to <body> and placing it at the first line of my CSS code doesn't override the background color of my <header> given that CSS is "cascading?"

The <header> tag is inside the <body>, which means that any background color change to <body> should override the background color of whatever is inside <body>, no?

Jacobus Hindson
Jacobus Hindson
14,429 Points
Jacobus Hindson
Jacobus Hindson
14,429 Points

Hi Peter,

Would be happy to have a closer look for you, perhaps you can post your code here.

Type 3 backticks followed by css and end the code block with another 3 backticks

abdulrazak awali
abdulrazak awali
4,793 Points

hey i think i can help. so you mean this.... 

<body>  
     <header>this is the header</header> 
 </body>

/=======stylesheet=====/ header{ background-color = yellow;
}

body{ background-color=red; }

changing the Bg-color of the <body> won't affect the Bg-color of the header because (it doesn't have to) . think of the 'body' as a carpet,

then the 'header' as a cardboard on the carpet. if u change the carpet color will the color of the cardboard change..No b'cos does are separate unless the <HEADER> doesn't have Bg-color then it will take the bg-color of the body.

I hope this helped. let me your comments.

please disregard the fact that the mock-up is not in the editor, i'm new on treehouse(don't know how to use it) but i,ve been coding for months

Jacobus Hindson
Jacobus Hindson
14,429 Points
Jacobus Hindson
Jacobus Hindson
14,429 Points

Abdul I think you mean

body {
background-color: red;
}

header {
background-color: yellow;
}

Also Peter - Yes CSS is cascading but certain HTML elements have a z-index placing them in front of another element regardless of your CSS - Body and Header are 2 such elements, if you set a separate background for header and body the header background will show through regardless of where it is in the CSS.

abdulrazak awali
abdulrazak awali
4,793 Points

thanks Jac, does what i wanted to do but i'm new here.

also Peter, the header sits on top of the body so if you set a background color for the body it can't override the header

Peter Hsiao
Peter Hsiao
2,086 Points
Peter Hsiao
Peter Hsiao
2,086 Points

Thanks! You guys solved my concern :)