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

HTML How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Christopher Beasley
Christopher Beasley
1,493 Points

Background color is not changing.

My background color is not changing to orange. I have looked the code and even changed the color but it does not work. here is the code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

Here is the code to the main.css:

body{ background-color: orange; }

Christopher, is that all of your html? If so, you don't have a <body> element and there's nothing for the body selector in your css to select.

4 Answers

Do you have a body element in your html code? Css selectors and html elements have to match. You could use body instead of section

You need to post your css as well so we can see the code

Just looking at your html I see no body element to select in your css

Christopher Beasley
Christopher Beasley
1,493 Points

Here is the code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css">

<style>
  nav a {

    background-color: orange; 
    color: white; 
  }

</style>

</head> <body> <header> <a href="index.html"> <h1>Chris Beasley</h1> <h2>Programmer</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="">
        <p> Experimentation with color and texture</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in photoshop</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p> 80s</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p> Idk</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p> who cares</p>
      </a>
    </li>

</ul>
</section>
<footer>
 <a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
 <a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> &copy;  2016 Chris Beasley. </p>
</footer>

</body>

</html>

Christopher Beasley
Christopher Beasley
1,493 Points

Here is the code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css">

<style>
  nav a {

    background-color: orange; 
    color: white; 
  }

</style>

</head> <body> <header> <a href="index.html"> <h1>Chris Beasley</h1> <h2>Programmer</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="">
        <p> Experimentation with color and texture</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in photoshop</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p> 80s</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p> Idk</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p> who cares</p>
      </a>
    </li>

</ul>
</section>
<footer>
 <a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
 <a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> &copy;  2016 Chris Beasley. </p>
</footer>

</body>

</html>

OK so you need to assign the body element to you html, it shold start before the hearder with the opening body tag and close after the footer with the closing /body tag. like this

<body>
<header>
  <a href="index.html">
    <h1>Chris Beasley</h1>
  <h2>Programmer</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="">
        <p> Experimentation with color and texture</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in photoshop</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p> 80s</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p> Idk</p>
      </a>
    </li>

    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p> who cares</p>
      </a>
    </li>

</ul>
</section>

<footer>
 <a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
 <a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> &copy;  2016 Chris Beasley. </p>
</footer>
</body>
Christopher Beasley
Christopher Beasley
1,493 Points

Kelvin,

I think I copied the code wrong but here is the code that I had. I do have a <body> </body>. I refreshed and still no background color of orange.

  <body>
    <header>
      <a href="index.html">
        <h1>Chris Beasley</h1>
      <h2>Programmer</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="">
            <p> Experimentation with color and texture</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in photoshop</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p> 80s</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p> Idk</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p> who cares</p>
          </a>
        </li>

    </ul>
    </section>


    <footer>
     <a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
     <a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
    <p> &copy;  2016 Chris Beasley. </p>
    </footer>

</body>

You still need to add the body element to your html if that's what you are selecting in you css

Christopher Beasley
Christopher Beasley
1,493 Points

the crazy part is that if I hit edit, the <body></body> tabs are there. However, when I hit save, it does not show up. hmmmmm

Christopher Beasley
Christopher Beasley
1,493 Points

I figured it out. my folder name was CSS and I was putting css in the link path. Thanks Kelvin!