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 Organize CSS with Comments

Shazad Kazi
Shazad Kazi
10,758 Points
Posted by Shazad Kazi
Shazad Kazi
10,758 Points

Organsing CSS causing an error

I appear to be getting an error for the h1, h2, nav a and nav a:visited and the a element in /'links*/. These all seem to have occurred after I changed the ordering. I'd be grateful if someone could take a look at the code.

/*******************
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:#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;
}
Eric Thompson
Eric Thompson
9,858 Points
Eric Thompson
Eric Thompson
9,858 Points

(In response to your question: "Do you know if there is an easier way to display this code. My apologies, it seems wretched to read.")

A lot of your coding is inconsistent, especially the spacing. You should add at least 1 space between your next block of code, and maybe one space between your code and your comments. Also, your header block was missing the closing }, which was causing an error for the rest of the remaining code.

I cleaned up your code as how I would have written it myself (spacing consistency, removing all those "*****" when commenting, etc.). Compare it to your original coded format:

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

2 Answers

Dan Oswalt
Dan Oswalt
23,438 Points
Dan Oswalt
Dan Oswalt
23,438 Points

It's a little hard to read your code, but I think you are missing an * after the slash to mark a comment for logo text.

Dan Oswalt
Dan Oswalt
23,438 Points

Actually you are missing the correct marks for comments below that also in a couple place. /* comment */

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Thank you Dan, Do you know if there is an easier way to display this code. My apologies, it seems wretched to read.