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 wadethrupp
wadethrupp
1,337 Points

Why wont portfolio change to the dark green?

Why wont portfolio change to the dark green? I have typed this correctly and the hover work but the selected doesn't?

7 Answers

wadethrupp
wadethrupp
1,337 Points

It was a glitch in workspace

Nick Stellato
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Stellato
Front End Web Development Techdegree Student 33,994 Points
Nick Stellato
.a{fill-rule:evenodd;}techdegree
Nick Stellato
Front End Web Development Techdegree Student 33,994 Points

Wade,

Go ahead and copy your code to this post and then we can review it.

If you use Markdown, it will come out very easy to read. Format your code as follows:

\\ Your Code Here
wadethrupp
wadethrupp
1,337 Points
wadethrupp
wadethrupp
1,337 Points 
a {
  text-decoration: none;
}

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

#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.selected, nav a:hover {
  color: #32673f;
}

body {
  background-color: #fff;
  color:#999
}
wadethrupp
wadethrupp
1,337 Points
wadethrupp
wadethrupp
1,337 Points 
<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>Wade Thrupp | Designer</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>Wade Thrupp</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">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>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Play 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 an 80's 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 repitition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/wadethrupp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="https://www.facebook.com/wade.thrupp"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Wade Thrupp.</p>
      </footer>
    </div>
  </body>

</html>
Nick Stellato
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Stellato
Front End Web Development Techdegree Student 33,994 Points
Nick Stellato
.a{fill-rule:evenodd;}techdegree
Nick Stellato
Front End Web Development Techdegree Student 33,994 Points

Wade,

Thank you for posting the code with the proper format.

It looks to me that this section is what is fouling everything up:

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

Because this is the last entry in your css file, it will overwrite the rest of your background color css

Let me know if that helps. If you have any more questions, please let me know.

Thank you,

Nick

wadethrupp
wadethrupp
1,337 Points
wadethrupp
wadethrupp
1,337 Points

Thank you for your help but that's not the problem. Would you mind viewing my page and telling whether "Profile" is the same color as the hover.

http://web-yg5kzqyobq.treehouse-app.com/

The code looks to me exactly as the video and I would like to rule out it being my computer (don't know how this really works yet)