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 Henry Ng
Henry Ng
337 Points

Text won't change to grey!

I'm using this in CSS:

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

on this in HTML:

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Henry Ng</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>
          <li>
            <a href="img.numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation 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>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img.numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Creating shapes.</p>
            </a>
          </li>
           <li>
            <a href="img.numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>This is pretty cool</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/henryng24"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/henryng24"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Henry Ng.</p>
      </footer>
    </div>
  </body>
Henry Ng
Henry Ng
337 Points

thanks!

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Henry,

If that's the only css you have then the only text that would be grey is the copyright notice.

The rest of the text that you have is all nested within <a> elements. So the logo headings and image captions will inherit the browser's default colors for links. This is normally blue for unvisited links and purple for visited.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

If you did this:

a {
  color: inherit;
}

then everything would turn grey because the links are now inheriting the grey body color.

I would just follow along with the course though and Nick will show you how to change all the colors.