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 Write Hexadecimal Colors

Sharifah Aurelien
Sharifah Aurelien
424 Points
Posted by Sharifah Aurelien
Sharifah Aurelien
424 Points

Challenge Task 4 of 4 Add a hover state for navigation links that changes the text color to the value #32673f.

Have I missed something?

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

h1, h2  {
  color: #fff;
}

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

2 Answers

Owen Clark
Owen Clark
24,151 Points
Owen Clark
Owen Clark
24,151 Points

Hi Sharifah,

Looking at the challenge question, you may not need the 'a.selected' class - as it seems to request just a hover state of all the links:

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

h1, h2  {
  color: #fff;
}

p {
  color: #000;
}
nav a:hover {
  color: #32673f;
}
          ```
Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

the tests are very specific, so if you do some extra steps, you may get a wrong answer returned.

Owen Clark
Owen Clark
24,151 Points
Owen Clark
Owen Clark
24,151 Points

As Garrett says, there may be some extra steps required from the previous challenges, for example if you have the selector 'nav a.selected' in the code from a previous step, you may just have to separate the selectors into their own rules:

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

h1, h2  {
  color: #fff;
}

p {
  color: #000;
}

nav a.selected {
  /*from previous steps*/
}

nav a:hover {
  color: #32673f;
} ```