Varias clases juntas

Por lo general asignamos una clase CSS a una etiqueta pero, no hay nada que nos impida asignarle varias simultáneamente. Por ejemplo:

<p class="claseUno"> ... contenido ... </p>

<p class="claseUno claseDos"> ... contenido ... </p>

Cuando utilizamos varias clases juntas, simplemente las separamos con un espacio.

Supongamos que tenemos dos clases, con una definimos el color y con la otra el tipo de fuente:

<style>
   .claseFuente {font-size: 20px; font-family: Tahoma;}
   .claseColor {color: lightblue;}
</style>

Un párrafo con la clase llamada claseColor, mostrará el texto con el color que hayamos elegido y con la fuente por defecto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Un párrafo con la clase llamada claseFuente, mostrará el texto con el color por defecto y con la fuente que hayamos determinado:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Un párrafo con las dos clases claseColor y claseFuente, mostrará el texto con el color y con el tipo de fuente definidas en ambas:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

¿Y si ambas clases tienen propiedades similares?

Supongamos que tenemos una clase que define al color como rojo y otra como verde.

<style>
   .claseColorVerde {color: lightgreen;}
   .claseColorRojo {color: lightCoral;}
</style>

Si el atributo es class="claseColorRojo claseColorVerde" veremos esto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Y si el atributo es class="claseColorVerde claseColorRojo" veremos esto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

¿No hay diferencias? ¿Por qué no sale verde?

Porque el orden en que las coloquemos en el atributo es indiferente.

Cuál es la regla que se ejecutará depende de la forma en que las hayamos definido en la etiqueta STYLE. En este caso siempre se verá en rojo porque aparece después; si el orden fuera:

<style>
   .claseColorRojo {color: lightCoral;}
   .claseColorVerde {color: lightgreen;}
</style>

Siempre se verá en verde porque la prioridad la tendrá la última que hayamos definido.

Este tipo de combinaciones es bastante común en las plantillas de Blogger y es algo que a veces puede causar problemas a la hora de cambiar algo si no tenemos en cuenta esas combinaciones.

¿Para qué sirve esto? Como cualquier otra herramienta, depende de como la usemos. Por ejemplo, algo que puede ser útil es crear una clase que contenga un recuadro de algún tipo y aplicarla a diferentes elementos que ya tienen propiedades:

<style>
.claseRecuadro {
   padding: 10px;
   color: white;
   background: #336699;
   border-top: 2px solid Silver;
   border-bottom: 4px groove DarkSlateBlue;
   border-left: 5px ridge LightBlue;
   border-right: 5px groove DarkSlateBlue;
}
</style>

Así se vería un párrafo con cualquier clase:

<p class="unaClaseCualquiera"> ... contenido ... </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Y así se vería el mismo párrafo si le "sumamos" claseRecuadro:

<p class="unaClaseCualquiera claseRecuadro"> ... contenido ... </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.