CSS validator tells me I have errors in my CSS but I can\'t figure out why. body
ID: 3850987 • Letter: C
Question
CSS validator tells me I have errors in my CSS but I can't figure out why.
body { background-color: #666666;
background-image: linear-gradient (to bottom, #ffffff, #666666);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px; }
#container { width: 960px;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: white;
box-shadow: 5px, 5px, 5px, #1e1e1e;
border-radius: 15px; }
header { background-image: url(background.jpg);
hight: 150px;
border: 1px #000;
border-radius: 15px; }
h1 { font-family: Impact, sans-serif;
font-size: 4em;
padding: 1em;
color: hsla(0, 0%, 0%, 0.2); }
h2 { font-family: Impact, courier-new;
font-size: 1em;
text-shadow: 3px, 2px, 5px, #666; }
.photo { float: right; }
footer { border-top: thin solid;
text-align: right;
font-size: .8em;
font-style: italic; }
errors:
11
body Value Error : background-image linear-gradient is not a background-image value : linear-gradient 11 body Parse Error (to bottom, #ffffff, #666666); 13 Helvetica, sans-serif Parse Error [: no-repeat; font-family: Arial] 13 Helvetica, sans-serif Parse Error sans-serif; 19 Parse Error [: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } #container] 28 header Property hight doesn't exist : 150px 39 h2 Value Error : text-shadow Too many values or values are not recognized : 3px,2px,5px,#666Explanation / Answer
change code to
body { background-color: #666666;
background: linear-gradient (red, yellow); //bottom is default no need to mention it here
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif; // may be it is not supported by your browser
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px; }
#container { width: 960px;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: white;
box-shadow: 5px, 5px, 5px, #1e1e1e;
border-radius: 15px; }
header { background-image: url("background.jpg"); //url should be inside double quotes
height: 150px; //height spelling mistake
border: 1px #000;
border-radius: 15px; }
h1 { font-family: Impact, sans-serif;
font-size: 4em;
padding: 1em;
color: hsla(0, 0%, 0%, 0.2); }
h2 { font-family: Impact, courier-new;
font-size: 1em;
text-shadow: 3px 2px 5px #666; } // remove comma as, text-shadow 3px 2px 5px #666;
.photo { float: right; }
footer { border-top: thin solid;
text-align: right;
font-size: .8em;
font-style: italic; }
It had some invisible character in you program. it acts like a space but its not a space.