Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 776
Curious George Avatar asked Jun 24 '13 16:06

Curious George


People also ask

Why isn't my background color showing up in CSS?

that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…

Why is my background image not working CSS?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

Is background color a CSS or HTML?

To add background color in HTML, use the CSS background-color property.


2 Answers

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

like image 177
Arun Kumar Avatar answered Oct 14 '22 05:10

Arun Kumar


<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; }
like image 29
aaron lilly Avatar answered Oct 14 '22 03:10

aaron lilly