Why doesn't the CSS apply to div?

Question

I want to add a footer and started by creating a div in my html like this:

<div class="footer"></div>

and the CSS:

.footer {
    width: 100%;
    height: 80px;
    background-color: #ec6608;
}

but for some reason, all browsers do not apply the css to the div. So the div does not have any styles. I tried positioning the div somewhere else in the html, just to be sure this is not a weird placement problem. Did the same in the css document. I also used another name for the class and I tried using an id instead. Than I tried to create the footer without a div just by using the tag footer and styled it the same way: no problem there. Why the div version won't work? How I can add my css and html files?

Answer 1

I guess you didn't link the css file in the html page. This might help. <link rel="stylesheet" type="text/css" href="link_to_your_css_file" /> Do this in the head section of the html code.

Answer 2

If you've pre-defined CSS rule for .footer then try to overwrite it like this:

.footer {
    width: 100% !important;
    height: 80px !important;
    background-color: #ec6608 !important;
}