CSS; Change Font Size and Tables

Below is a sample of code that actually works....but when I try to put the <div id="heading"> on some other text in another table...it does not work.

I did add as a test another call to my function and that worked...but I would like to avoid having a different call for each table I have on my page. Can someone give me advise on the easiest way to accomplish changing the text for people...so they can choose the font size that is easiest to read?

Thanks,

C.R.

<style type="text/css">
#content {font-size:12px;}
#heading {font-size:16px;}

A:hover {
FONT-SIZE: 10px; COLOR: #f02d0c; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.readmore {
FONT-SIZE: 10px; COLOR: #495875; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
; cursor: auto}
</style>

<map name="m_client_r3_c9">
<area shape="rect" coords="312,0,323,19" href="#" onClick="ChangeFontSize('heading',18), ChangeFontSize('content',14)" alt="">
<area shape="rect" coords="303,0,312,19" href="#" onClick="ChangeFontSize('heading',16), ChangeFontSize('content',12)" alt="" >
<area shape="rect" coords="289,0,301,19" href="#" onClick="ChangeFontSize('heading',14), ChangeFontSize('content',10)" alt="">
</map>


<td colspan="10" valign="top" bgcolor="#ffffff"><table width="100%" height="85" border="0">
<tr>
<td height="41" colspan="2"><font color="#495875" size="2" face="Franklin Gothic Medium"><div id="heading">Testimonials</div></font></td>
</tr>
<tr>
<td width="8%">&nbsp;</td>
<td width="92%"><font size="2" face="Arial, Helvetica, sans-serif"><div id="content">The
consultants at Aberon IT Services , Inc have been a pleasure to work
with..."</div> </font><a href="Testimonials.htm" class="readmore"><strong>Read More...</strong></a></td>
</tr>
</table></td>

Please put code in &#91code][/code] tags in future posts.