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 CSS Foundations Getting Started with CSS Adding CSS to a Page

Posted by benaiahvarner
benaiahvarner
1,886 Points

my CSS is not working

I don't know what is wrong either my link or my CSS but I cant find any issues. Here are both my CSS and my HTML.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
   <title>Benaiah Varner</title>
   <link rel="stylesheet" href="css/style.css" type="text/css">
 </head>
  <body>
    <h1 id="h1">CSS properties.</h1>
    <p>Benaiah Varner
10/23/14<br>
The Dome and the Wise

    Once, in the open plains of Montana, there live a family of grasshoppers, and a family of ants. Although grasshoppers were very playful and joyful, they did not like work. The grasshoppers played all day long refusing to gather food for the winter. Quickly, the wise ants
started working so they would have food for the winter.<br>

        “The grasshoppers are going to starve if they don’t stop playing soon!” one of the ants murmured to his father.

“Winter is far off we don’t have to work yet” the dome grasshoppers demanded.<br>
But before they knew it winter brought the cold, frost bitten air and the freezing frost but the poor grasshoppers had no food at all.

“Please lend us some food for the winter, we will starve if you don’t
      </p>
      <h3>Lorem ipsum dolor sit amet consectetuer</h3>
<ul id="ul">
  <li>CSS properties</li>
  <li>CSS values</li>
  <li>CSS declarations</li>
</ul>
  </body>
</html>

#h1 {
  padding-bottom: 10px;
  color: blue;
  border-bottom: 2px dotted;
}

#ul {
  color: white;;
  background-color: blue;;
}
Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Firstly, what are you trying to accomplish?

Secondly, why do you have 2 semi-colons after your CSS statements under your UL selector?

Thirdly, why are you calling your IDs the same name as the HTML tags?

Again, what exactly is your question?

Guilherme Donin
Guilherme Donin
3,745 Points
Guilherme Donin
Guilherme Donin
3,745 Points

Hey benaiahvarner,

Your code look fine. I tried here on my computer and is working. Just make sure that you have the proper folder locations. When you defined -- href="css/style.css" -- you need to make sure you have your html file inside the same folder as the css folder and a file called style.css inside this folder.

Another observation is that in your CSS code on:

ul {

color: white;; background-color: blue;; }

would be:

ul {

color: white; background-color: blue; }

Hope I could help.

Good Luck!

2 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,708 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,708 Points

Your CSS ID selectors should not be prefaced with a hashtag ("#"); this is the main reason your CSS is failing. There is also no need to add an ID to Additionally, only one semicolon should terminate each property.

Updated code is as follows:

h1 {
  padding-bottom: 10px;
  color: blue;
  border-bottom: 2px dotted;
}

ul {
  color: white;
  background-color: blue;

Update: As Lush pointed out, it's not the best practice to add an ID or class of "element name" to target via CSS. You should update your HTML with these removed.

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Well he named the IDs of those selectors with their actual selector name, which is why he used the # before them.

<h1 id ="h1"></h1>

You got confused, and so did I at first glance, because it is, well, very confusing... and not best practice...

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,708 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,708 Points

Doh! I see that now. Definitely not best practice and they should immediately remove the ID naming from the HTML structure.

Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points
Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points

[alt text](C:\Users\Nuttdguy\Desktop "none")

I agree with Donin, verify you have the correct path to your styles.css file. If you unzipped all the treehouse provided folders into Sublime, then your href path may be:

href="../start/css/styles.css".

They don't seem to mention this in the video, but if your files are nested within multiple top directories, then the "../" notation is required to get to find that folder.

Another way to verify that your file is found when loading in the web-browser is to use google's dev-tools by pressing F12. Then clicking on the styles.css link. If its correct, you should see a correct copy and the exact path within the browsers address bar.

Hope that helps! Phou