There are various ways to display a tag cloud. I've chosen a style that closelyresembles the tag clouds on Flickr. Here is the HTML for a very small tag cloud, so you can see how it is structured:
<div class="cdiv"> <p class="cbox"> <a href="link1" style="font-size:23px;">tag1</a> <a href="link2" style="font-size:18px;">tag3</a> <a href="link3" style="font-size:13px;">tag3</a></p> </div>
Each word or tag is associated with the style division class
cdiv (which is definedin the CSS style file), and the font size is given
explicitly for each tag.
These days, it is fashionable to separate style from structure, and keep all
stylisticinformation in the CSS file. The tag clouds produced by some scripts accomplishthis
goal by eliminating the explicit font-size references and using a set of individual styles
tagcloud3, and so on), one
foreach font size. While the basic idea of separating style from structure is desirable,
this particular method strikes me as silly, since the separate classes are functioningas
implicit font-size directives. It reduces clarity in the HTML code and makes theCSS code
Since we have full control over the code that generates the tag cloud, there is little need to use CSS to modify the range of font sizes—instead, we will control this detail through scripting.
For the tag clouds in this article, I am putting the font-size directive in the tagcloud code itself, and using a shorter CSS file called "mystyle.css" ...