"body {background-color}" works in HTML but not in CSS

S

2

14

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!

Stentorian answered 24/6, 2013 at 16:55 Comment(3)

Why do you have HTML tags in your style.css file? Maybe taking those out will fix the issue? – Travail 24/6, 2013 at 16:58

Is the css file located in the same directory/location as your html file? Remove the tags from you CSS stylesheet as well. – Bryonbryony 24/6, 2013 at 16:59

Your first step in solving an HTML or CSS problem should be to validate both documents. – Newsome 24/6, 2013 at 17:33

M

15

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

Meldameldoh answered 24/6, 2013 at 17:4 Comment(0)

P

3

<style type="text/css"></style>

is html tags, and you shouldnt have them in your .css file,

replace the code within style.css with this. Just copy and paste.

   body {background-color: green;}
   h1 {color: orange; }

Petes answered 27/3, 2019 at 15:36 Comment(0)

Recommended topics

Hot tags