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

Jiel Selmanovski
Jiel Selmanovski
5,535 Points
Posted by Jiel Selmanovski
Jiel Selmanovski
5,535 Points

"Selected" class does not change colour to signify what page I am on even though I have checked my code for error. Help?

My Porfolio ul li item does not remain the dark green colour even after applying the correct coding procedure to allow it to do so. What could I have done wrong?

Rich Bagley
Rich Bagley
25,869 Points

Hi,

Can you post your related HTML and CSS please?

Thanks

-Rich

Jiel Selmanovski
Jiel Selmanovski
5,535 Points
Jiel Selmanovski
Jiel Selmanovski
5,535 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jiel Selmanovski | Front End Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jiel Selmanovski</h1>
        <h2>Front End Web Developer</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">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimenting with Colour and Texture</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with Blending Modes in Photoshop</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to Create 80's Style Glows</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips Created using Photoshop Brushes</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating Shapes Using Repetition</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
          <img src="img/twitter-wrap.png" alt="Twitter Logo">
        <a href="https://www.facebook.com/jiel.selmanovski">
          <img src="img/facebook-wrap.png" alt="Facebook Logo">
        </a>
        <p>&copy; 2015 Jiel Selmanovski</p>
      </footer>
    </div>
  </body>
</html>
Jiel Selmanovski
Jiel Selmanovski
5,535 Points
Jiel Selmanovski
Jiel Selmanovski
5,535 Points 
a {
  text-decoration: none;
}

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

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

a {
  color: #83f79a;
}

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

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

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

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

body {
  background-color: #fff;
  color: #999;
}
Rich Bagley
Rich Bagley
25,869 Points

Just formatted your HTML and CSS code posts for easier reading. If you need to do this in future here is a how-to guide.

2 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi,

I've just added your code to a CodePen and based on your code it is working as expected.

This line is using the selected class:

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

This CSS sets the style for that class:

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

I can see that the Portfolio link is currently highlighted in the dark green colour. Is this what you are expecting?

-Rich

Jiel Selmanovski
Jiel Selmanovski
5,535 Points
Jiel Selmanovski
Jiel Selmanovski
5,535 Points

Hi Rich,

Thanks for your help. That is what I am expecting but it is not showing up that way in my workspaces even though I have written my code the way it should be written - with organized syntax (the HTML at least) and CSS. I suppose then it is the web application and not my work that is driving my paranoid.

I certainly appreciate your help. Thank you for your advice!

Rich Bagley
Rich Bagley
25,869 Points

No problem :)

salvatore saccoccio
PLUS
salvatore saccoccio
Courses Plus Student 591 Points
salvatore saccoccio
salvatore saccoccio
Courses Plus Student 591 Points

i had the same problem. using google chrome if you delete the space between the "nav a:" and "hover" in your CSS it will fix the problem

FROM - "nav a.selected, nav a: hover" TO - "nav a.selected, nav a:hover"