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 Robert Shaw
Robert Shaw
1,567 Points

In Use ID Selectors, I can not get my background color to change to Orange using the style sheet.

I can't get index.html to recognize the main.css style sheet when set background to Orange. Help would be appreicated.

Here is the main.css:

body { background-color: orange; }

and the index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Robert Shaw | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Robert Shaw</h1> <h2>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="imag/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>Trying to create an 80's syle of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="imag/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetitione.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="imp/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="imp/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Robert Shaw.</p> </footer> </body> </html>

Robert Shaw
Robert Shaw
1,567 Points

index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Robert Shaw | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Robert Shaw</h1>
        <h2>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>
    <div id="wrapper">
        <section>
          <ul>
            <li>
              <a href="imag/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>Trying to create an 80's syle of glows.</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>Drips created using Photoshop brushes.</p>
              </a>
            </li>
            <li>
              <a href="imag/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>Creating shapes using repetitione.</p>
              </a>
            </li>
          </ul>
        </section>
        <footer>
          <a href="http://twitter.com/nickrp"><img src="imp/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href="http://facebook.com/nickpettit"><img src="imp/facebook-wrap.png" alt="Facebook Logo"></a>
          <p>&copy; 2014 Robert Shaw.</p>
        </footer>
      </div>
  </body>
</html>

main.css

body  {
  background-color: orange;
}

12 Answers

Charles Gray
Charles Gray
19,470 Points

your index.html is in the main folder as well? along with your img folder? if it is check your spelling and make sure all your css code is contained with open and closing curly braces {}

Robert Shaw
Robert Shaw
1,567 Points

Thank you. It was the case sensitivity. I had css folder name in all caps and referenced it in lower case in the index.html. Didn't realize it was case sensitive. Going back and checking spelling made me realize that. Newbie mistake, I guess. Thank you for your help.

ronanmcguire
ronanmcguire
4,497 Points
ronanmcguire
ronanmcguire
4,497 Points

I had this issue as well. For me it was case sensitivity, which I wasn't aware of. Good to know for the future!

Adam Tatusko
Adam Tatusko
16,589 Points
Adam Tatusko
Adam Tatusko
16,589 Points

Please repost the code in your index.html file using the Markdown Cheatsheet example for posting HTML code.

Email campaigns friends word of mouth referals Personal blog Facebook
Email campaigns friends word of mouth referals Personal blog Facebook
31 Points
Email campaigns friends word of mouth referals Personal blog Facebook
Email campaigns friends word of mouth referals Personal blog Facebook
31 Points

I am having the same problem, I cant seem to figure it out.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

<a href="imag/numbers-01.jpg">? do you have two img folders? makes sure both of you css files are in the css folder. All your folders should be in the same location otherwise you have to back in and out of the correct folders.

Robert Shaw
Robert Shaw
1,567 Points

Thank you. I had a code typo in two lines with "imag". I fixed those, but same result. I also checked and I only have one img folder in workspace. Both css files are in the css folder. They both disappear when I collapse the folder, so appear to be in there.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

<link rel="stylesheet" href="css/main.css"> try adding <link rel="stylesheet" type="text/css" href="css/main.css">

Email campaigns friends word of mouth referals Personal blog Facebook
Email campaigns friends word of mouth referals Personal blog Facebook
31 Points
Email campaigns friends word of mouth referals Personal blog Facebook
Email campaigns friends word of mouth referals Personal blog Facebook
31 Points

What do you mean by adding?

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

sounds like your css files are contained in another file

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

it should be main folder (in your main folder should be an index.html file, a img folder and a css folder with css files inside that folder)

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

css/style.css means css is in it's own folder within the main folder

Robert Shaw
Robert Shaw
1,567 Points

I have main folder and a css folder with main.css and normalize.css in it and then an img folder with files and the index.html file under the main folder.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

ok, that sounds right, make sure you drag the css fold into the main folder

Robert Shaw
Robert Shaw
1,567 Points

Thank you. I dragged in back into the main to make sure. Appears to be under main. Still no change.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

add try using.. body { background: orange; }