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 Pick Fonts and Set Relative Units

Steven Sokol
Steven Sokol
578 Points
Posted by Steven Sokol
Steven Sokol
578 Points

I pasted the link into my HTML and wrote the CSS exactly as he described, but when I previewed, my name has disappeared?

I carefully un-did everything from the HTML and main CSS but no return of my name ?? Can you help?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Steven Sokol | Clinical Informatics Specialist</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>Steven Sokol</h1>
        <h2>Clinical Informatics Specialist</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>

Here is the CSS

/******************************
GENERAL
******************************/


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

a {
  text-decoration: none;
}



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

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

/******************************
COLORS
******************************/ 
}

/*  site body */
body{
  background-color:3fff;
  color: #999;
}

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

 /* nav background on mobile  */

nav {
 background: #599a68;
} 


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

/* links */
a{
  color: #6ab47b;
}
Christian Andersson
Christian Andersson
8,712 Points

I'd gladly help you out, but I have nothing to take a look at :) Please post your code here.

Joseph Turnquist
Joseph Turnquist
14,516 Points
Joseph Turnquist
Joseph Turnquist
14,516 Points

Steven,

Can you provide your HTML / CSS here?

Christian Andersson
Christian Andersson
8,712 Points

Edited for markdown.

4 Answers

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

Hey Steven,

your issue here is that your font color is the same green color as the background, hence why you can't see it (though it is actually there). Do a ctrl+a on the page to highlight all the text and you'll see :)

To fix this, you can edit your anchor styling:

a{
  color: #6ab47b; /* <---- change this */
}

The reason why your h1, h2 css coloring doesn't work is because the headers are actually links from the wrapping anchor tag. If were to remove the link from your h1 (where it says your name) the h1, h2 styling would apply and the text would be white.

Now, you have couple of more errors as well on your css that would need fixing:

1- You forgot the colons in your padding:

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding 0 5%; /* <---- fix */
}

2- You mistyped your hash-symbol in your body background-color:

body{
  background-color:3fff;
  color: #999; /* <---- fix */
}

3- You have two stray closing curly braces on line 30 and 51 that you should remove.

For me these mistypes are really easy to spot because the coloring of key-words or special characters gets messed up in my text editor. For example, the stray braces become red in color in the editor so it's easy to spot them. Same goes with most syntactical errors. You may already be using one, but if not I would really recommend a text-editor such as Notepad++ or Sublime Text.

Anyway, I hope this helps. :) Good luck!

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Steven,

I'm not sure why your text disappeared, but it looks like you are trying to set the h1 color to the same value as the body background color (#fff).

Sarah Hoopes
Sarah Hoopes
6,304 Points
Sarah Hoopes
Sarah Hoopes
6,304 Points

Your code says 3FFF for the background color. It should be #FFF

Minh Nguyen
Minh Nguyen
3,982 Points
Minh Nguyen
Minh Nguyen
3,982 Points

Hi Steven,

I have tried your code and the root of the problem is the single lonely } you put above the line /* logo text */ in your CSS file. Delete it and your name should appear instantly.

It's a bit late but I hope this helps for others as well.