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 Color in CSS

Posted by Mike Jacoby
Mike Jacoby
928 Points

nav a, nav a:visited { color: #fff; } is not changing my links to white in chrome, ff, or ie. Same code as Nick.

I've got the same code as Nick in main.css. I've followed step by step, and quadruple checked pound signs, colon's, semi-colons, and the like, however my links are still not turning white after doing the nav a, nav a:visited. I've tried 3 browsers now. I even saw where Nick momentarily scrolled up to see if he already had a Nav ID selector, which he did not, and I double-checked that our code is the same. Have there been others who've had this same issue? I'm not sure what browser he's using, but my links are just not turning white. I've tried color: white; color: #fff; and color: #ffff; --- none of them work. Nick is using #fff; in this video.

Thanks

6 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Mike,

I know you've checked your code, and rechecked but if you can post your html and css Heres how to post it we can not only add an extra set of eyes but we can take your code and test it ourselves, it has been known for someone to fail to get their code to work in a particular browser, only for everyone else who tries it to have no problems.

Mike Jacoby
Mike Jacoby
928 Points
Mike Jacoby
Mike Jacoby
928 Points

I saw this in the "here's how to post it" link, so I'm pasting this here:

I'm not really sure if this is even going to display. I read that howto link, but didn't see anything specific to how to post my code here, so I'm just pasting it.

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;
}

We want these colors to stay white no matter what, even if the visitor has visited, so create a pseudo class: a:visited And Nick says each f translates to 2 digits, so rather than ffffff, fff can be used. So could 000 for black. Tested and
verified.The issue is the links are not turning white after using the syntax below... in IE, FF, and Chrome.

nav a, nav a:visited {
  color: #fff;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I edited your code to appear a little clearer. You can look at the Markdown Cheatsheet that has a link to it in bold near the bottom of the page.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Your css for nav a, nav a:visited looks fine Mike, as long as your html is good I don't know why I won't work.

Mike Jacoby
Mike Jacoby
928 Points
Mike Jacoby
Mike Jacoby
928 Points

I don't know either, I did everything Nick did in his video. It was white for him. What's odd is after the next video (comment) video tutorial, he moved things around, and after doing the same, the font changed white.

I thought I heard there's a rule where order of code determines output in CSS, so was the following taking precedence:

a { color: #6ab47b; }

over nav a at the bottom?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

No, it shouldn't have been. nav a is more specific of a selector and would take precedence.

Tj McClearin
PLUS
Tj McClearin
Courses Plus Student 1,703 Points
Tj McClearin
Tj McClearin
Courses Plus Student 1,703 Points

Same for me 

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:visted {
  color: #fff;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tj,

You have a typo on nav a:visted

Tj McClearin
Tj McClearin
Courses Plus Student 1,703 Points

Yeah I'm a horrible speller :-P thanks!

Tj McClearin
PLUS
Tj McClearin
Courses Plus Student 1,703 Points
Tj McClearin
Tj McClearin
Courses Plus Student 1,703 Points

All my html from index.html

<!DOCTYPE html>
<htmL>
  <head>
     <meta charset="utf-8">
    <title>Xcape Inc. | ITaaS</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>Xcape, Inc.</h1>
        <h2>ITaaS</h2>
      </a>
      <nav>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
        <li><a href="book-a-tech.html">Book-A-Tech</a></li>
        <li><a href="http://**************" target="_blank">Blog</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>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 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 Repetition</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://***************************"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://***************************"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Xcape, Inc.</p>  
      </footer>
    </div>
  </body>
</htmL>