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

my code is like the video exactly and the header won't turn green no matter what i do

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Ahmed Essam | WebDesginer</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>ahmed essam </h1> <h2>web desginer</h2> </a> <nav> <ul> <li><a href= "index.html">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> the soltitude</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p> Testing the colors</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p> grimor</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p> photoshop stuff</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p> the maze</p> </a> </li>
</ul> </section> <footer> <a href ="https://twitter.com/ahmad_eltantawy" > <img src = "img/twitter-wrap.png" alt="twitter logo"> </a> <a href="https://www.facebook.com/ahmed.essam.96"> <img src = "img/facebook-wrap.png" alt="facebook logo"> </a> <p>Ā© Ahmed Essam</p> </footer> </div> </body> </html>

and the css code :

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-color: #6ab47b; border-color:#599a68; }

2 Answers

First, please refer to the Markdown cheatsheet linked below to learn how to format your code quotes.

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-color: #6ab47b; border-color:#599a68; }

Since you made logo an id, you need #logo to designate it. The same is true for wrapper. No symbol looks for an html element. A . looks for a class. A # looks for an id. Your current code would assign the color to all a elements. There is a problem in that you assign the same color to the header background as you do the text, so it disappears. You need to change one of the colors. Your border does not show up because you do not assign a size to it.

Darren Joy
Darren Joy
19,573 Points

I tried out your code (cut and paste) and it worked for me. Did you refresh after saving after making the change in Workspaces?

i tried that but worked after i closed the browser and open it again thank you for your support :)