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 Elisabeth Gibson
Elisabeth Gibson
303 Points

My website isn't changing the background color, and my code matches the video's instructions. What went wrong?

I created the main.css file and moved it into the CSS folder, then changed my background color as the video instructed and nothing happened. I copied the code from the normalize.css line in my index.html file, and while everything matches the video, nothing changes when I preview my website.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you please post your code or post a WorkSpace SnapShot.

How to post Code

Elisabeth Gibson
Elisabeth Gibson
303 Points

This is what my main.css workspace has: ```a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto; }

In the index.html workspace, I have this:
```<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Elise Gibson | Baker</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

3 Answers

Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Well, I'm sure your code doesn't match the video. haha, a lot of people make simple mistakes and it's really common, even me make them sometimes. I'm not sure how familiar with CSS you'are but even if don't know much i would you recommend to watch this video: https://teamtreehouse.com/library/css-basics/fundamental-concepts/the-cascade-specificity-and-source-order

is part of a course but will help you out.

Basically the video explains the specificity and source order of the css.

So let's say you have a html like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1 class="heading" id="heading" style="background-color:tomato;">Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
  </body>
</html>

and a css like this:

#heading {

    background-color: blue;
    background-color: red;

}



.heading {

    background-color: green;



}

The question is what color will be apllied to the heading 1 - h1 blue, red, green or tomato?

So basically the style inside the body element tag in html have a higher specificity then class, id, and element selectors so if you have something inside your body tag styling the color that one will be apllied to your page doesn't matter if you have a external css file or internal saying to change the color. The best way is to remove the style from the body tag and add a class or id to it.

But now comes the part what is the specificity of the class or id? Well i will tell you the ID is more important after the style tag. So if you don't have any style in your body tag and apply only a id it will take the color of the id even if you have a class saying to apply another color to it.

So classes is what you should go with if there is no background color change with style tag or id.

Now second part.

Source order:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1 class="heading" id="heading">Nick Pettit</h1>  <!--style removed, just class and id left inside.-->
        <h2>Designer</h2>
      </a>
  </body>
</html>

By now you should see the same html code but without the style tag. So we now have a h1 like this:

<h1 class="heading" id="heading">Nick Pettit</h1>

now the css:

#heading {

    background-color: blue;
    background-color: red;

}

.heading {

    background-color: green;
}

Now the source order is the last one will be applied so. if you have on the id #heading two background color properties the first one will be ignored and the last one will be applied so it will be red and not blue same order goes for the class. If we had a new background color on the heading class and no ID background color it would take the last color and apply it to your element tag.

#heading {

    padding: 40px 30px;
       font-size: 140px;


}

.heading {

    background-color: green;
        background-color: orange;
        background-color: red;
        background-color: purple;
        background: blue;
}

So in the end all this line wouldn't be applied just the last one with the color blue.

Well I hope i gave you a idea on how this works but I really recommend watching the video link that i sent is only 2:32 minutes. Worth watching. If you have any questions let me know.

So now the ID will be more important then the class so it will take the color that the id heading it's saying to apply to apply.

Elisabeth Gibson
Elisabeth Gibson
303 Points

The video wasn't that helpful, but your feedback was. When I applied the code in my html I saw my background change. I still don't see any difference if I alter the main.css file.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

First, a comment on quoting code. The tick marks have to be double spaced below the text of your post and followed by the language. The actual code goes on the next line after that. You need separate quotes for each language.

With respect to the code entered, you have done nothing in the html other than give it the opening tag. You need a head that will incorporate the css file and a body with code to display. Each section needs to be closed. So it will look something like this:

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Something to display here.</h1>
</body>
</html>

The css link has to be to the path from the location of your html file to the location of the css file. Then your css:

html {
  background-color: blue;
}

h1 {
  color: yellow;
}

In your code, you did not define the background color in the css and you do not have any html elements to provide space for the css.

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Well maybe your css code was saying color instead of background-color. Sometimes i make this confusing and i think everybody does sometimes.

color is for the font/text. background-color or background is for the background color of the page or specified element.