Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,418 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

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,418 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

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

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,418 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!