1.2.- Hojas de estilo externas. | DIW04.- Hojas de estilos.

Ilustración en la que aparecen las siglas CSS seguidas del símbolo de dos puntos. — geirarne (CC BY)

En la presentación del apartado anterior ya has podido ver el modo de emplear las hojas de estilo externas: importándolas o enlazándolas. También has visto cómo se crea una regla de estilo y sus componentes: selector, propiedad y valor. Pero hay algunas cosas que nos quedan por comentar.

Las hojas de estilo son documentos de texto con, por lo menos, una regla. Estos archivos no contienen ninguna etiqueta HTML, ¿para qué?. Al igual que en los documentos HTML, en las hojas de estilo se pueden incluir comentarios pero, en este caso, se escriben del siguiente modo: /* Este es un comentario */

CSS2 introduce la posibilidad de orientar las hojas de estilo a medios de presentación específicos. Para ello se emplea el atributo media del elemento link del cual ya viste un ejemplo en la presentación del apartado anterior.

La siguiente tabla muestra los valores que puede tomar el atributo media:

Valores del atributo media.
Medios de presentación	Valor atributo media
`all`	Todos los medios definidos.
`braille`	Dispositivos táctiles que emplean el sistema Braille.
`embosed`	Impresoras que emplean el sistema Braille.
`handheld`	Dispositivos de mano: móviles, PDA, etcétera.
`print`	Impresoras y navegadores en el modo "vista previa para imprimir".
`projection`	Proyectores y dispositivos para presentaciones.
`screen`	Pantallas de ordenador.
`speech`	Sintetizadores para navegadores de voz empleados por personas discapacitadas.
`tty`	Dispositivos textuales limitados, como teletipos y terminales de texto.
`tv`	Televisores y dispositivos con resolución baja.

En el ejemplo siguiente se muestra cómo se pueden emplear en la función @media de la misma forma que hacíamos con la función @import.

Ejemplo:

<style type="text/css">
    @import url(http://estilos/miestilo.css);

    @media print {
        body {
            font-size: 10pt;
        }

        /* Establece el tamaño de fuente para impresión */
    }

    @media screen {
        body {
            font-size: 13px
        }

        /* Establece el tamaño de fuente para visualización */
    }

    p {
        font-family: Verdana;
    }
</style>