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

Marina Candela
Marina Candela
1,607 Points
Posted by Marina Candela
Marina Candela
1,607 Points

border-color does not show up

I have followed Nick's code exactly to create a colored border and text in the sample website yet for some reason the border is not showing up. Right now I'm just at the point in the video in which the border is supposed to appear as a colored bar at the top of the web page, but it is not even doing that. I have my code below.

a { color: #6ab47b; }

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

h1, h2 { color: #fff; }

4 Answers

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I've posted your code on codepen (it is free, just do it anonymously) and made one change.

In your CSS file, on line 21 you had the rule color: #6ab47b; applied to the header. This sets the font color to green. Here's your header rule currently:

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

What you want to do is set the background color to green. Nick does this with the background CSS shorthand property.

So, your header rule should read as follows:

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

Happy coding!

Kevin VanderWulp
Kevin VanderWulp
5,180 Points
Kevin VanderWulp
Kevin VanderWulp
5,180 Points

A border doesn't show unless it also has a width and a style set. I don't believe that the example was ever supposed to have a border around the header element, I thought he just added that as a reference to copy and paste the darker color that was used for the nav and the links.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Right. At around 5:06, he says, "I'd also like you to notice that there isn't a border really appearing just yet, but we'll use that border color later on." So, you should be seeing a green box at the top of the page, but no border around that box at this point.

Marina, it sounds like you are not even seeing the green box at top, is that correct?

If that's true, could you post the entirety of your code on codepen?

Marina Candela
Marina Candela
1,607 Points
Marina Candela
Marina Candela
1,607 Points

Thank you both for the advice! But Jeff is correct, I am not even seeing the green box at the top. I have posted my code on GitHub Gist: https://gist.github.com/anonymous/200641e98d4e97483225\

I tried to do codepen but I don't think it lets me share it normally without paying.

Marina Candela
Marina Candela
1,607 Points
Marina Candela
Marina Candela
1,607 Points

Ahhh, there it is! How the hell did I miss that?! Thank you so much:) I feel like an idiot.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

No worries! A fresh set of eyes always helps.

You should mark the correct answer as the answer to your question. This will help other students as they encounter similar problems in their studies!