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 CSS Basics (2014) Understanding Values and Units Color Values

Posted by Sandy Jones
Sandy Jones
7,854 Points

Color of h1 not changing as displayed in video. Not getting light orange, I'm getting the grey color of the body showing

Here is the css file: /* Type Selectors ------------------ */

body { color: #878787; margin: 0; font-size: 1em; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255 .5); }

h2 { font-size: 53px; }

h3 { font-size: 20px; color: #48525c; }

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); /* 0 to 255 is range */ }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* ID Selectors -------------------- */

main-footer {

padding-top: 60px; padding-bottom: 60px; border-bottom: solid 10px #ffa949; }

/* Class Selectors ----------------- */

.main-header { background-color: #ffa949; color: rgba(255, 255, 255 .5);

}

.title { color: white; font-size: 1.625rem; /* 26px/16px */ }

.primary-content, .secondary-content { width: 60%; }

.primary-content { text-align: center;

}

.t-border { border-top: 2px solid lightgrey; /* Top border styles */ }

3 Answers

Larry Coonrod
Larry Coonrod
5,041 Points
Larry Coonrod
Larry Coonrod
5,041 Points

You left out the comma after the last rgb color. This should fix it:

h1 { font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, .5); }

Jen Stratton
Jen Stratton
2,427 Points
Jen Stratton
Jen Stratton
2,427 Points

I am having the same issue. My code is identical, but has the comma Larry mentions. The orange header background is now white and the text within is grey.

B.B. Groeneveld
B.B. Groeneveld
2,826 Points
B.B. Groeneveld
B.B. Groeneveld
2,826 Points

I think I know what you mean. Perhaps it does show a dark grey color because the preview box has a black background, and you have set the color value with an opacity of .5, so the preview shows exactly that what you've coded.

Just like this should be brown when hover on the code:

a:hover { color: rgba(255, 169, 73, .4); }