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

Posted by Jeff Mauro
Jeff Mauro
5,374 Points

Errors in css.main

In main.css, the COLORs section have red hi-light errors on the selector words at the beginning of the rules, such as body, header, nav, h1, h2, a, nav a, nav a. I notice the coloring of my Header has been lost and changed to white. Please review and advise. Thank you!

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

body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/********************** 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: 10px 0; margin: 20px 0 0; }

/********************** FOOTER **********************/

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

/********************** PAGE PORTFOLIO **********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.50%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; ]

/********************** COLORS **********************/

/* site body */ body { background-color: #fff; 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; }

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeff Mauro / Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jeff Mauro</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 id="gallery"> <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 repitition.</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>© 2014 Jeff Mauro.</p> </footer> </div> </body> </html>

3 Answers

jaredcowan
jaredcowan
11,808 Points

You had a closing square bracket for your gallery id and you also didn't give prefix your ids with #

P.S

  1. Never put css on one line unless you are only declaring one attribute.
  2. You did good by never giving 0's units. (0px BAD)
  3. don't declare things twice (body) and keep them at the top
/********************** GENERAL **********************/

body { 
  background-color: #fff; 
  color: #999;
  font-family: 'Open Sans', sans-serif;
}

a { text-decoration: none; }

img { max-width: 100%; }

/* 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; }

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

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


/********************** 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: .8em; }

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

/********************** NAVIGATION **********************/

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

/********************** FOOTER **********************/

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

/********************** PAGE PORTFOLIO **********************/

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

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.50%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: .75em;
  color: #bdc3c7;
}
Jeff Mauro
Jeff Mauro
5,374 Points
Jeff Mauro
Jeff Mauro
5,374 Points

Fixing the square bracket seemed to fix everything. Thanks for the further tips. Much appreciated.

I wasn't sure what the below meant or was referring to! Can you clarify? ~Happy Holidays!

"you also didn't give prefix your ids with #"

jaredcowan
jaredcowan
11,808 Points

The css you posted was this 

gallery { margin: 0; padding: 0; list-style: none; }

gallery is an id so this needs to be the css.

#gallery {
  margin: 0;
  padding: 0; 
  list-style: none;
}
Jeff Mauro
Jeff Mauro
5,374 Points
Jeff Mauro
Jeff Mauro
5,374 Points

Understood. Thanks ( < :