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 CSS: Cascading Style Sheets Use ID Selectors

Posted by Mikaela Schaefer
Mikaela Schaefer
817 Points

My code to change the background color to orange in main.css file is not working. Why?

My code appears to be exactly the same, but the background color refuses to change. At one point, my preview even stopped working. My code was previously working just fine so I know it's not in the HTML file.

Here's my main.css code:

body { background-color: orange; }

I'm wondering if there is something in normalize.css that isn't correct? Please help!

4 Answers

Andrew Stelmach
Andrew Stelmach
12,583 Points

The only way your background color wouldn't change is:

  1. The element you are colouring isn't visible - this can only really happen if (a) the element doesn't have any content inside it, or (b) you are floating some elements somewhere on your page and that's causing a margin collapse.

  2. There is something 'on top' of that element. This could only be the case if you have some other elements positioned absolutely and/or relatively. But if you haven't used the 'position' property in your css anywhere (after normalize), then that can't be the case.

Try commenting-out all of your normalize and see if the problem still exists, but I doubt that will work.

Post up your code in here or load it all into codepen and post a link.

There WILL be a reason, believe me!

Luke Glazebrook
Luke Glazebrook
13,564 Points
Luke Glazebrook
Luke Glazebrook
13,564 Points

Please make sure that the stylesheet is properly linked in your HTML file Mikaela! Also, please make sure to save your files before refreshing the preview.

Apart from that though your code looks spot on so I don't know what is happening.

Mikaela Schaefer
Mikaela Schaefer
817 Points

Hi Luke

Thanks for responding so quickly! I have deleted and remade the main.css file to assure that it is in the proper folder and properly linked. My boyfriend is an experienced programmer and looked over my code and could not find anything wrong with it. Again, as I look over the normalize.css file, I'm noticing some red-highlighted code, but don't have enough experience to know what's wrong. Could that be my problem?

Luke Glazebrook
Luke Glazebrook
13,564 Points

No problem Mikaela! Alright good good and like your boyfriend I couldn't see anything wrong with it at all.

If you got the Normalize.css file from the project downloads then it should work perfectly without any edits. That is where I got mine.

Have you made sure to link your main.css below your Normalize however?

Mikaela Schaefer
Mikaela Schaefer
817 Points
Mikaela Schaefer
Mikaela Schaefer
817 Points

Hey guys! So I had misspelled stylesheet as sytlesheet. That was the only error in the code, however when I first fixed it, the preview remained unchanged. It was only after I logged off treehouse and reopened my workspace that whatever was wrong fixed itself. I think it may have been a Safari bug. Thanks for all the help!

Luke Glazebrook
Luke Glazebrook
13,564 Points

Glad to hear you got it sorted Mikaela! Maybe try using Chrome in the future if you continue to experience problems.

ericearle
ericearle
1,076 Points
ericearle
ericearle
1,076 Points

I am getting this same exact problem.