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!
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…
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.
To add background color in HTML, use the CSS background-color property.
don't use <style type="text/css"></style>
in style.css
<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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With