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 Resize Text

My h1 and h2 headers are not white help!

Having difficulties to change my header color to white.

6 Answers

This is going to be hard to answer if you don't share the code. But I will try...

To make the color of text white, you need to set that selector's color property to the value of white.

Example:

/* your CSS should look like this: */
selector {
  property: value;
} 
  1. The " selector " shown above is the name of the HTML tag you are targeting, such as the h1 or h2.
  2. The " property " should be the name of the particular property you want, such as "width: " or "height: " or, in this case, "color: " (don't forget your colon directly after the property...)
  3. The "value; " above is where the color should go (make sure this has a semi-colon at the end).

i did that tracy but the color is still coming out as blue-green. let me show u my css code. /************************ GENERAL ************************/ body{ font-family: 'Libre Basherville', 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:'Dosis',sans-serif; margin: 15px 0; font-size: 1.75em; } h2 { font-size: 0.75cm; margin: 5px 0 0; font-weight: normal; }

/************************ navigation ************************/

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

/************************ footer ************************/

footer{ font-size: 0.75cm; text-align: center; padding-top: 50px; color: #ccc; }

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

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

/* nav links*/ nav a, nav a:visited { color: #fff;

} /* selected nav links*/ nav a.selected{ color: #32673f;

}

nav a.selected, nav a:hover{ color: #32673f;

}

Codin - Codesmite
Codin - Codesmite
8,600 Points

I copied your CSS into a codepen to test and H1 and H2 appear white for me. Can you link your HTML as well so I can see if the problem is in the HTML markup and not the external CSS.

One thing that might also help you... (and you may be doing this already), and that is to organize your code a little bit differently from how I see it above.

It appears that you've got everything on one line. Like this:

selector { property1: value1; property2: value2; }

When it is much easier to break it into sections like this:

/* comment on the first line */
selector {
  property1: value1;
  property2: value2;
}

Notice how the comment is on one line, the selector and the opening curly brace is on the second, and the properties for that selector are on the next two lines, indented... individual lines for each, then the closing curly brace is on the last line, with no indent. I also try to put the properties and values (everything inside the curly braces), in alphabetical order, or at the very least, group types together (like font items together, or height and width together)... So your code above would look like this:

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

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

a { 
  text-decoration: none; 
}

/************************ HEADING ************************/

logo {
  margin: 0; 
  text-align: center; 
} 

h1 { 
  font-family:'Dosis',sans-serif; 
  font-size: 1.75em; 
  margin: 15px 0; 
} 

h2 { 
  font-size: 0.75cm; 
  font-weight: normal; 
  margin: 5px 0 0; 
}

/************************ navigation ************************/

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

/************************ footer ************************/

footer { 
  color: #ccc; 
  font-size: 0.75cm; 
  padding-top: 50px; 
  text-align: center; 
}

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

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

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

/* selected nav links*/ 
nav a.selected { 
  color: #32673f;
}

/* 
This next declaration duplicates the one above for 
"selected"... you can probably get rid of the 
declaration just above this.... 
*/
nav a.selected, 
nav a:hover { 
  color: #32673f;
}

Like Ashley said, If this isn't working (and I looked it over and tested it.... it does appear to be working correctly), it's probably something in your HTML. Can you post the HTML code?

I hope some of this helps!

this is my HTML code: Sorry for the late reponse:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tinashe Marunda | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Dosis:400,600|Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Tinashe Marunda</h1> <h2>Designer</h2>
</a> <nav> <ul id="gallery"> <li><a href="index.html" class="selected">Portfolio </a></li> <li><a href="about.html">About</a></li> <li><a href="index.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 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://www.twitter.com/Tinashe"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://www.facebook.com/Tinashe Marunda"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Tinashe Marunda</p> </footer> </div> </body> </html>

Codin - Codesmite
Codin - Codesmite
8,600 Points

Code seems to be working ok for me.

It is probably browser behaviour on your end because you haven't specified "a:visited" other then children of "nav".

Adding this will most likely fix the problem you are having with your H1 and H2:

a:visited {
   color: #fff;
}

or if you dont want all links to be white you can specify just for H1 and H2:

a:visited h1, a:visited h2 {     /* "a:visited h1, h2" is not the same as "a:visited h1, a:visited h2" as a side note */
   color: #fff;
}

I'm seeing your h1 and h2 tags in white on the page. They don't show up because there's no background color yet, but they are there.

I also noticed a couple other things about your css.... your "wrapper" and "logo" declarations in your CSS are for the id properties in the html (wrapper id is a div on line 21, and logo is in the header), are missing the "#" sign in your CSS. Id declarations in CSS MUST have the # before the name.

Your CSS has this:

wrapper {
  /* property and values here */
}
logo {
  /*property and values here */
}

When it needs to be like this (note the # in front of each declaration):

#wrapper {
  /* properties and values here */
}
#logo {
  /* properties and values here */
}

First thing to note, before I get into the specifics of what's going on with your HTML: There is something that I ALWAYS do when coding, even with HTML (and especially if you're new at it): INDENT EVERYTHING that wraps anything in my html, except the <!DOCTYPE html> tag at the top, and the actual <html></html> tags. The example files don't always indent the head, and body tags, within the html tags, but I find it easier to see exactly where I am and if anything is missing:

image of nesting in html code

Now, your HTML is missing a few important things.

You may have just not copied it over, but the first line MUST have the DOCTYPE declaration, opening and closing head tags, opening and closing body tags. (see the image above)

Also, your nesting for your code at the bottom is a little turned around.

You need to make sure your footer is outside (below) the wrapper div like this:

  <div id="wrapper">
    <section>
     <!-- stuff inside the list items -->
    </section>
  </div>
  <footer>
    <!-- stuff in footer -->
  </footer>