Veamos cómo hacer esto.
Definiremos dos hojas, estilo1.css y estilo2.css con los siguientes contenidos:
Fichero 1
/* estilo 1, normal */
body {
font-family: verdana,helvetica;
color: #0000FF; /* texto azul */
background-color: #f8e8a0; /* fondo amarillo */
font-size: 16px;
}
Fichero 2
/* estilo 2, alto contraste, letras grandes */
body {
font-family: verdana,helvetica;
color: #ffffff; /* texto blanco */
background-color: #000000; /* fondo negro */
font-size: 36px;
}
Y ahora hacemos nuestra página, tal que así
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>sin título</title>
<link href="estilo1.css" rel="stylesheet" type="text/css" title="Estilo 1">
<link href="estilo2.css" rel="stylesheet" type="text/css" title="Estilo 2">
</head>
<body>
<h1>Elija una de las siguientes opciones</h1>
<ol>
<li>Opción primera</li>
<li>Opción segunda</li>
<li>Opción tercera</li>
</ol>
</body>
</html>
Si abrimos ahora la página en el navegador, la veremos con el primer estilo aplicado:
Fig 1. Página mostrada con el Estilo 1
Y en el menú Ver / Estilos podemos elegir cambiar a otro estilo
Fig 2. Elegir un estilo diferente en el navegador
Y veríamos el resultado que hemos definido de alto contraste y letras grandes, tal que así:
Fig 3. Página mostrada con el Estilo 2
ALGUNAS EXPLICACIONES
En los atributos "title" hemos puesto los valores "Estilo 1" y "Estilo 2". Si no hubiéramos definido el atributo "title" en alguno de los estilos esto significaría que el estilo es permanente. Esto significa que se aplica siempre, independientemente de otros estilos que se eligieran por el usuario. Si hay enlaces a varias páginas CSS sin "title", se aplicarían todas ellas.
Al incluir el atributo "title", lo que estamos haciendo es indicar que esos estilos son preferidos. Esto significa que se aplican por defecto (en nuestro caso, el "Estilo 1"), pero si el usuario selecciona otra(s) página(s) con título diferente, dejarían de aplicarse las primeras y pasarían a aplicarse todas las que tuvieran el otro estilo (en nuestro caso, el "Estilo 2"). Si dos o más páginas tienen el mismo título, entonces se aplican todas ellas al elegir el estilo correspondiente en el menú Ver del navegador.
Normalmente, hasta aquí suele ser suficiente. Pero el estándar HTML también define otro valor posible para el atributo "rel"
rel="alternate stylesheet"
Aunque no todos los navegadores implementan esto. Básicamente, está indicando que hay otros estilos alternativos, pero, al contrario que los estilos preferidos (que se aplican por defecto, al menos el primero de ellos), los estilos alternativos no se aplican por defecto, sino sólo en el caso de que el usuario lo seleccione explícitamente.
La verdad es que con utilizar estilos con títulos ya tendríamos un sistema de estilos alternativos, así que en general esta etiqueta me parece innecesaria para solucionar situaciones como la planteada al principio. Seguramente pueda idearse algún caso donde la diferencia sea significativa, pero en general no lo considero algo crítico, al menos para casos típicos.
Si queréis unas explicaciones más detalladas, echadle un vistazo a esta página, que está muy bien explicado todo esto.
