Hojas de estilo alternativas

Una página web puede tener enlazadas varias hojas de estilo distintas para que el usuario elija cuál se aplica.

Definir hojas de estilo alternativas

En una página web, la etiqueta <link /> situada en la cabecera (<head>) indica la ubicación y nombre de la hoja de estilo enlazada mediante el atributo href :

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

Se pueden enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas <link /> como hojas enlazadas:

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

En este caso, el navegador aplica simultáneamente las dos hojas de estilo a la página web. Si un elemento está definido en las dos hojas, el navegador hará lo que diga la última hoja de estilo de la lista.


Para que sean hojas de estilo alternativas, es decir, para que el usuario pueda elegir en el navegador qué hoja de estilo quiere aplicar, es suficiente con que los enlaces a las hojas de estilo tengan el atributo title:

<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1" />
<link href="nombre_de_archivo_2.css" rel="stylesheet" type="text/css" title="Hoja 2" />

De acuerdo con la recomendación HTML 4.0, las hojas de estilo alternativas deberían estar definidas de la manera siguiente, pero tanto Firefox como Internet Explorer no lo necesitan:

<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1" />

<link href="nombre_de_archivo_2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2" />

Hojas de estilo alternativas en los navegadores

Hojas de estilo alternativas en Firefox

La selección de hojas de estilo se realiza en Firefox mediante el menú Ver > Estilo de página. Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.

Hojas de estilo alternativas en Google Chrome

Google Chrome no permite elegir hojas de estilo alternativas, aunque se pueden instalar extensiones como AltCSS para añadir esta funcionalidad.

Hojas de estilo alternativas en Internet Explorer

La selección de hojas de estilo se realiza en Internet Explorer mediante el menú Ver > Estilo. Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.