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
Posted by 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; }

jcorum
jcorum
71,830 Points

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

Elena Torrey
Elena Torrey
9,156 Points
Elena Torrey
Elena Torrey
9,156 Points

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

Kelvin Simon
Kelvin Simon
6,209 Points
Kelvin Simon
Kelvin Simon
6,209 Points

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

Kelvin Simon
Kelvin Simon
6,209 Points

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

Christopher Beasley
Christopher Beasley
1,493 Points
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
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>

Kelvin Simon
Kelvin Simon
6,209 Points
Kelvin Simon
Kelvin Simon
6,209 Points

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
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>
Kelvin Simon
Kelvin Simon
6,209 Points
Kelvin Simon
Kelvin Simon
6,209 Points

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
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
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!