Unidad 4. Ejercicio paso a paso: Estilos básicos en KompoZer

Objetivo

Practicar cómo definir y aplicar estilos con KompoZer.

Ejericicio

1. Abre con KompoZer (menú Archivo → Abrir archivo), la página estilos_sencillos.html que encontrarás en la carpeta de ejercicios. Vamos a aplicarle estilos para que se vea así.
2. En KompoZer, pulsa el botón CaScadeS de la parte superior para acceder al editor CSS.
3. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla.
4. Escribe body como nombre de la regla y pulsa en Crear nueva regla de estilo.
5. Pulsa en la pestaña Texto.
6. En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif.
7. En Tamaño de la letra, escribe 15px.
8. En Color, introduce #735846.
9. En Alineación, selecciona Justificado.
10. Ve a la pestaña Fondo, y en Color introduce #3d2e2a.
11. Vuelve a pulsar el icono de la paleta a la izquierda, para definir una nueva regla.
12. Dale el nombre h1 y pulsa crear regla.
13. En la pestaña Texto, asígnale el Color #d38451 y el Tamaño de letra 180%.
14. Haz clic en la pestaña Caja. Dale márgenes Superior de 20px e Izquierdo de 80px.
15. Siguiendo los pasos anteriores, crea una nueva regla con el nombre h2, h3.
16. En la pestaña Texto, establece el Tipo de letra personalizado Georgia, Times, serif, tamaño 150% y color #A52A2A.
17. En la pestaña Caja, establece el margen Superior a 0 y el Izquierdo a 30px.
18. Define una nueva regla para el elemento h3, que cambie su Color de texto a #B8860B.
19. Define un nuevo estilo para los párrafos (p).
20. En la pestaña Texto, cambia la altura de línea a 1.5em. En la pestaña Caja, establece los márgenes a 35px.
21. Crea una nueva regla para la imagen (img).
22. Desde la pestaña Bordes establece el estilo del borde, con Estilo solid, Anchura 2px y Color #d38451. Solo es necesario que rellenes la primera fila, a no ser que quieras bordes distintos para cada lado. Desde la pestaña Caja dale un margen de 10px. En esa misma pestaña, en el desplegable Flotar selecciona derecha. Esto mostrará al imagen a la derecha de la página. Explicaremos esta propiedad más adelante.
23. Crea una nueva regla para .cuerpo (observa que es la clase que tiene aplicada el div donde está todo el texto.
24. Asígnales un margen de 0 en la parte superior, y de 20px al resto. Además dale el Color de Fondo #f5e4cc.
25. Crea una última regla para la clase .azul.
26. En la pestaña Texto, en Peso de la fuente elige Negrita, y en Color #6C6CCA.

 Cursos Informática Gratuitos