Unidad 11. Hojas de estilos (III)

Naturalmente, modificaremos sólo los que necesitemos. Vamos a guardar la hoja de estilos y vamos a usarla.

Pulsamos en guardar y guardamos la hoja como hojaestilos.css.

Vamos a aplicar la hoja de estilos a una página web. Creamos la siguiente página:

Es importante que marquemos el título como encabezado H4.

Para ello lo seleccionamos y en la barra de formato hacemos clic en Estilo y clic en H4 (o encabezado4).

Si no lo hacemos, el título será considerado como texto normal y se le aplicará el estilo del texto.

barra de formato

Ahora vamos a indicarle a FrontPage que asocie la página web a la hoja de estilos.

Hacemos clic en el menú Formato - Vínculos de hoja de estilos.

Nos aparece la siguiente pantalla, en la que tenemos que pulsar en Agregar y buscar el fichero de hoja de estilos que antes hemos guardado. Hacemos clic en Aceptar.

Veamos un par de imágenes de la ventana antes y después de agregar la hoja de estilos:

Al aplicarse la hoja de estilos, la página web tiene ahora el siguiente aspecto:

Como podemos comprobar, se han aplicado las características que hemos visto antes.

Vamos a cambiarlas.

Abrimos la hoja de estilos y pulsamos en el botón Estilo que queda en medio de la página.

Pinchamos en body y pulsamos en Modificar. En Formato elegimos Fuente.... En la ventana de Fuente elegimos Times New Roman y el color negro.

Le damos a Aceptar hasta que volvamos a la hoja de estilos.

Ahora el texto tiene otro tipo de letra y otro color.

Grabamos los cambios pulsando en .

Para practicar los distintos aspectos explicados en el tema puedes realizar el ejercicio paso a paso Hojas de estilos.

Aquí puedes realizar un ejercicio paso a paso interactivo para practicar lo visto en la unidad.

  Ejercicios del Tema 11.

  Prueba evaluativa del Tema 11.

Pág. 11.3