Html – “body {background-color}” works in HTML but not in CSS

background-colorcsshtml

Am able to set the background-color attribute for HTML body in an inline <style> command
but not when the identical command is moved to an external stylesheet. A specific example
is given below.

In test1.html, background-color is set to "blue: in the HTML. File test2.html is identical to test1.html except the <style> command is commented out. File style.css contains a spec for background-color and also for the <H1> element (to test that the browser really is
reading the stylesheet).

First test produces orange text against a blue background. Second test produces orange
text, but against a white background. I've tried this on Firefox 21, Chrome 19, and
IE 9; all give the same results.

What's going on? Any help would be appreciated.

Here are the three sample files:

test1.html:

<HTML>
<head> <link type="text/css" rel="stylesheet"  href="style.css">
<style type="text/css">
  body {background-color: blue}
</style> 
</head>
<body> <h1>This is a test.</h1> </body> </html>

test2.html:

<HTML>
<head> <link type="text/css" rel="stylesheet"  href="style.css">
<!-- <style type="text/css">
       body {background-color: blue} 
     </style> -->
</head>
<body> <h1>This is a test.</h1> </body> </html>

style.css:

<style type="text/css">
   body {background-color: green;}
   h1 {color: orange; }
</style>

Thank you!

Best Answer

don't use <style type="text/css"></style> in style.css

Related Topic