1. Introducción

Atrás quedaron los años en que diseñar una página web consistía en juntar en un caldero todo tipo de etiquetas, mezclando el diseño de estructura con el formato. En la actualidad ambas partes están muy separadas.

2. Hojas de estilo

Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web.

Sabemos que una regla CSS se puede aplicar mediante el uso del parámetro style. Por ejemplo, la línea:

<h1 style="color:blue">Bienvenidos </h1>

Mostrará un título de color azul.

Ese método funciona correctamente, pero es difícil de mantener. En un documento con 50 títulos tendríamos que aplicar el formato a cada uno de ellos. ¿Y si después nos cansamos y los queremos poner todos verdes? Tendríamos que modificarlos todos. Por este motivo, las hojas de estilo se suelen aplicar de otra manera: como elementos dentro de la cabecera de la página web y mejor aún, en archivos externos. Así se recopilan todas las reglas en un mismo espacio, haciendo que sea más sencillo su mantenimiento y modificación.

De este modo, una regla que hiciese exactamente lo mismo quedaría así:

<style type="text/css">
h1 {color:blue;}
</style>

Las líneas anteriores, situadas en la cabecera (entre <head> y </head>) de la página harían que se cambiasen de color todos los <h1> de nuestra página. Como se puede observar es más rápido y más sencillo. Incluso el mantenimiento de la página se vuelve trivial, ya que el cambio de color se reduciría a poner green (verde) donde ahora pone blue (azul).

3. Clases e identificadores

Pensemos ahora en una página en la que queremos cambiar la apariencia de algunos <h1>, pero no de todos. ¿Cómo lo conseguiríamos? Para ello tenemos un parámetro general de HTML denominado class ("clase" en español, en el sentido de "tipo"). Este parámetro nos sirve para crear un conjunto de etiquetas que forman parte del mismo grupo. El objetivo es que luego podremos referirnos a esa clase de forma conjunta.

En este ejemplo tenemos tres títulos diferentes:

<h1>Bienvenidos</h1>
<h1 class="capitulos">Capítulo 1</h1>
<h1 class="capitulos">Capítulo 2</h1>

Dos de ellos los hemos agrupado dentro de una clase llamada "capítulos". Gracias a ello podemos modificar sólo su apariencia, diferenciándolos del resto de los títulos del documento. Para referirnos a la clase, emplearíamos el signo de punto (.).

<style type="text/css">
h1 {color:blue;}
.capitulos { font-family: sans-serif; text-decoration: underline;}
</style>

Al probarlo en un navegador, obtendríamos el siguiente resultado:

Es decir, ahora tenemos dos tipos de títulos: mientras que todos ellos serán de color azul, sólo los que forman parte de la selecta clase "capítulos" tendrán un tipo de letra concreto y estarán subrayados. Por tanto, podemos aplicar normas para todos los títulos o sólo para los de los grupos que generemos.

3.1. Clases dependientes

Las reglas que definimos para una clase pueden ser aplicadas exclusivamente a una etiqueta. Así podríamos tener un par de reglas como éstas:

h1.capitulos { font-family: sans-serif; text-decoration: underline; font-size:14px}
p.capitulos { font-family: sans-serif; text-decoration: underline;}

De este modo podemos reutilizar el nombre de la clase y definir distintos valores, dependiendo de si se aplica a una cabecera o a un párrafo.

3.2. Identificadores

Además de las clases, podemos diferenciar un único elemento entre todos los demás de una página mediante el parámetro id (abreviatura de "identificador"). Con id asignaremos un nombre único que luego podemos emplear en nuestra sección de estilos, precediéndolo en este caso del signo #.

Continuando con el ejemplo anterior, supongamos que tenemos un identificador como éste:

<h1 id="anexos">Anexos especiales</h1>

Podríamos modificar exclusivamente ese anexo mediante la siguiente regla:

#anexos { font-size: 18px; text-align: center; }

El resultado sería el siguiente:

La clave del id es que estamos creando un grupo específico sólo con un elemento. Este modificador tiene otras muchas utilidades, ya que al designar un elemento de forma única dentro de la página web, podremos operar con él mediante JavaScript, aunque eso es otra cuestión.

El sentido de utilizar identificadores, al trabajar con estilos, es mayor cuando pensamos en las hojas externas. Podemos tener un elemento con un identificador que se repite a lo largo de varias páginas. Si nuestros estilos están guardados en un archivo externo, podremos modificar todos esos identificadores con facilidad.

3.3. Identificadores dependientes

Como sucede con las clases, un identificador puede estar definido de forma general o específicamente para una etiqueta concreta. Es distinto esto:

#anexos { font-size: 18px; text-align: center; }

que esto:

div#anexos { font-size: 18px; text-align: center; }

El segundo sólo se aplicaría a un elemento que se llamase así: <div id="anexos"> pero no a uno denominado <h1 id="anexos">

3.4. Combinación de class e id

Se pueden combinar los parámetros class e id en un mismo elemento, con lo que conseguiremos que se le apliquen tanto las reglas definidas para la clase como para el identificador.

Este ejemplo:

<h1 class="capitulos" id="anexos">Bienvenidos</h1>

da como resultado una mezcla de todas las reglas que hemos aplicado hasta ahora, tanto las del elemento <h1>, como las de la clase y las del identificador.

4. Estructura de una regla CSS

Ya hemos visto algunos ejemplos, pero ¿cómo se define una regla CSS? Consta de varias partes:

elemento, clase o id { propiedad: valor ; propiedad: valor ; propiedad: valor ; …}

• En la parte izquierda indicaremos el elemento, la clase o el identificador a modificar.
• En los corchetes estableceremos parejas formadas por una propiedad y el valor que se le va asignar, separando cada pareja por un signo de punto y coma.

Los espacios y los saltos de línea no afectan a las reglas CSS. De hecho, es muy habitual escribir esas instrucciones así:

elemento, clase o id {
    propiedad: valor;
    propiedad: valor;
    propiedad: valor;
    …
}

Se gana en visibilidad y resulta más sencillo localizar las diferentes propiedades.

Ha llegado el momento de que demuestres lo aprendido.

• Crea un nuevo documento HTML y guárdalo como misestilos.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Mis estilos".
• Escribe 10 frases con el texto que tú quieras explicando los estilos que vas a aplicar.
• Crea 10 estilos en la cabecera aplicando TODOS los posibles casos del punto 3, es decir, estilos para una clase normal, otro para una dependiente, otro sólo para un identficador...
• Aplica los 10 estilos en el texto que has escrito.
• No vale usar los de los ejemplos, tienes que cambiar algo.
• Guarda el documento misestilos.htm y súbelo a la plataforma.