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 trialPeter Hsiao
2,086 PointsAdding 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?
abdulrazak awali
4,793 Pointshey 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
14,429 PointsAbdul 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
4,793 Pointsthanks 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
2,086 PointsThanks! You guys solved my concern :)
Jacobus Hindson
14,429 PointsJacobus Hindson
14,429 PointsHi 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