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

mary battlebury
mary battlebury
527 Points
Posted by mary battlebury
mary battlebury
527 Points

Green header also not visible, and code is same as video?

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Nick Pettit | 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>Nick Pettit</h1>
            <h2>Designer</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="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://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
            <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
            <p>&copy; 2014 Nick Pettit.</p>
          </footer>
        </div>
      </body>
    </html>

CSS

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: #6ab47b;
  border-color: #599a68;
}
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I've formatted your html and css in markdown for other learners' benefit.

2 Answers

Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

Hey,

Looks like you have some html typos- first, make sure that the div id of wrapper is referenced as #wrapper in your css,

second, make sure the header, div, section, and footer tags are wrapped under the body tag. third, I was able to get the header to appear as green, but the nav links were not visible because they need to have a different color (i made them white for viewing purposes).

Here's the codepen,

Hope this helps :)

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Man you are right: the <body> tag is missing:) didnt notice that

mary battlebury
mary battlebury
527 Points
mary battlebury
mary battlebury
527 Points

Hey thanks a lot for replying ! Unfortunately when i posted my css there it wouldn't show the # :/ Realised now i accidentally had additional body tag by mistake,! has cleared everything up thanks again :)

Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

you're welcome!

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

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