Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

(background) color problems with stage 4 'use ID selectors' CSS

Hello everyone I have a problem seeing with adding (background) colors in my html code using CSS. I first ran into this problem when I tried to change the color of my footer note, it didn't work even though i checked my code twice but I didn't see a mistake. Next up I tried to change the background color of my website like they do in the video 'use ID selectors' stage 4 of building websites. I hope you guys can figure out the problem! Here is my code:

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
  <title>My name 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>My name</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="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>Trying to create an 80's style 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="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt"">
          <p>Creating shapes using repetition</p>
        </a>
        </li>
      </ul>
    </section>
   <footer>
      <a href=facebook profile><img src="img/facebook-wrap.png" alt="Facebook logo">
    <p>&copy; 2014 My name</p>
     </footer>  
  </body>
</html>
body {
  background-color: orange;
}

2 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points

Is your CSS file called 'main.css' in a folder called 'css'?

Also, your Facebook link in your footer needs a closing tag and the href needs a link to your Facebook profile:

<a href="http://www.facebook.com/username"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>

Your alt attributes in your unordered list also need an equals sign before the double quotes.

Sreng Hong
Sreng Hong
15,083 Points

I saw these errors too, and I hope it's the reason.

Yeah my 'main.css' is in a folder called 'css'. I corrected the other mistakes, but it still doesn't work :( anybody else who can help me?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>Luca dDe Vita 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>Luca De Vita</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="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>Trying to create an 80's style 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="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition</p>
        </a>
        </li>
      </ul>
    </section>
  <footer>
      <a href="https://facebook.com/luca.devita.75"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
    <p>&copy; 2014 Luca De Vita</p>
    </footer>  
  </body>
</html>

""

hi luca,

please don´t Forget after making changes toyour code, to refresh your browser in WWW-adress-field.

  1. preview
  2. refresh ---- then changes get active Status ---- :) simple skips can have effect