Las hojas de estilo (CSS) son una tecnología que nos permite controlar la apariencia de una página web. Con CSS podemos especifiar el aspecto final para todos
los componentes de HTML: las fuentes, los párrafos, la página...
El lenguaje de las hojas de estilo está definido en la especificaciones del World Wide Web Consortium (W3C). Es, por tanto, un estándar internacional.
El estilo CSS se puede asociar a un documento HTML de tres maneras:
Directamente en la etiqueta correspondiente. Por ejemplo, una instrucción sobre el tamaño de la fuente de un título se asocia directamente a la etiqueta
<H1>.
En la cabecera del documento (<HEAD>) pueden agruparse todas las especificaciones utilizadas en el documento, de modo que no es
necesario repetirlas en cada etiqueta.
En un documento independiente (un archivo de extensión *.css). Ésta es, lógicamente, la manera más aconsejable de trabajar. Así, por
ejemplo, modificando el archivo CSS se consigue modificar la apariencia de todas sus páginas asociadas. Un magnífico ejemplo de la potencia de CSS se encuentra
en la página de Zen Garden.
Vamos a estudiar, en primer lugar, estas tres maneras de asociar elementos CSS en un documento HTML.
1. Asociar estilo a una etiqueta
Asociar una especificación de estilo directamente en una etiqueta es la manera tal vez más sencilla de trabajar, pero la menos recomendable.
Cada elemento HTML tiene un estilo por defecto. Pero, con el atributo style, dicho estilo puede ser modificado.
Vamos a modificar, por ejemplo, el color de los caracteres del estilo Título 1 (es, decir, <H1>).
EJEMPLO 1
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 style="color:#ff0000">Este título es de color rojo.</H1>
</BODY>
</HTML>
Debe quedar claro que las especificaciones de style aplicadas a una etiqueta sólo funcionan en dicha etiqueta. Si queremos que afecte
a todas las etiquetas iguales del documento, debemos repetir la especificación en cada una de ellas.
2. Asociar estilo en la cebecera de un documento
En la cebecera de un documento HTML pueden indicarse todas las especificaciones de estilo que han de funcionar en dicha página. De esta manera evitamos tener
que repetirlas en todas y cada una de las etiquetas.
Para ello, el elemento style se trata de manera opuesta, por así decir, a como se trataba en el procedimiento anterior:
Style ya no es el atributo de otra etiqueta (por ejemplo, de <H1>), sino una etiqueta principal.
Las que antes eran las etiquetas principales se tratan ahora como los atributos de la etiqueta principal style.
El valor indispensable de esta etiqueta es <STYLE="TEXT/CSS">
El siguiente ejemplo muestra cómo se especifican los estilos de los dos primeros títulos:
EJEMPLO 3
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {color:#ff0000;background-color:#00ffff}
H2 {color:#ff00ff}
</STYLE>
</HEAD>
<BODY>
<H1>Así queda el Título 1.</H1>
<H2>Así queda el Título 2.</H2>
</BODY>
</HTML>
Los elementos (H1 y H2, en este caso) se colocan seguidos unos de otros, habitualmente en líneas independientes. Sus especificiones se colocan entre
corchetes y sin comillas. (Los códigos ASCII de los corchetes son ALT+123 para el izquierdo y ALT+125 para el derecho.)
De esta manera, todas las especificaciones comunes a todas las etiquetas del documento se especifican una sola vez. Ahora bien, estas indicaciones deberán
repetirse en todos los documentos que queramos que compartan el mismo estilo.
3. Asociar estilo por medio de un archivo externo
El método más potente –y por tanto el más utilizado– de asociar una serie de especificaciones de estilo a un documento HTML es por medio de un
archivo externo.
Las ventajas de este procedimiento son claras:
Basta con escribir una sola vez las instrucciones de estilo, porque una sola página CSS puede aplicarse a múltiples documentos HTML.
Pueden crearse distinos estilos (en otros tantos ficheros CSS), y asociarlos con facilidad a distintos documentos HTML.
Modificando el archivo CSS se puede obtener un cambio radical en los documentos HTML, sin necesidad de modificarlos.
Resulta mucho más ordenado para el editor web manejar separadamente el contenido y la apariencia.
En primer lugar, debemos guardar las especificaciones deseadas en un archivo de extensión CSS. Por ejemplo, archivamos las instrucciones del ejemplo anterior en
el fichero ESTILOBIRRIOSO.CSS:
Ahora debemos asociar este fichero al documento pertinente. Esto se realiza con la siguiente instrucción en la cabecera del HTML: <link rel="StyleSheet" href="NOMBRE_DEL_FICHERO.css" type="text/css">
El atributo rel sirve para relacionar el documento HTML con la hoja de estilos. El atributo type indica que el
archivo es de extensión CSS. Por último, el atributo href indica el path del fichero.
El siguiente ejemplo produce el mismo resultado que el ejemplo anterior, pero por medio de un archivo externo:
EJEMPLO 4
<HTML>
<HEAD>
<LINK REL="Stylesheet" HREF="estilobirrioso.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Así queda el Título 1.</H1>
<H2>Así queda el Título 2.</H2>
</BODY>
</HTML>
En este primer capítulo hemos repasado las tres posibles maneras de asociar estilos en un documento HTML. A partir de ahora, asumimos que
las instrucciones de estilo irán siempre en un archivo independiente.
Las instrucciones de estilo que hemos manejado en estos ejemplos han sido muy básicas: tan sólo indicaciones de color de fuente. En los
capítulos siguientes iremos presentando las principales opciones de estilo de los archivos CSS.
