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

Jared Syrenne
Jared Syrenne
948 Points
Posted by Jared Syrenne
Jared Syrenne
948 Points

Unable to apply CSS

Unable to get background color to change

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title> Jared Syrenne | Designer</title>
  <link rel="stylesheet" href"css/normalize.css">
  <link rel="stylesheet" href"css/main.css">
 </head>
 <body>
   <header>
     <a href="index.html">
      <h1>Jared Syrenne</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>
    <nav>
      <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 a Glow</p>
          </a>
        </li>
        <li>
          <a href= "Img/numbers-09.jpg">
            <img src= "Img/numbers-09.jpg" alt="">
            <p>Photoshop Brushes</p>
          </a>
        </li>
        <li>
          <a href= "Img/numbers-12.jpg">
            <img src= "Img/numbers-12.jpg" alt="">
            <p>Blending</p>
          </a>
        </li>
      </ul> 
    </nav>
   </section>
   <footer>
     <a href="https://twitter.com/jsyrenne"><img src="Img/twitter-wrap.png" alt"Twitter Logo"></a>
     <a href="https://www.facebook.com/jared.syrenne"><img src="Img/facebook-wrap.png" alt"Facebook Logo"></a>
     <p>&copy;2015 Jared Syrenne</p>
   </footer>
 </body>
</html>

and

body {
  background-color: orange;
}
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Can you edit your post and surround your code with tags like this:

```html

[your html here]

```

```css

[your css here]

```

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I've fixed the code formatting so the head section can be seen now.

7 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Edit

OK, now that I can see your head section, it seems you did link to a stylesheet! That's good :).

I copied and pasted your code directly into a codepen, and it's working just fine. The problem is likely that your folder structure is such that your link isn't pointing to your stylesheet. Try adding a slash in front of your href attributes:

  <link rel="stylesheet" href"/css/normalize.css">
  <link rel="stylesheet" href"/css/main.css">

This makes the links "root-relative urls," meaning their location is relative to the root of your project/homepage.

Let us know if this works!

Hi Jared,

The problem is that you aren't actually linking to any CSS file. In your html, you need to tell the browser where to find your CSS stylesheet. That's typically done in the head element:

  <head>
    <link rel="stylesheet" href="/css/main.css">
  </head>

Note the "/css/main.css" might need to be slightly different, depending on where the file is in your folder structure.

There should be other stuff in your head, so I would go back and look at earlier videos to make sure you're following along with everything!

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

Lol Greg, I totally overlooked that thinking it just wasn't posted. Thumbs up!

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

A few things... make sure your spacing in your HTML is correct. In your list items, make sure there is no space after a href =, there should not be a space. Second, in your hrefs at the bottom, there needs to be an = sign after "alt". Lastly... do you have a body tag? I don't see one in the screenshot. If you are trying to apply CSS to the body but don't have one, that would be a BIG reason.

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

Also, < ! DOCTYPE html >should be all caps

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ariel,

You've caught the problem with the missing equal signs. There's 2 more missing equal signs in the head section for the href attributes. I know you couldn't see that section but I think you would have caught it.

Also, I wanted to mention that spaces are allowed around equal signs although it's preferable not to have the spaces because it needlessly adds to the size of your html file.

And doctype is ok in lowercase. I'm not sure which one you would more commonly see.

Heather B.
Heather B.
4,180 Points
Heather B.
Heather B.
4,180 Points

I've just been having this problem too - the CSS from both normlize and main weren't applying.

The problem was that the folder I'd created containing both of those files called "CSS" was capitalised, and the code referring to that folder in index.html was not. Easy fix, rename the folder "css".

Hopefully that's helpful for someone out there!

Melissa Brown
Melissa Brown
1,101 Points

Thank you, Heather, for posting this response.

Your tip was helpful to me, because I made the same mistake you did. But I didn't even think to look outside the coding for my error until I read your tip.

Sheila Coliflores
Sheila Coliflores
288 Points

Thank you. This fixed my problem. :)

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

Look at img src. Still have an extra space after the = signs :)

Jared Syrenne
Jared Syrenne
948 Points
Jared Syrenne
Jared Syrenne
948 Points

Thanks :) I corrected those line but am still unable to get the css to apply :(

Jared Syrenne
Jared Syrenne
948 Points
Jared Syrenne
Jared Syrenne
948 Points 
[<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title> Jared Syrenne | Designer</title>
  <link rel="stylesheet" href"css/normalize.css">
  <link rel="stylesheet" href"css/main.css">
 </head>
 <body>
   <header>
     <a href="index.html">
      <h1>Jared Syrenne</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>
    <nav>
      <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 a Glow</p>
          </a>
        </li>
        <li>
          <a href= "Img/numbers-09.jpg">
            <img src= "Img/numbers-09.jpg" alt="">
            <p>Photoshop Brushes</p>
          </a>
        </li>
        <li>
          <a href="Img/numbers-12.jpg">
            <img src="Img/numbers-12.jpg" alt="">
            <p>Blending</p>
          </a>
        </li>
      </ul> 
    </nav>
   </section>
   <footer>
     <a href="https://twitter.com/jsyrenne"><img src="Img/twitter-wrap.png" alt"Twitter Logo"></a>
     <a href="https://www.facebook.com/jared.syrenne"><img src="Img/facebook-wrap.png" alt"Facebook Logo"></a>
     <p>&copy;2015 Jared Syrenne</p>
   </footer>
 </body>
</html>
]

I believe I made the corrections @[Ariel Aronica](https://teamtreehouse.com/arielaronica)
Jared Syrenne
Jared Syrenne
948 Points
Jared Syrenne
Jared Syrenne
948 Points

hmmm I cant get the first part of my html to post :( <link rel="stylesheet" href"css/normalize.css"> <link rel="stylesheet" href"css/main.css">

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

Here are some edits. I still do not see a < body > tag in your HTML though

''' html <!DOCTYPE html>

Jared Syrenne | Designer

 <a href="index.html">
  <h1>Jared Syrenne</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>


<nav>
  <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 a Glow</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Photoshop Brushes</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Blending</p>
      </a>
    </li>
  </ul> 
</nav>


 <a href="https://twitter.com/jsyrenne"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
 <a href="https://www.facebook.com/jared.syrenne"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
 <p>&copy;2015 Jared Syrenne</p>

'''