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

Posted by Andrew Mills
Andrew Mills
6,073 Points

selected portfolio

I'm curious, I typed both the html and css exactly like the class example however portfolio is only dark green when hovered over. Earlier I clicked on the portfolio link, will this have any bearing on it's color?

6 Answers

Ilias Loukakis
Ilias Loukakis
20,489 Points
Ilias Loukakis
Ilias Loukakis
20,489 Points

make sure you include the pseudo-class nav a.selected WITH nav a:hover together with the same color for instance:

nav a.selected, nav a:hover { color: example; }

also make sure that in html you have the class="selected" on the appropriate list element of the navigation, if everything is correct it should work normally

Hope that helps

Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points

here are examples of my css and html

logo {

text-align: center; margin 0; }

a{ color: #6ab47b; }

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

h1, h2 { color: #fff; }

nav { background: #599a68; }

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

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

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

HTML <body> <header> <a href="index.html" id="logo"> <h1>Andrew Mills</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper">

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Andrew,

Each link should turn green when hovered over. The Portfolio link is green because it was visited (it pointed to index.html). The other links don't stay green when clicked on because they point to files that don't exist, therefore they are not visited as far as the browser is concerned. Hope this clears things up.

Jeff

nav a.selected, nav a:hover {
  color: #32673f;
}
Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points

<li><a href="index.html" class="selected">Portfolio</a></li>

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

still no dice, bizzare

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Not so bizarre, check your spelling. Your mistake(s) should even be apparent in these text fields that you type in the forum. Look for the squiggly red underlines.

Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points

ah! thank you Jeff (egg on my face)