CSS div not working - html

Question

My Footer div doesn't show the background color..
Here is the style.css file in which all of the background is working except the footer..
[ Style.css]
.Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
}
body {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
}
.body {
padding-top: 1px;
margin-top: 2px;
width: 1200px;
height: 500px;
}
.about_this_site__title {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#menu {
padding: 0;
margin: 0;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-radius: 2px;
}
#menu ul {
margin: 0;
padding: 0;
border-radius: 3px;
}
#menu ul li {
background: #ffffff;
float: left;
position: relative;
border-radius: 2px;
list-style-type: none;
}
#menu ul li a {
font-family: Verdana;
font-size: 14px;
color: blue;
text-decoration: none;
display: block;
line-height: 30px;
width: 160px;
height: 30px;
text-align: center;
}
#menu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#menu ul li ul li a:hover {
color: white;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
}
#menu ul li:hover ul {
visibility: visible;
font-weight: bold;
}
#menu ul li:hover {
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
The text shows up but the background doesnt.
[ index.html ]
<div class="Footer">Copyright bla blah</div>

Answer 1

You are opening a p tag and closing with a div tag.
<p class="Footer">Copyright bla blah</p>
Also you have not defined a background color.
Use background-color instead of colorfor it in the css.

Answer 2

Replace
color: #ffffff;
with
background-color: #ffffff;

Answer 3

Sorry i am going to rip your question apart, because someone has to.
Firstly, you are opening with a <p> tag and closing with a </div> tag. This is your first mistake. Secondly, you have not declared a background-color variable at all in the CSS provided. Thirdly, you should never use a <p> tag for ANY BLOCK elements on your page. Always use a <div></div> for your block elements. It is just good practice and valid HTML coding.
In saying that, your code should look something like the following:
[ Style.css]
.Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: red;
}
[ index.html ]
<div class="Footer"><p>Copyright bla blah</p></div>
(the <p></p> tag above is purely up to you to have or not as it does allow for more flexibility in your design but not necessary to have.
Hope this helps for future endeavors.