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
Austen Flint
1,066 Pointscolor of anchor element not changing
I am completing the 'How To Make a Website' course and this little error is becoming annoying. For some reason the navigation links should be displayed as white, but they are still showing up as green. Obviously there is an issue with the html and/or css, I can't seem to find it. Any help would be appreciated
Austen Flint
1,066 Pointsa { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
logo {
text-align: center; margin: 0; }
a { color: #fff; }
header { background: #6ab47b; border-color: #599a68; }
h1, h2 { color: #fff; }
nav { background-color:#599a68; color: #fff; }
nav a{ color: fff; }
a { color: #fff; }
nav a.selected, nav a:hover { color: #32673f; }
body { background-color: fff; color: #999; }
3 Answers
Samson Tudor
3,868 PointsPete Cass is right, you set the body css last and the program will interpret that because this is the nature of cascading style sheets. But if you want to change the color of the anchors and still change the body color, you should put your anchors in a class, after that you can style that class.
For example:
a { color: red; }
body { color: green; }
Will give you everything in green.
But if you first make a class for all the anchors, like this < a href="you link" class="anchors" <- or change to what you want >, do not forget to do this for all you anchors that you want to change the color.
Now is CSS you can access .anchors and be more specific to the program instead of a.
.anchors { color: red; }
body { color: green; }
Your text will be green but your anchors will be red, this is because a class is more specific than a general element tag like a, and an if you use an id it will be more specific than a class.
I hope it helps, Best Regards.
Julian Aramburu
11,368 PointsHi! If you are having problems with your code it would be useful to paste your code so we can check it out :)!
Austen Flint
1,066 Pointshope that helps...
Pete Cass
16,656 PointsYou've set the body color to #999 after the anchor element. This will override any previous styles as CSS is cascading.
Try moving any styles you've set for the body to the top of your CSS file.
Austen Flint
1,066 PointsAusten Flint
1,066 Points/* index.html*********/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Austen Flint | 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>Austen Flint</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg">
<p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg">
<p>Playing with blending modes in Photshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg">
<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">
<p>Drips created using photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg">
<p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/Aj_flint25"> <img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com/austen.flint"> <img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Austen Flint</p> </footer> </div> </body>
</html>