CSS para los estilos de las etiquetas

Utilizaremos CSS para definir los estilos de la nube y de las etiquetas que vamos a colocar dentro. Hemos realizado esta declaración de estilos intentando que sea lo más versátil posible, adaptable a todos los sitios y de modo que se puedan colocar varias nubes en la página con el mismo estilo.

La declaración de estilos se compone por dos capas. Primero la capa donde vamos a colocar la nube, con estilos generales a la nube. Segundo la capa donde van las etiquetas y por último los distintos estilos de para cada uno de los tamaños posibles de las etiquetas.

<style type="text/css">
.nube{
   border: solid 1px #aaaacc;
   background-color: #ddddff;
   color: #666666;
   width: 335px;
   text-align: center;
}
.nube div.etiquetas{
   font-family: verdana,arial,helvetica;
   font-size:8pt;
   padding:5px;
}
.nube div.etiquetas span{
   float: left;
   margin: 0 3px 0 3px;
   height: 20pt;
   white-space: nowrap;
}
.nube div.etiquetas span.etiquetatam1{
   font-size: 110%;   
}
.nube div.etiquetas span.etiquetatam2{
   font-size: 120%;   
}
.nube div.etiquetas span.etiquetatam3{
   font-size: 130%;   
}
div.etiquetas span.etiquetatam4{
   font-size: 140%;   
}
.nube div.etiquetas span.etiquetatam5{
   font-size: 150%;   
}
.nube div.etiquetas span.etiquetatam6{
   font-size: 160%;   
}
.nube div.etiquetas span.etiquetatam7{
   font-size: 170%;   
}
.nube div.etiquetas span.etiquetatam8{
   font-size: 180%;   
}
.nube div.etiquetas span.etiquetatam9{
   font-size: 190%;   
}
.nube div.etiquetas span.etiquetatam10{
   font-size: 200%;   
}
</style>

Esto lo vamos a colocar en la cabecera de la página o en la declaración de estilos global d nuestro sitio.

Si nos fijamos, hemos utilizado 10 diferentes estilos para definir los distintos tamaños de las etiquetas de la nube. Cada una con un porcentaje superior del tamaño del texto.