Una clase en CSS es una forma de agrupar propiedades que luego pueden ser aplicadas a un elemento específico usando su atributo "class". Estos grupos reciben nombres y pueden ser definidos exclusivamente para un elemento o para cualquiera. Para definir una clase, los autores deben escribir el elemento para el cual está declarado, seguido por un punto y el nombre de la clase. El bloque de propiedades va encerrado entre llaves como en los ejemplos anteriores.
En el siguiente ejemplo definiremos tres clases: la primera llamada "importante" para el elemento "p", la segunda llamada "diminuto" para todos los elementos y la tercera llamada "grande" para todos los elementos también.
p.importante {
color: red;
}
*.diminuto {
font-size: 8px;
}
.grande {
font-size: 12px;
}
color: red;
}
*.diminuto {
font-size: 8px;
}
.grande {
font-size: 12px;
}
Nota que el uso de un asterisco en lugar del elemento indica que esta clase puede ser aplicada a cualquier elemento (es lo mismo que no usar nada). También ten en cuenta que la primera declaración no especifica que la clase debe ser automáticamente aplicada a los elementos "p" del documento; sólo los elementos "p" con el valor "importante" en su atributo "class" serán afectados por este estilo.
Usando el atributo "class"
Usemos el ejemplo anterior para mostrar como aplicar las propiedades agrupadas en las clases a los elementos en un documeto HTML. En el siguiente ejemplo, aplicaremos las tres clases a tres párrafos respectivamente.
<p class="importante">Texto importante</p>
<p class="diminuto">Este texto será muy pequeño</p>
<p class="grande">Este, en cambio, será grande</p>
<p class="diminuto">Este texto será muy pequeño</p>
<p class="grande">Este, en cambio, será grande</p>
Recuerda que la clase "importante" ha sido solo definida para el elemento "p" de modo que ha funcionado bien en el ejemplo anterior, pero no funcionará si la apllicamo a otro elemento (como por ejemplo una tabla, tag HTML table).
<a class="importante" href="ejemplo">Ejemplo de su uso</a>
En este caso, el agente de usuario intentará encontrar una clase con el nombre "importante" que haya sido definida para el elemento "a" (a.important {...) o para todos los elementos (.important {...). como no existe ninguna clase con esa definición, ninguna propiedad se aplica al elemento.
el atributo "class" también soporta listas de clases separadas por espacios como valor, lo cual puede ser muy útil para aplicar muchas propiedades de diferentes clases a un solo elementos de una vez.
<p class="importante grande">Texto important y grande</p>
Este párrafo no solo tendrá un color rojo (de la clase "importante") sino que además tendrá un tamaño de fuente de "12px" (de la clase "grande").
