CSS 2.1: Introducción

Puesto que la idea básica del W3C era mantener separados el contenido de un documento y sus elementos estéticos, CSS se desarrolló como un lenguaje destinado a la aplicación de los atributos de HTML que tenían que ver con el aspecto visual de las páginas web. La actual especificación 2.1 (inglés), en el momento en que escribo esto ha sido revisada el 19 de julio de 2007, pero en realidad ésta no es más que una ampliación y revisión de la especificación CSS 2 (inglés), de mayo de 1998.

Las hojas de estilos se pueden aplicar a documentos XML, HTML y XHTML. En el caso de estos dos últimos, se puede hacer a través del elemento style en el propio documento, pero este sistema es poco funcional, dado que para hacer modificaciones masivas, habría que modificar cada documento por separado. Para evitar esto, se suele vincular un archivo externo con la extensión .css:

    <link href="estilo.css" rel="stylesheet" type="text/css" />
            

Es posible vincular diversas hojas de estilo a un mismo documento, bien para ofrecer alguna alternativa accesible —como un estilo de alto contraste, una presentación a una columna, etc.—, o bien para especificar al medio al que se aplica la CSS:

    <link href="estilo.css" rel="stylesheet" type="text/css" />
    <link href="estilo_contraste.css" rel="alternate stylesheet" type="text/css" />
    <link href="estilo_linear.css" rel="alternate stylesheet" type="text/css" />
            

En los navegadores ajustados a estándares —como Firefox u Opera a partir de su versión 9—, los usuarios cuentan con un menú a través del que pueden elegir la hoja de estilo. Para describirlas en este selector basta con asignarles un atributo title. En Internet Explorer no hay tal selector, ni siquiera en la versión 7.

    <link href="estilo.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="imprimir.css" rel="stylesheet" type="text/css" media="print" />
            

En este caso, ambas hojas de estilo comparten el atributo rel, pero se diferencian en el atributo media; la primera se aplica a la página cuando aparece en una pantalla, y la segunda a su salida por impresora. Hay una amplia lista de dispositivos que se pueden seleccionar definida por el W3C¹, sin embargo sólo estos dos específicos tienen un soporte consistente y amplio entre los navegadores actuales.

Hay un método alternativo para incluir una hoja de estilo en un documento, y es por medio de la sintaxis @import url(estilo.css); sin embargo, es un medio menos flexible, porque no permite definir hojas alternativas, y porque los navegadores antiguos no lo reconocen. Puede ser útil, sin embargo, para incluir hojas de estilo dentro de otras hojas de estilo.

Notas

1. Concretamente son all —todo dispositivo; es el valor por defecto—, aural —sintetizadores de voz—, braille —dispositivos de respuesta táctiles de braille—, embossed —impresoras braille—, handheld —dispositivos de mano—, print —impresoras—, projection —proyectores—, screen —pantallas—, tty —para dispositivos de parrilla de caracteres fija, como los teletipos— y tv —televisión—. También existen grupos de medios para especificar de una forma resumida varios de estos dispositivos. Para más información, la sección Media Types de CSS 2.1 (inglés).