¿Cómo aplicar una hoja de estilos?

Cuando un navegador lee el contenido de una hoja de estilos utiliza sus especificaciones para darle forma al documento. Hay tres formas básicas de indicarle al navegador la utilización de una hoja de estilos.

Hoja de estilo interna

Cuando un estilo es propio de un único documento podría utilizarse una hoja de estilos interna, mediante la creación de una sección <style> dentro de la cabecera del documento. Este es el método que se ha utilizado para mostrar los ejemplos particularizados que puedes consultar en las ventanas emergentes.

Ten en cuenta que con este tipo de inclusión perdemos de vista una de las finalidades prioritarias de las hojas de estilo, ya que se mezcla en el documento html la especificación de formato con el contenido, aunque puede ser un primer paso para que compruebes la potencia de las hojas de estilo.

Note: Normalmente los navegadores ignoran las etiquetas que desconocen, por lo que un navegador antiguo que no soporte estilos ignorará el contenido de <style>, pero mostrará el contenido de la sección. Para evitarlo podemos utilzar las etiquetas de comentario de HTML tal como se muestra en el siguiente fragmento de código.

A continuación tienes un ejemplo de código para la inclusión de un estilo global en una página. Puedes ver el resultado en una ventana independiente. (Ten en cuenta que se podían haber utilizado otras etiquetas y otras propiedades de las mismas)

Como has visto en el ejemplo, la sintaxis se ha modificado al incluir el estilo en la cabecera:

• Las características van encerradas entre las etiquetas <style type="text/css"> y </style>
• Aunque no es obligatorio conviene iniciar la definición con una etiqueta de comentario: <!-- y, antes de cerrar el estilo, poner la de cierre de comentario --> para evitar que los navegadores antiguos puedan presentar la definición del estilo como si fuera un texto normal.
• Las propiedades atribuidas a cada elemento van encerradas entre { } y se escriben según el esquema propiedad, dos puntos, valor y punto y coma para separar de la siguiente propiedad.

La inclusión del estilo se hará después de la etiqueta de cierre del título </title>

 Crea una página con varios párrafos de texto. Puedes utilizar el mismo texto que usamos en la práctica 30.

• Crea en la cabecera del documento una definición de estilo. Aunque no conozcas todavía los atributos que puedes utilizar puedes aprovechar los que figuran en el ejemplo.
• Guárdalo como practica47.htm y comprueba la apariencia en el navegador.
• Modifica un grupo de párrafos utilizando la etiqueta div para que se presenten en color azul, e incrusta entre ellos un grupo de palabras que aparezcan en color rojo.
• Guarda y comprueba el resultado.
• Modifica el estilo de la cabecera para que todo el texto de la página se presente de color verde (green).
• Guarda y comprueba el resultado.

Hoja de estilos externa

Aunque iniciamos la exposición de posibilidades con las hojas de estilo internas realmente lo correcto habría sido iniciarla con las hojas de estilo externas, ya que ésta es la forma ideal de aplicar un estilo a varias páginas de forma simultánea. De hecho debería ser la forma prioritaria puesto que permite separar claramente el contenido y la estructura, que irán en el documento html, del formato que se aplicará a partir de la hoja de estilos.

Para hacerlo habrá que utilizar en cada documento la etiqueta <link> situada en la cabecera del documento, después de la etiqueta <title>

Gracias a este enlace el navegador leerá las especificaciones de la hoja de estilos y dará formato al contenido de acuerdo a ellas.

Así pues hay que seguir dos pasos:

1. Crear un archivo de texto con cualquier editor de texto plano, salvándola en formato texto con la extensión que se desee, aunque habitualmente suele utilizarse la extensión .css. En dicho archivo especificaremos el contenido de las diferentes normas de estilo utilizando la sintaxis básica selector {propiedad:valor}
2. Enlazar cada página a la que queramos aplicarle el estilo con el archivo creado para que extraiga de él las características.

• Abre el bloc de notas y crea un archivo de hoja de estilo. (Puedes copiar la definición que se muestra en el ejemplo)
• Guarda el archivo con el nombre primerestilo.css (Es importante que si estás trabajando con el bloc de notas de Windows, en la caja "Guardar como archivos de tipo" tengas marcada la opción Todos los archivos y no Documentos de texto)
• Abre el archivo practica47.htm y elimina de la cabecera la definición de estilos que habías creado.
• Introduce ahora el enlace al archivo primerestilo.css siguiendo la sintaxis que se ha indicado
• Guarda como practica48.htm y comprueba el resultado en el navegador.
• Modifica alguna característica en el archivo primerestilo.css y recarga tu página para comprobar los resultados.

Combinar hojas de estilo externas en una nueva

Si ya tenemos definida una hoja de estilos y deseamos reutilizarla añadiendo algunas modificaciones podemos crear una nueva hoja de estilos en la que importemos el contenido de la que ya teníamos y añadamos las nuevas reglas. Puede ser por ejemplo, el caso de un centro en el que se utilizara una hoja de estilos genérica y cada nivel o departamento aprovechara esas especificaciones y añadiera las suyas propias para personalizar una zona de la web.

Estilos en línea

Llamamos estilo en línea al que se aplica directamente sobre un elemento al crear el código HTML. Evidentemente es el procedimiento menos recomendable, ya que perdemos practicamente todas las ventajas ofrecidas por las hojas de estilo al mezclar el contenido y la presentación. La única ventaja que puede presentar respecto al código HTML es que permite la especificación de un abanico mucho mayor de propiedades.

Para usar un estilo en línea varía ligeramente la sintaxis que hemos utilizado hasta ahora, ya que añadimos style como atributo de la etiqueta que deseamos modificar y las propiedades y valores se encierran entre comillas en lugar de entre llaves.

• Tras un espacio añadimos a la etiqueta básica la palabra style y el signo igual.
• Abrimos comillas para especificar las características.
• Cada característica se escribe seguida de dos puntos y el valor que le adjudicamos.
• Separamos las características con punto y coma.
• Cerramos las comillas al acabar la definición y ponemos el ángulo de cierre de la etiqueta.

Ver ejemplo

¿Pueden enlazarse varias hojas de estilos con la misma página?

La respuesta es, sencillamente, sí. Basta con repetir la etiqueta link tal como se ha visto poniendo en cada caso el nombre de la hoja con la que se quiere enlazar. Ahora bien, habrá que tener en cuenta que si hay contradicción entre las definiciones de algún elemento, prevalecerá la hoja a la que se haya nombrado en último lugar al crear los enlaces. Además, sobre las hojas enlazadas tendrán prioridad las hojas de estilo internas y, sobre ellas, los estilo en línea aplicados a algún elemento particular.

Por ejemplo, si tenemos nuestra página enlazada con la hoja de estilos genérica de la web del centro, a continuación la hemos enlazado con una hoja de estilos que se está usando para el departamento, tenemos una hoja de estilos interna definida sobre la página y hay algún elemento al que le hemos aplicado un estilo en línea pasaría algo similar a lo siguiente:

La hoja de estilos del centro tiene definidas las propiedades siguientes para el selector h3:

h3 { color: red; text-align: left; font-size: 10pt }

La hoja del departamento tiene sin embargo definido el selector h3 de la siguiente forma:

h3 { text-align: right}

La hoja de estilos interna especifica:

h3 {color: green; font-size: 20pt}

Y hemos especificado en línea sobre una etiqueta h3

<h3 style="font-size: 10pt}

El resultado final será:

• color verde porque lo especifica la hoja de estilos interna,
• alineación derecha porque lo especifica la hoja del departamento que es la última enlazada,
• tamaño 10 puntos porque lo indica el estilo en línea (no por la indicación en la hoja de estilos del centro que había sido anulada por la interna)

Aplicar estilos a elementos o secciones de un documento

Si en vez de a un elemento quiero aplicarle un estilo a un grupo de elementos puedo englobar dichos elementos entre las etiquetas <div> y </div> y aplicar allí el estilo que teníamos definido como clase, tal como se ve en el siguiente ejemplo. (o bien mediante un estilo en línea)

Puedo intercalar, en una zona delimitada por la etiqueta <div> algún estilo específico aplicado a un elemento en concreto, como se muestra a continuación. En este caso se ha utilizado un estilo en línea para modificar el selector <p>

Si lo que pretendo es aplicar el estilo a una zona menor que la correspondiente a un elemento en bloque, por ejemplo, una palabra dentro de un párrafo utilizaré la etiqueta <span> y su cierre </span>

Diferentes medios... diferentes estilos

Probablemente recuerdes que, cuando se habló de los colores del texto se recomendaba tener en cuenta el destino final que pretendíamos adjudicarle a una página web. Escribir en blanco sobre fondo azul marino es una combinación elegante y muy relajada para la vista cuando visualizamos la página en pantalla, pero si queremos que el contenido se imprima... el color blanco del texto va a dejar poca huella sobre el folio en blanco.

Las hojas de estilo vienen en nuestra ayuda para casos similares a éste, permitiéndonos especificar que un estilo tenga una apariencia cuando el documento se muestre en una pantalla y otra diferente cuando se imprima. Para hacerlo tendremos que recurrir a la directiva @media. Tanto si se trata de una hoja de estilos externa, como interna o con estilos en línea, cuando incluimos una regla @media las propiedades que se definan a continuación se aplicarán cuando el documento se muestre en el tipo de medio especificado. La aplicación más directa la encontraremos al definir estilos para impresión (@media print) y para pantalla (@media screen)

Pero no solo podemos especificar la pantalla y la impresión como medios para los que especificar estilos. El listado completo de medios actualmente establecidos por el W3C es el siguiente:

all

Cualquier tipo de dispositivo .

aural

Referido a navegadores para personas con deficiencias visuales que utilizan sintetizadores de voz para realizar una lectura de los contenidos.

braille

Dispositivos tactiles basados en lenguaje braille.

embossed

Impresoras en braille.

handheld

Dispositivos portátiles, caracterizados por una pantalla pequeña, generalmente monocromos y con limitado ancho de banda.

print

Impresoras o documentos mostrados en pantalla en forma de visualización previa a la impresión.

projection

Presentaciones proyectadas o impresión de transparencias.

screen

Referido, fundamentalmente a pantallas de ordenador.

tty

Utilizado para referirse a medios que presentan la información con un tamaño fijo de letra, como por ejemplo los teletipos.

tv

Referido a dispositivos de tipo televisión, caracterizados por una menor resolución que las pantallas de ordenador, pantallas con capacidad limitada de desplazamiento y presencia de sonido.

Cada uno de estos medios puede disponer de algunas propiedades especificas, que se pueden consultar en la documentación del W3C. Se puede consultar, por ejemplo, la traducción de las especificaciones del W3C para hojas de estilo auditivas que es una de las mas desarrolladas.