Hasta ahora hemos creado una página con distintos tamaños de letra, distintas alineaciones e incluso hemos incluido negritas y hasta imágenes.
Si querremos modificar el tipo de letra, su tamaño, su color, el color del fondo de la página,... tenemos que utilizar los estilos.
Los estilos se pueden utilizar en cada una de las etiquetas (con lo que resulta muy laborioso modificar el color de cada etiqueta, el tipo de letra, su tamaño,...), podemos escribir los estilos en el encabezado (entre las etiquetas <head> y </head>), o en un archivo aparte que será una hoja de estilos externa y tendremos que enlazar el documento con ella.
Empezaremos con la definición del estilo en el encabezado del documento.
Abre el documento poema.html. Cámbiale el nombre y llámalo poema3.html.
Vamos a modificar el color de fondo y el color del texto: para poner el color podemos utilizar el formato rgb(RED,GREEN,BLUE) que utilizábamos con Processing; así rgb(255,0,0) nos devolverá un color rojo; rgb(0,255,0) un color verde; rgb(0,0,255) un color azul; podemos también combinar estos colores con matices desde el 0 hasta el 255.
Dentro del encabezado escribiremos:
<style type="text/css">
body{
color: rgb(255,0,0);
background-color: rgb(0,255,0)}
</style>
Donde la etiqueta <style> </style> sirve para indicar la información de estilo. Tiene como atributos type que indica el lenguaje de hojas de estilo que se está usando. Dentro de esta etiqueta podemos modificar el color del texto incluido en otras etiquetas (por ejemplo <p> o como en este caso <body>). En este ejemplo hemos modificado el color del texto (color: rgb(255,0,0);) y el color del fondo (background-color: rgb(0,255,0)).
El código completo del archivo queda como sigue:
Las hojas de estilo en Css están compuestas por reglas. Cada regla tiene tres partes:
a) el selector (en este caso sería: body, aunque como he escrito antes, también podría ser p, div, h1,...), que le dice al navegador la parte del documento que se verá afectada por la regla.
b) la propiedad (en este ejemplo son color y background-color) que especifican qué aspecto del diseño va a cambiarse;
c) y el valor (rgb(255,0,0)) que da el valor para la propiedad del apartado b).
Actividad 8.
Modifica pues el archivo poema3.html con las indicaciones anteriores, guarda el archivo y visualiza la página en el navegador para ver que se ve como se deseaba.
Actividad 9.
Supongamos que pasado un cierto tiempo quieres cambiar la combinación del color de fondo y el color del texto. Modifica ahora esa combinación simplemente cambiando los colores dentro de la etiqueta estilo. Guarda el archivo como poema4.html y visualiza el resultado en un navegador.
Actividad 10.
1. Abre el poema2.html.
2. Tienes que poner un estilo en el documento para que el encabezado tenga un cierto color, el resto texto del documento tenga otro y todo el documento tenga un color de fondo.
3. Guarda el documento como poema5.html.
4. Visualiza el resultado en el navegador.
5. Crea una nueva entrada del blog en la que enlazarás tanto los archivos poema3.html como poema4.html y poema5.html. El título de la entrada será Hojas de estilos y explicarás brévemente qué estilos has puesto en cada documento.
