Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 126

<font size="-1"><h3>Random Sites Around the Web</h3></font>
In either case, you simply assign an ID to the semantic element ( h3 in this example) and then add a rule to your
stylesheet that applies the same style to that ID:
h3#randomsites { font-size: smaller; }
...
<h3 id="randomsites">Random Sites Around the Web</h3>
It's not uncommon to discover the same font applied to several related elements on the page. For instance, if
several H3 headers are styled as <font size="-1"> you define a class that all these elements can share and
apply the style to that:
h3#sites { font-size: smaller; }
...
<h3 class="sites">Intranet Sites</h3>
<h3 class="sites">Random Sites Around the Web</h3>
Less commonly, the font element encloses several elements, so you use class and/or id to apply the style to
them too.
On occasion, you may find a font element that neither immediately encloses another element nor is
immediately closed inside one. For example:
<p>Sincerely yours,<br />
<font face='Lucida Handwriting'>
Harry W. Wacker
</font></p>
In this case, you can simply replace the font element with a span or div element, assign an id and/or class to
that span or div , and then apply the styling to it.
span#signer { font-family: "Lucida Handwriting"; }
...
<p>Sincerely yours,<br />
<span id='signer'>
Harry W. Wacker
</span></p>
Font choices do sometimes convey meaning. For instance, in the preceding fragments, a handwriting font
indicates the correspondent's signature. If this is the case, define a class name that indicates that meaning and
use it to attach the equivalent CSS rule. For example:
*.signature { font-family: "Lucida Handwriting"; }
...
<p>Sincerely yours,<br />
<span class='signature'>
Harry W. Wacker
</span></p>
The mechanics for replacing font with CSS are much the same as the mechanics for replacing center with CSS.