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 Treehouse Club: CSS My First Web Page Introduction to My First Web Page

Peter Bresnen
Peter Bresnen
720 Points
Posted by Peter Bresnen
Peter Bresnen
720 Points

Style sheet won't work

I've simply just changed the top bar colour to Red, but nothing happens. This is how it looks on the sheet:

html { border-top: 20px solid #red;

Also changing the border as shown in the video doesn't appear to work

Henry Yoshida
Henry Yoshida
2,861 Points
Henry Yoshida
Henry Yoshida
2,861 Points

Did you put a closing curly brace "}"?

Also, if you use the color "red" you can't have the # tag. That only goes before Hex color codes.

6 Answers

Steven Treadway
Steven Treadway
10,037 Points
Steven Treadway
Steven Treadway
10,037 Points

If you just want to change the color to red than it should look like this: 

html {
  border-top: 20px solid red;
}

You don't need the hashtag symbol when using built in css colors. Only when using hexadecimal values.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Adjusting the CSS should change the appearance as soon as you reload the page, if the stylesheet is correctly linked to the html file. Do you have this line in the <head> section of your html file? (And is your CSS file named "style.css"?)

<link href="style.css" rel="stylesheet">
Peter Bresnen
Peter Bresnen
720 Points
Peter Bresnen
Peter Bresnen
720 Points

<head> <meta charset="utf-8"> <title>All About Pete's Page</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet"> </head>

The <head> section looks like this. And yes my CSS file is named style.css.

Henry Yoshida
Henry Yoshida
2,861 Points
Henry Yoshida
Henry Yoshida
2,861 Points

Did you put a closing curly brace "}"?

Also, if you use the color "red" you can't have the # tag. That only goes before Hex color codes.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

red doesn't need a hashtag. Only hex colors do.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Grrr. '#' is not a hashtag. An identifier that begins with one might be, but RGB color values are also not hashtags.

Peter Bresnen
Peter Bresnen
720 Points
Peter Bresnen
Peter Bresnen
720 Points

Thanks for the suggestions guys! My CSS sheet now looks like this under top bar colour:

html { border-top: 20px solid red; }

But still the changes don't appear when I click preview. I have also tried refreshing the page once it's opened. The index changes are made, but not the CSS changes. Any other ideas?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

If your "CSS sheet" is a separate file, are you sure you are referencing it correctly from the html file?

Peter Bresnen
Peter Bresnen
720 Points
Peter Bresnen
Peter Bresnen
720 Points

/***********************************************

Top bar color

***********************************************/

html {

border-top: 20px solid red;

}

This is how the CSS sheet looks when first opened. All I've done is change the hex colour to red. I was wondering whether the CSS sheet is linked to the HTML file, but it in the video, Joy just makes her adjustments to the CSS sheet and the changes appear in the preview.