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

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

background wont change. workspace problem?

ive followed the steps and checked if my code was correct countless times and the background will not change colors. i saw in another post about this issue that it was a problem with workspace. im running on mac using safari

Jeff Lemay
Jeff Lemay
14,268 Points

Can you post your code?

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Josh Harris - Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
main.css
body {
  background-color: orange;
}
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi there Joshua,

I have formatted your post to display the code correctly. Please see this thread regarding posting code.

With regards to trying to answer your question, is that your entire HTML file? If so, then you do not have a body tag which is referenced in main.css.

3 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

It looks like your html (index.html) is missing its body and the closing html tag. So you don't have a body element to add a background color to.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Josh Harris - Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <h1>This is the body!</h1>
  </body>
</html>
Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

i think i do have a body sorry i didnt include it here it is.

<body> <header> <a href="index.html"> <h1>Josh Harris</h1> <h2>Web Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> </a> </li> </ul> </section> <footer> <a href="http://facebook.com/josh.harris.73700"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Josh Harris.</p> </footer> </body>

Jeff Lemay
Jeff Lemay
14,268 Points

So your whole index.html file is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Josh Harris - Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

<header>
  <a href="index.html">
    <h1>Josh Harris</h1>
    <h2>Web Designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<section>
 <ul>
    <li>
      <a href="img/numbers-01.jpg">
      <img src="img/numbers-01.jpg" alt="">
      </a>
   </li>
   <li>
     <a href="img/numbers-02.jpg">
     <img src="img/numbers-02.jpg" alt="">
     </a>
   </li>
   <li>
      <a href="img/numbers-06.jpg">
      <img src="img/numbers-06.jpg" alt="">
      </a>
   </li>
 </ul>
</section>
<footer>
  <a href="http://facebook.com/josh.harris.73700"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
 <p>&copy; 2015 Josh Harris.</p>
</footer>

  </body>
</html>

Can you try adding the background-color directly to the body tag?

<body style="background-color:orange;">
Sean T. Unwin
Sean T. Unwin
28,690 Points

Ensure that main.css is, in fact, inside a folder named, css and that that folder is in the same place (folder) as index.html.

edit: copied this comment as an answer

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

YES! thanks jeff. when i added it directly to the body on the index page it changed the background immediately. apprecaite the help thanks again

Jeff Lemay
Jeff Lemay
14,268 Points

Like Sean said, make sure the path to your main.css file is correct. That must be what's causing your problem.

And you're welcome! Enjoy the journey!

Chris French
Chris French
2,002 Points

Sean you are the MAN! I have been pulling my hair out trying to figure out why the background would not change color, even though all of the code was correct. That was the problem the whole time, thank you!

Sean T. Unwin
Sean T. Unwin
28,690 Points

I'm glad you got it sorted out, Chris.

I have copied my comment as an answer in case you get emails about declaring a best answer.

Sean T. Unwin
Sean T. Unwin
28,690 Points

Ensure that main.css is, in fact, inside a folder named, css and that that folder is in the same place (folder) as index.html.