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

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Timothy Chew
Timothy Chew
1,182 Points
Posted by Timothy Chew
Timothy Chew
1,182 Points

Unable to get CSS class to work

As far as I can tell, I've copied the code exactly from the video but getting a different result and 'm having trouble getting my CSS class to be recognized.

my html:

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

my css:

nav a.selected, nav a:hover {
  color: #0000FF;
}

The hover effect is working fine, but my portfolio anchor text color isn't showing up as blue. what am I missing?

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

HI, can you paste your whole code? You just pasted only your li. I cant see any nav tag in the HTML.

3 Answers

Timothy Chew
Timothy Chew
1,182 Points
Timothy Chew
Timothy Chew
1,182 Points

Thanks for the quick response. Here is my entire code- https://w.trhou.se/c0avjgw3r7

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

So you want to display the index.html etc.. as blue? if so you need to select li a or just li and set the color to blue.

Timothy Chew
Timothy Chew
1,182 Points
Timothy Chew
Timothy Chew
1,182 Points

Yes, I would like index.html to display as a static blue and the blue hover effect to show when the mouse is over either the "About" or "Contact" pages. You can see this example at 3:36 in the video. The hover effect is working fine with my current code but the a.selected doesn't seem to work.

Even when I remove the a:hover, the following line is still not changing the color of "Portfolio". 

nav a.selected {
  color: #0000FF;
}

I'm guessing something is wrong with my use of CSS classes, but I'm not sure. It seems to me I'm duplicating what I see in the video but not getting the same result.

Jake Nisenboim
Jake Nisenboim
3,374 Points

Alternatively it might actually be an issue with workspaces. I have had similar wierd problems which were resolved by closing workspaces (perhaps even waiting a minute), and loading it back up to click view.

Did you get it working ?

Timothy Chew
Timothy Chew
1,182 Points
Timothy Chew
Timothy Chew
1,182 Points

You were right Jake, it seems the problem was with workspaces. After opening it up this morning, everything is working as expected. Thanks for the suggestion!