Clases CSS

Es normal querer definir unos estilos globales en hojas externas que homogenicen el aspecto de nuestras páginas, y luego, en una página concreta querer variar el estilo en alguna etiqueta concreta.

Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta.

Pero también puede suceder que esta definición de un estilo concreto queramos aplicarla a otra etiqueta.

Una clase es una definición de un estilo que en principio no está asociado a alguna etiqueta HTML, pero que podemos asociar a etiquetas concretas.

Para ello, en primer lugar definimos la clase:

.nombre_de_nuestra_clase {valor1: valor; valor2:valor, etc..}

Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y definiendo el estilo como lo definimos para cualquier otra etiqueta: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Además, podremos definir cuantas clases necesitemos.

Para aplicar el estilo de una clase a una etiqueta utilizamos el parámetro CLASS:

Donde nombre_de_nuestra_clase es el nombre que le hemos dado a la clase, sin el punto.

Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier etiqueta de HTML. El estilo no se vincula a una etiqueta concreto sino a una 'clase'.

Esta clase, actua como atributo de cualquier etiqueta, cada vez que se quiera llamar a ese estilo, basta con incluir el nombre de esa clase dentro de la etiqueta correspondiente.

<HTML>
<HEAD>
<TITLE>Titulo</TITLE>

<STYLE TYPE="text/css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blue;}
</STYLE>

</HEAD>
<BODY>

<H1 CLASS="nuevaclase">Este texto aparece en rojo</H1>

<H1>Este texto aparece como un H1 normal</H1>

<H1 class="nuevaclase2">Este texto aparece en blue</H1>

<P class="nuevaclase">Este texto aparece en rojo</P>

</BODY>
</HTML>

Se pueden establecer clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos, por ejemplo:

H1.clase1 {font: 15px; color: red;}

H1.clase2 {font: 15px; color: blue;}

H1.clase3 {font: 15px;color: green;}

Esto se transformaría a nivel de código:

<H1 CLASS="clase1 ">Este texto se vería en color rojo</H1>

<H1 CLASS="clase2">Este texto se vería en color blue</H1>

<H1 CLASS="clase3">Este texto se vería en color green</H1>