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

HTML How to Make a Website Customizing Colors and Fonts Use Color in CSS

Jonathan Starr
Jonathan Starr
3,181 Points
Posted by Jonathan Starr
Jonathan Starr
3,181 Points

font color and space directly behind font not changing colors on nav bar

I copied the CSS just as the instructor has it, his font changes colors mine does not. Do we know why?

Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points

show your code, so we can understand the problem

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Jonathan Starr if you can copy and paste your code here, or use a tool like Codepen.io we can help you further.

Jonathan Starr
Jonathan Starr
3,181 Points
Jonathan Starr
Jonathan Starr
3,181 Points

Here is my code:

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

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

2 Answers

Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points
Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points

the below code maybe will solve your problem ;)

a {
  text-decoration: none;
}

h1, h2 {
  color: #fff;
}

p { 
  color: #000;
}

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

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

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

you can use "Markdown Cheatsheet" in future posting your code will be more clear for others to read your code

Jonathan Starr
Jonathan Starr
3,181 Points
Jonathan Starr
Jonathan Starr
3,181 Points

Yeah, I was not completely clear in my question. What is happening is on the nav bar my link text is showing up with a white background and black text but i am wanting a green background (like the header) with greener text. What would I need to change? What you are suggesting is that I change my nav links color to white? and a paragraph text color?

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

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

a {
  text-decoration: none;
}




/****************
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.75 em;
  margin -5px 0 0;
  font-weight: normal;
}


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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Jonathan Starr try looking at this demo on jsfiddle : https://jsfiddle.net/blueocto/016gf5zd/1/

I've guessed your markup, but essentially your links were the same colour as the background, or too close a green. I've changed them to white so you can see the difference.