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

Jonthue Michel
Jonthue Michel
1,462 Points

Hoover & white color text on nav not working!!!

Here is my CSS

a {
text-decoration:none;
}
/* text-decoration mostly deals with underlines :none turns off the browser default to underline hyperlinks */
/* one of the best ways to test the file link is to use body {background-color:whatever;} */

#wrapper {
  max-width: 949px;
  margin: 0 auto;
  padding: 9 5%;

}

#logo {
text-align:center;
  margin: 0;
}
/* # is an ID selector to id="" in html */
/* padding provides space around the interiour of an element. T/B & L/R */
/* text-align is simuliar to word processing l,R & C  */
a {
Color: #90caf9;
}

header {
background: #90caf9;
border-color: #64b5f6;
}
 h1, h2 {
color: #e3f2fd;
}

nav {
  background: #64b5f6;
}

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

nav a.selected,  nav a:hoover {
color: #1976d2;
}

& here is my HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> Jonthue | Designer</title>
  <link rel="stylesheet" href="CSS/normalize.css">
  <link rel="stylesheet" href="CSS/alpha.css">
  </head>
<body>
  <header>
    <a href="index.html" id="logo">
        <h1>Jonthue Michel</h1>
        <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href ="index.html"class="selected">Portfilo</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/IMG_20150505_100103.jpg">
                               <img src= "img/IMG_20150505_100103.jpg" alt="">
                              <p>Taking a short of the church, Triangle SDA Mission</p>
                          </a>
                      </li>
                      <li>
                        <a href= "img/IMG_20150505_100026.jpg">
                               <img src= "img/IMG_20150505_100026.jpg" alt="">
                              <p>2nd shot of church</p>
                          </a>
                      </li>
                      <li>
                        <a href= "img/Capture1111.PNG">
                               <img src= "img/Capture1111.PNG" alt="">
                              <p>SDA logo revived 2nd verison</p>
                          </a>
                      </li>
                      <li>
                        <a href= "img/p2.PNG">
                               <img src= "img/p2.PNG" alt="">
                              <p>SDA logo revived 3rd verison</p>
                          </a>
                      </li>
                      <li>
                        <a href= "img/img_1367.JPG">
                               <img src= "img/IMG_1367.JPG" alt="">
                              <p>Taking a short of the church, Triangle SDA Mission</p>
                          </a>
                      </li>
                    </ul>
                    </section>
                    <footer> 
                      <a href ="https://www.facebook.com/jonthue.michel"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
                      <a href ="http://www.google.com/+JonthueMichel"><img src="img/circle-google-plus.png" alt"Google Plus Logo"> </a>
                      <p>&copy; 2015 Jonthue Michel.</p>
                    </footer>
   </div>
  </body>
</html>
Jonthue Michel
Jonthue Michel
1,462 Points

I used another color code or whatever instead of #fff because I simply was trying to see if it will make a difference.

Jonthue Michel
Jonthue Michel
1,462 Points

Fixed typo on hover but the white text on the unselected still not their. http://port-80-hztubmix12.treehouse-app.com/index.html

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Hi Jonthue, Your code is correct, except for one small typo. It should be "hover" not "hoover." Fix that up and you're good to go.

Keep Coding! :)

Jonthue Michel
Jonthue Michel
1,462 Points

Hover works, but the white text not so. I've copied what I could as far as were he inserted the color white but my text still look bluish. http://port-80-hztubmix12.treehouse-app.com/index.html

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

There is a space between the : and the word "visited" You have nav a: visited. Delete the space.

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

And the color you've chosen (#e3f2fd) does have a slight blue tint to it. Not much, but noticeable.

Hopefully once that space is deleted, everything works. :)

Jonthue Michel
Jonthue Michel
1,462 Points

Thanks it solved it. I'll definitely keep the spacing in mind. I replaced it as #fff now thanks.

Jonathue- Do you possibly mean 'hover'? Your code is

nav a.selected, nav a:hoover { color: #1976d2; }

There may be other issues but I noticed that right away.

Jonthue Michel
Jonthue Michel
1,462 Points

Thanks. Hover was ideally to be a custom color but the others like h1, h2 & nav, nav revisited suppose to be white. But I'm still not getting the white text on the non selected text or so. http://port-80-hztubmix12.treehouse-app.com/index.html