Aplicar hojas de estilo

¿Cómo utilizar un estilo?

Siguiendo el camino de lo particular a lo general, cuando deseemos modificar un elemento en concreto podremos añadir en la etiqueta las especificaciones de estilo necesarias.

Aplicar estilos a elementos o secciones de un documento

Este código...	...se ve así
<p style = "font-size: 16px; color: blue"> Texto de 16 píxeles en color azul </p>	Texto de 16 píxeles en color azul

El ejemplo que se acaba de presentar nos puede servir para ver claramente la sintaxis que habrá que utilizar para especificar un estilo aplicado a un elemento de la página:

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.

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, tal como se ve en el siguiente ejemplo.

Este código...	...se ve así
<div style = "color: blue"> <p> Primer párrafo </p> <ul> <li>Elemento de lista</li> <li>Otro elemento</li> </ul> <p>Otro párrafo</p> </div>	Primer párrafo Elemento de lista Otro elemento Otro párrafo

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.

Este código...	...se ve así
<div style = "color: blue"> <p> Primer párrafo de la zona azul</p> <p style = "color: red"> Este párrafo va en rojo en medio de una zona azul</p> <p>Otro párrafo de la zona azul</p> </div>	Primer párrafo de la zona azul Este párrafo va en rojo en medio de una zona azul Otro párrafo de la zona azul

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

Este código...	...se ve así
<p> En este párrafo señalo <span style="font-size:16px; font-weight: bold; color:orange"> esta</span> palabra en tamaño de 16 píxeles, en negrita y de color naranja</p>	En este párrafo señalo esta palabra en tamaño de 16 píxeles, en negrita y de color naranja

Aplicar un estilo global a toda la página

Lo cierto es que lo visto hasta ahora, aunque brinda alguna posibilidad que no me ofrecía el HTML estándar no se diferencia demasiado de éste. Será mucho más cómodo crear un estilo para toda la página en lugar de ir definiendo características cada vez que aparece un elemento. Para hacerlo iremos a la sección de cabecera de la página <head> y haremos una definición para toda la página.

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

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)

<html>
<head>
<title> Título de la página </title>

<style type="text/css">

</style>

</head>
<body>
Conjunto de etiquetas del cuerpo de la página
</body>
</html>

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:  para evitar que los navegadores antiguos puedan presentar la definición del estilo como si fuera un texto normal.
Las características atribuidas a cada elemento van encerradas entre { } y se escriben igual que cuando modificábamos un estilo individual: atributo, dos puntos, valor y punto y coma y espacio para separar del siguiente atributo.

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. (Lo más cómodo será que recurras a Edición/Origen HTML en Composer y a Ver/HTML en Front Page Express) 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.

Aplicar un estilo a un grupo de páginas

El paso anterior era un avance en tanto que permite con una única definición en la página aplicar una hoja de estilos a toda ella. Sin embargo nos obliga a introducir las propiedades de cada elemento en la página.

El verdadero poder de las hojas de estilo lo encontramos cuando conocemos la forma de aplicar una hoja de estilo a múltiples páginas definiéndola sólo en una ocasión. Para conseguirlo hay que seguir dos pasos:

Crear un archivo de texto en el que especificamosmos las propiedades que deseamos aplicar a cada etiqueta, clase o seudoclase.
Enlazar cada página a la que queramos aplicarle el estilo con el archivo creado para que extraiga de él las características.

Para crear un archivo de definiciones que recogiera las características del ejemplo anterior escribiríamos:

body {background: black; font-size: 10pt; font-family: Arial,Helvetica,sans-serif; color: yellow; text-align:justify; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: aqua; font-size: 14pt; font-weight: bold; color: orange}
H2 {font-size: 12pt; font-weight: bold; color: white}

Observa que el archivo no incluye ninguna etiqueta en el formato habitual. Se trata simplemente de un arcchivo de texto con las propiedades atribuidas a cada elemento.

Una vez definidas las propiedades guardaremos el archivo en formato texto con el nombre que queramos y la extensión css. Por ejemplo, estilodeprueba.css

El paso 2 es incluir en la cabecera de la página, detrás de la etiqueta </title> la etiqueta <link rel="stylesheet" href="estilodeprueba.css" type="text/css">

El siguiente ejemplo presenta la misma apariencia que vimos al aplicar el estilo en la página, pero está creado utilizando este método.

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, 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.
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.

¿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.

Recuerda que las hojas enlazadas figuran en el último lugar de prioridad y que, sobre ellas se superpondrán la definición de estilo que hagamos sobre la propia página y, en el primer lugar de prioridad, las modificaciones que realicemos para una etiqueta en particular.