I am building a site using a template and this is the css code:

CONTENT
------------------------------------*/
.sf_pagetitle {
clear: both;
padding: 10px 0 0 20px;
font: normal 1.5em Helvetica, Arial, sans-serif;
text-align: left;
height: auto !important;
min-height: 30px;
}

.sf_content {
height: 300px;
padding: 20px 20px 0 20px;
margin: 0px;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: auto !important;
height: 200px;
min-height: 200px;
}

.sf_content:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}

/*------------------------------------
FOOTER
------------------------------------*/
.sf_footer {
font-size: .8em;
padding: 25px 0 0 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 30px;
}

/*------------------------------------
BANNER
------------------------------------*/
div.sf_banner {
margin-bottom: 35px;
padding-top: 50px;
text-align: center;
font-size: .8em;
}

div.sf_banner div#bannerLink {
padding-top: 10px;
}

I need to add this html code to the page to show an animation image, question is should this code be added to the html doc or to the css file?

<p align="center"><a href="www.phatphones.com">
<img border="1" src="http://www.phatphones.com/PhatphonesAnim.gif" width="468" height="60"></a></p>

CSS files are for CSS ONLY, you cannot put HTML into a CSS file.

Don't use <p align="center"> - use css for text alignment.