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

HTML How to Make a Website Customizing Colors and Fonts Organize CSS with Comments

Wessel Arendts
Wessel Arendts
1,770 Points

Does not show my Name and Jobtitle at the top of the website. Tried to adjust css to show it in white, but failed.

Everything worked out fine but I am not able to adjust my name and jobtitle in White. It appears in the same color green as the background.

Hi Wessel, could you please post the HTML/CSS you've used for your website so far? It's hard to tell what's gone wrong without that.

Wessel Arendts
Wessel Arendts
1,770 Points

/************* GENERAL **************/ body { font-family: 'Open sans', sans-serif; }

wrapper {

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

a { text-decoration:none }

/************* Heading **************/

logo {

text-align:center; margin: 0 }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1,75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0,75em; margin: -5px, 0 0; font-weight: normal; } /************* Navigation **************/

nav { text-align:center; padding: 10 px, 0; margin: 20 px, 0; }

/************* Footer **************/

footer { font-size: 0,75em; text-align:center; padding-top: 50px; color: #ccc; } /************* Colors **************/

/* Site Body */ body { background-color:#fff; color: #999; }

/* Green header */ header { background: #6ab47b; border-color: #599a68; }

/* Nav Background mobile devices */ nav { background: #599a68; }

/* Logo text */ h1, h2, { color: #fff; }

/* links */
a { color: #6ab47b; }

/* Nav Link */ nav a, nav a:visited { color: #fff; }

/* Nav selected */ nav a.selected, nav a:hover { color: #32673f; }

Wessel Arendts
Wessel Arendts
1,770 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wessel Arendts | Marketer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <style> </style> </head> <body> <header> <div></div> <a href="index.html" id="logo"> <h1>Wessel Arendts</h1> <h2>Marketer</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="Image/numbers-01.jpg"> <img src="Image/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="Image/numbers-02.jpg"> <img src="Image/numbers-02.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="Image/numbers-06.jpg"> <img src="Image/numbers-06.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="Image/numbers-09.jpg"> <img src="Image/numbers-09.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="Image/numbers-12.jpg"> <img src="Image/numbers-12.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> </ul> </section> <footer> <a href="http://www.twitter.com/doubleua"><img src="Image/twitter-wrap.png" alt="Twitter logo"></a> <a href="http://www.facebook.com/wesselarendts"><img src="Image/facebook-wrap.png" alt"Twitter logo"></a> <p>© 2016 Wessel Arendts</p> </footer> </div> </body> </html>

1 Answer

Hi Wessel, you've got commas instead of points in several places (0,75em instead of 0.75), but the issue with the words being invisible is that you've set the color of you links to the same color as your header's background, #6ab47b, and your h1 and h2 are links.

You'd either want to define link color first, then define h1/h2 color as white, or put more specificity on the h1/h2 color than the link color.