Clases

Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto que significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:

P.verde {color: green; margin-left: 30px;}

sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">. Así de sencillo.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID. Por ejemplo:

all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}

Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1">será azul:

Este párrafo es muy verde.

Y anda que este...

Sin embargo, este no, fíjate que curioso.

Etiquetas <SPAN> y <DIV>

Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta<SPAN> y <DIV>.

El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo"> y </DIV>.

La diferencia entre ambas es que, mientras SPAN realmente no hace nada por sí misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final). Veremos en el siguiente capítulo que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo entero) se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo, si definimos las siguientes hojas:

all.titulo {
  margin-top: -24px;
  color: blue;
  font-size: 20px;
}
all.sombra {
  margin-top: 2px;
  margin-left: 2px;
  color: black;
  font-size: 20px;
}

cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente código HTML:

<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>

obtendremos este bello efecto:

El maravilloso curso de HTML

El maravilloso curso de HTML

En el siguiente capítulo tenéis una guía de referencia con todos (o casi todos) los atributos que se pueden modificar con CSS.