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 Luca De Vita
Luca De Vita
327 Points

(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
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
Sreng Hong
Sreng Hong
15,083 Points

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

Luca De Vita
Luca De Vita
327 Points

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>

""
Thomas Meiller
Thomas Meiller
457 Points
Thomas Meiller
Thomas Meiller
457 Points

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