¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS.
Veamos primero como trabaja el código HTML. En HTML, las etiquetas (tags) le indican al navegador los elementos que componen la página y éste aplica el formato a cada elemento en particular, por ejemplo:
<H1>Título
</H1>
especifica que el texto "Título" es un Encabezado (Heading) de nivel 1 dentro de los 6 niveles definidos por HTML. El navegador aplicará a ese texto el formato predeterminado (que varía un poco si se trata de Internet Explorer, Netscape, o si usamos Windows, Mac o Linux).
Si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central, deberíamos especificarlo del siguiente modo:
<H1 ALIGN="center">
<FONT FACE="Arial" COLOR="#0000FF" SIZE="5">
Título
</FONT>
</H1>
Por supuesto, esto debería repetirse en cada encabezado H1 de cada página de nuestro sitio.
Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato de la página (en realidad, a veces pueden hacerlo, como veremos más adelante). En su lugar, usan un archivo de texto puro con extensión .CSS que luego se vincula a la página.
Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.
Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central, el archivo CSS debería contener el siguiente texto:
H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center; }
Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:
<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">
El elemento LINK especifica:
Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo de la CSS tendrán el aspecto que hemos definido.
Hemos visto cómo las reglas de estilo se especifican en un archivo externo. Este método es el más recomendable y el que permite mayor flexibilidad: los estilos pueden cambiarse sin tocar el código HTML y la CSS puede ser compartida por varias páginas.
También existe la posibilidad de poner la hoja de estilo dentro
de una página HTML usando el elemento STYLE
.
<HTML> <HEAD> <TITLE>CSS incrustada
</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Título color azul
</H1> <P>Un párrafo cualquiera...
</BODY> </HTML>
Como se ve en el ejemplo, el elemento STYLE
se usa dentro del
encabezado (<HEAD></HEAD>
) de la página, especificando
el tipo de hoja de estilo:
<STYLE type="text/css">
H1 { color: blue } ... (aquí se agregan todas las reglas de estilo) ...</STYLE>
Este método permite aplicar la hoja de estilo solamente a la página que la contiene. Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en nuestro sitio tenemos algunas pocas páginas que usan un formato distinto al resto.
En muchos casos convendrá usar ambos métodos simultáneamente: poner un link a una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en la que solamente deberemos definir las reglas específicas para esa página. Por las leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada) con distintos valores, tiene preponderancia la definida en la hoja incrustada.
Por último, también es posible aplicar el estilo directamente en la etiqueta HTML:
<P STYLE="text-align: left; text-indent: 1em">
Por supuesto, la definición del estilo dentro de la propia etiqueta (tag) no es la manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del último ejemplo constituye por sí misma una hoja de estilo por lo que debemos declarar en el encabezado de la página el tipo de CSS que estamos usando.
<STYLE type="text/css"></STYLE>
Esta declaración no será necesaria si en la misma página estamos usando una hoja de estilo incrustada o si existe una referencia a una hoja externa.
Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al modo usado en el código HTML, pero con dos importantes diferencias:
Esto significa que si en nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:
<P align="center">
El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más fuerza que el formato aplicado con HTML.
Si consideramos los ejemplos anteriores, resultan evidentes algunas ventajas:
En cuanto a las desventajas en el uso de las Hojas de Estilo, la única de importancia es el soporte irregular que tienen las CSS por parte de los navegadores. Ciertas propiedades que funcionan en un browser no funcionan en otros, o existen diferencias en un mismo navegador según sea para Windows o Mac. También existen diferencias entre distintas versiones de un mismo browser.
Esto puede provocar que:
Debe entenderse que las Hojas de Estilo fueron diseñadas para permitir que los autores influyan en la composición de la página, pero no para que la controlen. Una CSS sugiere al browser un estilo de composición para el documento pero no puede forzarlo a aplicar un formato determinado.
Las Hojas de Estilo son una herramienta que puede resultar muy efectiva para lograr una presentación atractiva de la página siempre que la página no sea dependiente de la Hoja de Estilo. Se debe considerar en todo momento aquellos navegadores que no soportan CSS, cuidando que los mismos puedan mostrar la página correctamente y en su totalidad aún cuando nuestras reglas de estilo no sean aplicadas.
En este sentido, espero que esta guía de uso de las CSS ayude no sólo a conocer el lenguaje de las Hojas de Estilo sino también a aplicarlas con el mayor beneficio.