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

Posted by Matt Phillips
Matt Phillips
505 Points

My background will not change color after linking the main.css file with the index.html.

I'm sure I've coded everything the same and I linked it correctly. However, i did use my own pictures when designing the site, so maybe the absolute instead of realitve attribute did it? I'm aware the file name is case sensitive. Thank's for any help.

HERE'S MY MAIN.CSS PAGE:

body {
  background-color: orange;
}

HERE'S MY INDEX.HTML PAGE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matt Phillips | Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Matt Phillips</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="https://cdn.pixabay.com/photo/2017/05/17/03/06/misty-2319710__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/05/17/03/06/misty-2319710__340.jpg" alt="">
            <p>Winter's Wasteland</p>
          </a>
        </li>
        <li>
          <a href="https://cdn.pixabay.com/photo/2017/05/17/16/27/animal-2321292__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/05/17/16/27/animal-2321292__340.jpg" alt="">
            <p>Winter's Undercover Druid</p>
          </a>
        </li>
        <li>
          <a href="https://cdn.pixabay.com/photo/2017/04/20/19/32/spring-2246731__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/04/20/19/32/spring-2246731__340.jpg" alt="">
            <p>Spring's Storm</p>
          </a>
        </li>
        <li>
          <a href="https://cdn.pixabay.com/photo/2017/05/16/17/21/chipmunk-2318395__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/05/16/17/21/chipmunk-2318395__340.jpg" alt="">
            <p>The cutest thing ever</p>
          </a>
        </li>
        <li>
          <a href="https://cdn.pixabay.com/photo/2017/04/25/15/35/forest-2259973__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/04/25/15/35/forest-2259973__340.jpg" alt="">
            <p>Do you see the elves?</p>
          </a>
        </li>
        <li>
          <a href="https://cdn.pixabay.com/photo/2017/05/03/15/55/death-2281401__340.jpg">
            <img src="https://cdn.pixabay.com/photo/2017/05/03/15/55/death-2281401__340.jpg" alt="">
            <p>Death</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="https://twitter.com/">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCuINYII_05qjfMXfOy-gvXkyDj3soRUJplsC09vDiqF7zRByD" alt="Twitter">
      </a>
      <a href="https://www.facebook.com/">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASsAAACpCAMAAABEdevhAAAAbFBMVEX///87V5319vkgRZXN1eXDyuA5VZxCXaHi5/BHYqOVosgyUZvV2+k1U5t5i7r6+/3c4e1XbqrJ0OJqfrLu8PZPaKY+Wp+hrc2Bkb2sttG1v9iGlsByhrfp7PNfda3Q1+aOncRme7ErTJi8xdxvn+TSAAAEJklEQVR4nO3dbXOiMBiFYbH1QY2RN0FaX4r2///HVTvdKR0STxxW2OTcn/zgVrhGGJYkMpn0UZLvF9FIq8o6T3rZy15K61hkaBNjouM6HZrouzxT45W6JjrLh0b6Ki310Bh30+UovlnJfvxUF6xiDOesmR73AfiVqBEchUmhhnaAUsuhpSaT6cjP69/pbPiDcPoytAKWqOnQVP+NVfRCKzha4dEKj1Z4tMKjFR6t8GiFRys8WuHRCo9WeLTCoxVeoFYiWit97fpKq8trubyMrANvIVpddKJFdtrXza1dvV7vi9MxKxdxJcp88z80KxH1Ujbvr/NNa8eTZDrdHObpR/65rExYYVmJjo7NnXG+dEGrS2pRzw73NmdFqyjSUZ0De0urSFQ5gzaHVlo1G2xzgrfS5Ts6EBq6lS7xuQiBW+mFw7SNsK2kcpnhErSVRJ8umxOylYjbXKCQrfTp7qV6q4CtRGOXoH8L2OrcOG5OuFYSu04fDtdKN66bE65VtXLdnGCtdOG8f8FaydZ5c4K1ip0PwWCt9Ml9Snqo99sfWeqQGtcx+m2l791g2OTbpl63KqowreK59ZNXuzK6DT23Mv41r63kaNu76Ta2DDKHZqXWlo9Ndq5L8fy2sp3a386uy8u8tjq/mT91brw0MOa3leXm8dZ9gafXVsp8m2/6wBprn63Ecnk1z2j1MxGzlfl/fea8topejR+a06qVzWoWu/89WuHRCo9WeLTCoxUerfBohUcrPFrh0QqPVni0wqMVHq3waIXnjZV0ZbP6Pdx8b9TZGyuJF119GD80Lzv/wSXvx+j157wr885NO99/KTePWfhhJdp9Tpqh3Dxu6ImV6s3qjVZwS1rB1bRCSwrvz+29WW0sY/e0amebakSrdivjzFpa/S63TIykVbt3y1QjWrWzTfejVatkRyt4W/a0QjscLTewaNUqLWmF9mF7WB2tWs0ifq/QbJdXtGpnXU1Bq1YNreBsl1e0apXYLq9o1epgXU3hh1XU05jXyrpU1RMrqZddmZeGp53vX1sXFXpidf2d8Y4s8xmqrvfb1zP5YtUNaJv7wXVeP+OcIjxa4dEKj1Z4tMKjFR6t8GiFRys8WuHRCo9WeLTCoxUerfBohUcrPFrh0QqPVni0wqMVHq3waIVHKzxa4dEKj1Z4tMKjFR6t8GiFRys8WuHRCo9WeLTCoxUerfBohUcrPFrh0QqPVni0wqMVHq3waIVHKzxa4dEKj1Z4tMLz0ercP9Otnq1EjcDK/ZcSwJ3r2SpLnqhiaO3+WGps5/q1Ussnmpia3fltkkfr10qU+cnazyt54Nnw0N71aqWLERyC11/1/CdYvVrpMn2iiKU8U//gMOzRSnQ2hiPwVlpXyvp8qCGtRFRVj+RbdS1ZbYsHLg+fYrUotqt+zlV/AOSQiQe1RNnzAAAAAElFTkSuQmCC" alt="Facebook">
      </a>
      <p>&copy; 2014 Matt Phillips.</p>
    </footer>
  </body>
</html>
Matt Phillips
Matt Phillips
505 Points

Edit: I just changed out all the photos for the exact ones used in the tutorial, so using different images doesn't seem to be the problem

4 Answers

Rob Allessi
Rob Allessi
8,600 Points
Rob Allessi
Rob Allessi
8,600 Points

Hi Matt Phillips

The issue was that your file path was not pointing to the proper location. Case sensitivity matters and you were targeting "css" as your folder name and not "CSS" which is what you named your folder.

Take a look at your workspace now, you should see that your background now matches that of what you indicated within your main.css.

Hope this helps!

Matt Phillips
Matt Phillips
505 Points

I swear i thought all my css files were in lowercase and they all matched. I think it had to do with the actual file uploaded. When i deleted the "main.css" and uploaded it again it worked; i think because i just made a file with the name "main.css" instead of bribing in the file. Either way I literally just resolved it. Thank you for the help!

Kian Gobryas
PLUS
Kian Gobryas
Courses Plus Student 2,297 Points
Kian Gobryas
Kian Gobryas
Courses Plus Student 2,297 Points

I had the same issue, renamed the folder from css to CSS and it worked, Thank you.

Daouda Maiga
Daouda Maiga
3,220 Points
Daouda Maiga
Daouda Maiga
3,220 Points

You may need to change your browser to google chrome. It might work.

Christine Le
Christine Le
1,367 Points
Christine Le
Christine Le
1,367 Points

Thanks, I had the same problem. I changed the file name from upper case to lower case and it works.