CSS CSS Basics Understanding Values and Units Percentages

Eric Bezanson
Eric Bezanson
2,907 Points

background-color not working

can someone please explain why my background color is not changing to orange?

html:

<!DOCTYPE html> <html> <head> <meta charset="utf-0"> <title>Lake Tahoe</title> <link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,400,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header id="top" class="main-header"> <span class="title">Journey Through the Sierre Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header>

........ </body>

css:

******************************* TYPE SELECTORS *******************************\

body { color: #878787; margin: 0; }

h1 { font-size: 90px; color: white; }

h2 { font-size: 53px; color: #878787; }

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

******************************* PSEUDO-CLASSES *******************************\

a:link { color: rgb(255, 169, 73); text-decoration: none;

}

a:visited { color: lightblue; }

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

a:active { color: lightcoral; }

******************************* CLASS SELECTORS *******************************\

.main-header { background-color: orange; }

.title { color: white; font-size: 26px; }

.primary-content { text-align: center; }

.t-border { border-top: 2px solid lightgrey; }

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

to my knowledge the class "main-header" is imputed correctly and being targeted in the my class selectors section, however when i preview the site it is not working and is just whitespace.

(not related to video as i was backtracking through the library to try and find an answer)

3 Answers

Gabriel Tartaglia
Gabriel Tartaglia
41,581 Points

Hi Eric,

the problem in your code is actually the comments. A comment begins with /* and ends with */.

That's your code:

******************************* TYPE SELECTORS *******************************\

That's how it needs to be:

/******************************* TYPE SELECTORS *******************************/

You can also take a good look at the CSS Comments documentation.

I hope this solves your problem.

P.S. Give me a touch if I was not clear enough, english is not my first language!

First of all you didn't use a head and body tag, but i think this isn't the main issue.

I tested your code on codepen and it works fine, but only when i deleted the comments between the css areas. Here is the link: http://codepen.io/anon/pen/raYNJd

I hope this solves your problem.

Eric Bezanson
Eric Bezanson
2,907 Points

The community is fantastic thanks guys !

I probably should stop coding at 4am and so I don't make mistakes like that haha