Introducción a las CSS

Qué son las Hojas de Estilo

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.

Volver

Cómo funcionan

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).

Probar

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.

Probar

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;
}

Probar

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:

el tipo de vínculo: a una hoja de estilo ("stylesheet")
la ubicación de la hoja de estilo a través del atributo "href"
el tipo de hoja de estilo que se vincula: "text/css"

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.

Volver

Hojas de estilo incrustadas

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.

Volver

Hojas de estilo en línea

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:

El conjunto de propiedades que se pueden aplicar es mucho mayor y
Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen preferencia por sobre los formatos aplicados con HTML.

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.

Probar

Volver

Ventajas (y desventajas) de las Hojas de Estilo

Si consideramos los ejemplos anteriores, resultan evidentes algunas ventajas:

Con una Hoja de Estilo podemos alterar la presentación de cada elemento sin tocar el código HTML, ahorrando esfuerzo y tiempo de edición. Si quisiéramos alinear a la izquierda los encabezados H1 de nuestras páginas, bastaría con cambiar en la CSS la declaración "text-align: center" por "text-align: left" e inmediatamente cada H1 se alinearía a la izquierda en todas las páginas vinculadas a la Hoja de Estilo. De este modo no sólo simplificamos el mantenimiento del sitio sino que además reducimos las posibilidades de cometer errores.
El lenguaje de las CSS ofrece herramientas de composición más potentes que HTML. Hemos especificado en los ejemplos una fuente alternativa genérica (Sans-serif) para el caso de que la máquina del usuario no contenga la Arial (en HTML no existen estas fuentes genéricas). Con HTML, el tamaño de la fuente se especifica con un sistema de medidas predeterminadas por el browser (en el ejemplo, SIZE=5), con las CSS hemos especificado el tamaño en puntos tipográficos (y podemos hacerlo en cm, pixeles, cuadratines, altura de la x, etc.). Más aún, las CSS permiten aplicar prácticamente todas las propiedades a cualquier elemento de la página, mientras que HTML sólo permite un número limitado de propiedades para cada elemento.
Probar
Se evita tener que recurrir a trucos para conseguir algunos efectos. Con CSS no es necesario usar imágenes invisibles para hacer una sangría (la propiedad text-indent se encarga de eso) o usar una tabla para ubicar un elemento en determinado lugar de la pantalla (las CSS permiten posicionar con precisión cualquier elemento).

Además
El lenguaje de las Hojas de Estilo, aunque muy potente, es relativamente sencillo y fácil de aprender.
Los documentos que usan CSS generalmente resultan más compactos.
Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada de estilos con la información de cada una.
Pueden usarse con otros lenguajes de programación (como JavaScript) para conseguir efectos dinámicos en las páginas.
Se pueden especificar Hojas de Estilo para diferentes navegadores y tipos de medios (impresos, braille, auditivos, etc.).
El usuario con alguna discapacidad (o simplemente por preferencias) puede definir su propia Hoja de Estilo y la regla !important obliga a su navegador a suplantar la Hoja de Estilo del autor.
Por cierto, existen otras ventajas muy importantes pero, como esto ya se parece a un folleto de ventas, terminaré aquí la lista de elogios. Ver

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:

Nuestra página sea visualizada por el lector con un formato no deseado por nosotros. En todo caso, el navegador aplicará el formato predeterminado y nuestro trabajo de composición habrá sido inútil.
Algunas propiedades de las CSS (como las que afectan la posición o visibilidad de los elementos) pueden provocar que una parte del contenido de nuestra página resulte inaccesible desde ciertos navegadores si no son utilizadas correctamente.

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.

Volver

1.1 Introducción a las CSS
	Anterior		Siguiente