Introducción

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) permiten especificar una serie de propiedades de un elemento, como la fuente y el tamaño del texto o la posición que ocupa en la página.

El uso de estilos permite establecer una separación clara entre el contenido de una página (los elementos que hay en ella) y la presentación de la misma (el aspecto de los elementos).

Esta separación conlleva numerosas ventajas. Hoy en día, por ejemplo, es habitual que una página se muestre en distintos dispositivos como un ordenador de sobremesa, una PDA, un teléfono móvil, etc. Usando una hoja de estilo diferente para cada dispositivo se puede conseguir que la misma página se muestre de forma diferente en cada uno de ellos, adaptándose a sus características particulares.

Definición de estilos mediante hojas de estilo en cascada

Una hoja de estilo define estilos para los elementos HTML. Existen tres formas de definir estilos:

En los dos primeros casos los estilos se definen en el propio documento HTML, mientras que en el último se definen en un documento independiente.

Los tres tipos de estilos se pueden utilizar simultáneamente. En tal caso, los estilos individuales tienen prioridad sobre los genéricos, y éstos a su vez sobre los externos. Esta definición "en cascada" de los estilos es la que da nombre a las hojas de estilo.

Ejemplo: Uso de una hoja de estilo externa

El siguiente ejemplo muestra una página web que utiliza una hoja de estilo externa. Se han utilizado dos hojas de estilo diferentes para la misma página: