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 Customizing Colors and Fonts Use Classes in CSS

My coding does not work, nothing changes on the links. Here is my coding.

logo {text-align: center; margin:0;}

a {color: #6ab47b;}

header { background: #6ab47b; border-color:#599a68;}

h1, h2 { color: #fff;}

nav a {background: #599a68;} nav a, nav a.visited {color: #fff;} nav a.selected , nav a.hover {color: #32673f;}

body {background-color: #fff; color: #999;}

3 Answers

A few things

1) Did you link this css to your html with the link tag

2) In css classes are preceded with a dot and id's with a # symbol

example of a class here would be .selected

3) Another when selecting pseudo classes like hover, visited etc. we dont use a dot but a colon : instead ...

for e.g. you have written nav a, nav a.visited ... this is incorrect, same goes for nav a.hover

it should have been nav a, nav a:visited ... and nav a:hover ... this will work fine

4) I would suggest to indent your css code properly. I know its a boring task but it helps you visualize mistakes quicker

I assume logo is an id . So it should be

#logo {
    text-align: center; 
    margin:0;
}

nav a {
    background: #599a68;
} 

nav a, nav a:visited {
   color: #fff;
} 

nav a.selected , nav a:hover {
     color: #32673f;
}

Hope this helps.

If you do have doubts ask again

Thank you, Thank you!

Ron McCranie
Ron McCranie
7,837 Points

You probably need to use pseudo-classes (:) instead of classes a:link, a:visited, a:hover, a:active

There is no 'selected' pseudo class so you will use that as a standard class, but make sure it's in your HTML that way.

A link to read about pseudo classes: http://www.w3schools.com/css/css_pseudo_classes.asp

Thank you!!! Turns out I had my css incorrectly linked but the link helped for future references!

Joseph Greevy
Joseph Greevy
4,990 Points

a few things logo is not a semantic tag the code should be

       #logo  {
      text-align: center;
      margin:0;
      //or

. logo depending whether it is class or not }

and it should be css

 nav a:hover{}
 //and
 nav a:selected{}

Thank you!!