Las hojas de estilo repesentan un gran avance con respecto a cómo los diseñadores de páginas Web pueden aumentar grandemente su capacidad de mejorar la apariencia de sus páginas.

En su origen el Web fue concebido en un entorno científico, como un medio de intercambio de documentación, en el que lo esencial era el contenido, siendo la presentación algo completamente accesorio. Pero a medida que el Web era descubierto por toda clase personas como un fantástico medio de difusión, las limitaciones del HTML con respecto al control sobre la presentación se convirtieron en una fuente continua de frustraciones.

Los nuevos diseñadores de páginas Web estaban acostumbrados a los medios tradicionales sobre papel, en los que tenían un control total sobre la apariencia. Han ido aprendiendo a utilizar diversos trucos para suplir las limitaciones estilísticas del HTML. Pero aunque su intención ha sido buena - mejorar la presentación de las páginas - las técnicas empleadas han tenido unos efectos secundarios a menudo desafortunados. Estas técnicas o trucos suelen funcionar para algunas personas, algunas veces, pero nunca para todas las personas y en todos los casos.

Varios ejemplos de estas técnicas son:

Utilización de etiquetas no estándar, inventadas por los creadores de algunos navegadores (como Netscape o Explorer).
Convertir el texto en imagen.
Usar imágenes transparentes para crear espacios en blanco.
Uso de tablas para forzar determinadas presentaciones.
Utilizar programas o lenguajes ajenos al HTML para conseguir determinados fines, etc.

Estas técnicas aumentan considerablemente la complejidad de las páginas del Web, tienen una flexibilidad limitada, y sobre todo, provocan problemas al ser utilizados por distintos navegadores o plataformas.

Las hojas de estilo devuelven la facilidad de controlar la presentación y sobrepasan la limitada gama de mecanismos de presentación que se han ido añadiendo al HTML durante estos últimos años. Por ejemplo, con ellas es fácil determinar el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el grosor de los márgenes, los colores usados para el texto o el fondo, así como el fomateo a voluntad de cualquier etiqueta.

Además hay otro aspecto muy interesante de las hojas de estilo, y es que separan por completo la información para la presentación de una página de su contenido, con lo que se facilita mucho el diseño y revisión de las páginas, pues se puede variar la presentación de una página, o de todo el conjunto de ellas, sin cambiar una sola línea del código del HTML.

Como veremos más adelante, se pueden definir variaciones de diseño por medio de las "clases". Por ejemplo, si se necesitan cinco estilos de párrafos diferentes, se pueden definir cinco clases para la etiqueta <P> : P.normal, P.indentado, P.subrayado, P.rojo y P.dobleespacio.

En este capítulo se hace una introducción a las hojas de estilo, pues se trata de un tema muy extenso. En los siguiente capítulos se verán con detalle los distintos atributos y valores así como distintos consejos para su mejor utilización.

�Qué navegadores las soportan?

Debido a que se trata de una reciente innovación, hay un soporte todavía limitado para las Hojas de estilo en cascada. Actualmente sólo lo soportan el Explorer 3.0 en adelante, así como el Netscape 4.0 en adelante.

Otros navegadores, o las versiones más antiguas de los anteriormente mencionados, simplemente lo ignorarán.

Las Hojas de estilo todavía no han sido incorporadas al vigente estándar del HTML , el HTML 3.2, pero lo van a ser en el próximo, el HTML 4.0, del cual se ha publicado ya un borrador. En concreto, la documentación referida a las Hojas de estilo se puede encontrar en esta página.

�Cómo funcionan?

Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una página del Web.

Todos los navegadores tienen sus reglas. Así, por ejemplo -como vimos en el capítulo 1, el HTML define que las cabeceras del nivel uno (el texto que está entre las etiquetas <H1> y </H1>) se muestre como un texto alineado a la izquierda, un par de puntos mayor que el resto, en negrita y en la fuente Times Roman.

Ejemplo: <H1> Cabecera de nivel 1 </H1> se verá como:

Cabecera de nivel 1

Cada etiqueta define sus propias reglas para mostrar el texto que engloba. Con las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta.

Hay tres maneras de añadir estilos a nuestras páginas Web.

Añadiendo instrucciones de estilo sólo a etiquetas concretas, o a un grupo de ellas.
Incluyendo las instrucciones de estilo en el documento HTML de una página concreta - de una manera análoga a cómo se incluye un script de Javascript. Esto permite cambiar la apariencia de una hoja entera, cambiando unas pocas líneas.
Enlazando todos documentos HTML de todas las páginas que componen un sitio del Web con un fichero de definición del estilo. De esta manera, se puede cambiar la apariencia de múltiples páginas retocando un solo fichero.

Podemos utilizar en nuestras páginas uno, dos o los tres métodos descritos, como se verá más adelante.

1. Estilo para etiquetas concretas o grupos de etiquetas

Este método es el apropiado si sólo se desea cambiar el estilo en unas secciones determinadas de una página. Con él podemos manipular las propiedades de alguna etiqueta o de algún grupo de etiquetas.

Se hace añadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta correspondiente. Veamos el siguiente ejemplo:

<P>

"Este es un párrafo normal, sin márgenes a la izquierda ni a la derecha, con el color de su texto en negro".

"Quiero que este otro párrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho. Además quiero que su texto sea de color verde".

Que se verá (en los navegadores que soportan hojas de estilo) de esta manera:

"Este es un párrafo normal, sin márgenes a la izquierda ni a la derecha, con el color de su texto en negro".

"Quiero que este otro párrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho. Además quiero que su texto sea de color verde".

Como se ve en este ejemplo, hemos variado la manera de cómo se comporta habitualmente la etiqueta <P>. Podíamos haber conseguido otras muchas más cosas, como se verá más adelante.

Obsérvese la sintaxis del atributo STYLE. Se ponen entre comillas una serie de propiedades (por ejemplo, margin-left), y después de dos puntos se pone el valor de esa propiedad (en este caso, 0.5in o sea, 0.5 pulgadas). Las distintas propiedades deberán estar separadas por punto y coma.

Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas), se puede utilizar la etiqueta <DIV>, con la que definimos el estilo globalmente para esa sección.

En el siguiente ejemplo cambiamos el color (a rojo) y el tamaño de la fuente (a 16 puntos de altura) de un bloque de etiquetas por medio de la etiqueta <DIV>, lo que tiene el mismo efecto que si hubiéramos asignado este estilo separadamente a cada una de las etiquetas englobadas (<P>, <UL> y <LI>):

<DIV STYLE="font-size: 16pt; color: red"> <P>La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas. <P>Este texto también es rojo y tiene 16 puntos de altura. <P>Al igual que esta línea. </DIV>

Que se ve de la siguiente manera:

La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.

Este texto también es rojo y tiene 16 puntos de altura.

Al igual que esta línea.

�Qué ocurre si a una de las etiquetas englobadas por DIV le introducimos un estilo distinto? Comprobémoslo introduciendo un estilo propio a la segunda etiqueta <P>:

<DIV STYLE="font-size: 16pt; color: red"> <P> Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la etiqueta de cierre de DIV. <P STYLE="color: blue">Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo. <P>Esta otra cumple con el estilo de DIV, porque no tiene estilo propio. </DIV>

Este es el resultado:

Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.

Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.

Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.

Como se comprueba en este caso, el estilo dentro de una etiqueta concreta tiene precedencia sobre el estilo del bloque, impuesto por DIV.

Aquí comenzamos a ver la noción de precedencia de unos métodos sobre otros, que como hemos visto antes, son muy variados. Este es el motivo de que se llamen Hojas de Estilo en Cascada (hay una cascada de métodos para aplicar los estilos, teniendo un orden de precedencia riguroso de unos sobre otros). Se verá esto más adelante.

Hay otra etiqueta, <SPAN>, que tiene una misión parecida a <DIV>, pero que se usa para cambiar elementos más pequeños (por ejemplo, palabras o incluso letras), en lugar de bloques enteros. Por ejemplo:

<P> En este párrafo sólamente queremos atribuir un estilo a esta <SPAN STYLE="font-family: courier;font-size: 15pt;color: fuchsia">palabra</SPAN>, que queremos que su fuente sea courier, de 15 puntos de altura y de color fucsia.

Resultado:

En este p�rrafo sólamente queremos atribuir un estilo a esta palabra, que queremos que su fuente sea courier, de 15 puntos de altura y de color fucsia.

Este método de introducir el estilo en etiquetas concretas o en conjuntos de etiquetas es sencillo de aplicar (como hemos visto), y es el adecuado si sólo se desea hacer algún cambio puntual en una página. Sin embargo, no es un adelanto muy grande con respecto al HTML, donde existen etiquetas que hacen funciones similares.

Además, si se desean hacer cambios, hay que examinar todo el documento en busca de etiquetas dispersas. Si se desean hacer cambios globales a una o más páginas son más conveniente los otros dos métodos que veremos a continuación.

2. Inclusión global del estilo en un documento HTML

Se hace poniendo un bloque de instrucciones dentro de las etiquetas <STYLE> </STYLE>, que deberá estar colocado dentro de la cabecera del documento, después del título, entre las etiquetas </TITLE> y </HEAD> (de igual manera que se hace con los scripts de Javascript).

Esta etiqueta <STYLE> tiene un atributo, TYPE, que especifica el tipo de medio en que va a ser publicado en Internet, en nuestro caso será "text/css" (que permitirá a los navegadores que no soporten este tipo el ignorar la hoja de estilo). Es decir, la etiqueta queda de esta manera: <STYLE TYPE="text/css">

Por tanto, la estructura será la siguiente:

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

<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>

</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la página]
</BODY>
</HTML>

Veamos ahora con un ejemplo, cómo se escribe el bloque de instrucciones del estilo, incluido dentro de la etiqueta <STYLE> (en el capítulo siguiente se ve con detalle cada uno de los atributos):

<STYLE TYPE="text/css">
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>

Como se ve en este ejemplo, se ponen las distintas etiquetas a las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y DIV, pero podrían haber sido otras cualesquiera); a continuación del nombre de cada etiqueta, y englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores, separadas unas de otras por un punto y coma.

Si se coloca este bloque en la cabecera del documento HTML, donde se ha indicado antes, veremos que cada vez que se usa una de las etiquetas que tienen una definición de estilo, no se comportará de la forma habitual, sino tal como la hemos definido. El resto de las etiquetas, que no están incluidas en el bloque de definición del estilo, se comportarán de la forma habitual. Puede comprobarse lo dicho, viendo una página a la que se le ha aplicado el estilo del ejemplo anterior.

3. Enlazando distintos documentos a una hoja de estilo

Si nuestro sitio del Web está compuesto por muchas páginas, y queremos darles un estilo uniforme a unas cuantas, en vez de incluir un bloque de definición de estilo repetido en cada una de ellas (como se ha visto en la sección anterior), se puede establecer un enlace a un fichero de texto que contiene el bloque de definición del estilo.

Supongamos que queremos aplicar a unas cuantas páginas el estilo visto en el ejemplo anterior. Tendríamos que crear un fichero de texto como este:

BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}

Obsérvese que no tiene ninguna etiqueta, pues no es un documento normal HTML, sino que es un fichero de texto que sólo contiene el bloque de definición del estilo.

Se guarda con el nombre que se quiera, pero tiene que tener necesariamente la extensión .css Supongamos que lo guardamos con el nombre de miestilo.css

En todas las páginas que queremos que tengan este estilo concreto, sólamente deberemos de añadir (en el mismo sitio de la cabecera que para el caso anterior, es decir entre </TITLE> y </HEAD>, la siguiente etiqueta:


<LINK REL=stylesheet HREF="miestilo.css" TYPE="text/css">

Aquí se ha supuesto que el fichero miestilo.css se ha dejado en el mismo directorio donde están los documentos HTML. Si no es así, es decir, si está en otro subdirectorio en el servidor, habría que indicar la ruta (por, ejemplo: HREF="subdirectorio/miestilo.css").

Un ejemplo de este método lo constituye este manual, en donde todos los capítulos están enlazados con un fichero que contiene la hoja de estilo para todos ellos, llamado wmstyle.css (se puede ver en esta página su texto).

Mezclando los métodos

Como se ha visto anteriormente, hay tres métodos de aplicar las hojas de estilo en cascada.

�Se pueden aplicar más de uno a la vez en una misma página?

Sí. Por ejemplo, en la confección de este manual se utilizan simultáneamente algunos de ellos. En las páginas del índice y de la portada se utilizan el segundo método (inclusión de la hoja de estilo en el documento HTML) y también el primero (inclusión del estilo en etiquetas concretas). Y en la totalidad de los capítulos se utilizan el tercero (enlace a la hoja de estilo) y el primero.

�Qué ocurre si hay información contradictoria entre ellos?

Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de precedencia, es decir, cuál prevalecerá sobre el otro si dan órdenes contradictorias sobre un aspecto concreto.

El orden de precedencia es el siguiente (de mayor a menor):

Estilo dentro de una etiqueta.
Bloque de estilo en la cabecera del documento.
Enlace a un fichero que contiene la hoja de estilo.

Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de una etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.

Lo más práctico es utilizar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, utilizar el primero o el segundo.