Search code examples
htmlcssstylesheetbackground-color

Body {background-color} not working in external css?

I am not able to change background color using an external style sheet. when i try this with internal style sheet it works perfect. Here is the code.

ext1.css
<style>
body{
   background-color: red;
}
ul{
   color:green;
}
:link{
    color:aquamarine;
}
p{
   font-family:"arial";
    font-size:20px;
}
</style>


HTML DOC

<!doctype html>
<html>
<head>
<title> Defining external style sheet</title>
<link href="ext1.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li> <a href="#Home">Home</a></li>
<li> <a href="#News">News</a></li>
<li> <a href="#Contact us">Contact</a></li> 
<li> <a href="#About">About</a></li>
</ul>
<p> NOTE: We use href="#" for test links , in real web sites we will use URL's </p>

Solution

  • You can't have the HTML <style> tags in your external CSS.

    Your CSS file should look like this:

    body {
   background-color: red;
}
ul {
   color: green;
}
:link {
   color: aquamarine;
}
p {
   font-family: "arial";
   font-size: 20px;
}