Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Add a New Page

How to Make a Website; Add a New Page. 4 minutes into the video

So at this point, Nick shows how hovering over the links for Portfolio, About and Contact, should change the color, but mine only Contact changes, the others stay white.

I keep checking over this section in my Index.html- example: <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul>

And also these sections of my main.css page - ex.:

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

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

But I'm just not catching where my error is. Can anyone help?

Thx! :-)

Possibly in your HTML you haven't changed the selected link when you copy-pasted your code for the other pages? comment your full code and I'll look (:

4 Answers

Francesca Canu
Francesca Canu
1,695 Points

hello Mary, yes, the css section marked "selected nav links" should come after the "nav link" (in the last line). your problem is here, whenever you define nav a, you are also overwriting all the pseudo classes :hover, :visited, :active etc. try and let me know if it works :)

Wow, that little error messed everything up- thank you so much for your help!!
Shows how green I am that it wasn't obvious to me just looking at the file I guess! :-)

Erick Kusnadi
Erick Kusnadi
21,615 Points

It looks like in the html, all of the <a> links have the "selected" class.

'''html <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> '''

because of that this style below gets applied to all of the links, so when you hover over a link, they stay the same color, because the a.selected and a:hover, have the same color so it looks like it doesn't change

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

OH!! LOL, Erick, I'm so sorry, I was fooling around with the file, trying different things to see if I could fix it, and one of the things that I tried was adding [class="selected"] to each link to see if that helped (obviously not!).

I just reverted back to how it was in the file. I just tested it again in workplace, and Contact is the only one that turns green when I put the mouse over it, but the other 2 remain white. Here's the whole index.html - anything jump out at you?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mary Nowak | Designer</title>
<link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mary Nowak</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"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color 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 and 80s style of 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>
     <a href="http://twitter.com/MaryXNowak"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
   <p>&copy; 2015 Mary Nowak.</p> 
   </footer>
 </div>
 </body>

</html>

Francesca Canu
Francesca Canu
1,695 Points

it is because of the cascade. the order matters in css. :) by defining a again after a:hover, you are overwriting the value. :)

the two lines should be in the following order: nav a { color: #fff; } nav a.selected, nav a:hover { color: #32673f; }

1 defines all a in a nav 2 defines the a inside of a nav with class .selected and the a with pseudoclass :hover

Hi Francesca, that makes total sense, and it's my fault for isolating those two lines instead of just including the whole file! :-) Here is how the whole file actually appears - is there something wrong about the order?

Thank you!! Mary

/**************************** GENERAL *****************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/**************************** HEADING *****************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align:center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height:0.8em; }

h2 { font-size:0.75em; margin: -5px 0 0; font-weight: normal; }

/**************************** NAVIGATION *****************************/

nav { text-align: center; padding: 10px 0; margin: 20px; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display:inline-block; }

nav a { font-weight:800; padding: 15px 10px; }

/**************************** FOOTER *****************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: "ccc;
}

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/**************************** PAGE: PORTFOLIO *****************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 10; padding: 5%; font-size: 0.75em; color: #bcd3c7;

}

/**************************** COLORS *****************************/

/* site body */

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

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

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

/* logo text */

h1, h2 { color: #fff; }

/* nav background on mobile */ nav { background: #599a68; }

/* links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

Francesca Canu
Francesca Canu
1,695 Points

don't worry Mary it is a very common mistake. whenever something like this happens, always mind the cascade. cheers