Unidad 3. Ejercicio paso a paso: Aplicar estilos sencillos

Objetivo

Vamos a formatear el texto del archivo estilo_texto.htm, que puedes encontrar en la carpeta de ejercicios del curso, utilizando estilos CSS en la propia página. Si no tienes los ejercicios, puedes descargarlos de forma gratuita desde la web de aualClic.

Ejercicio

1. Abre el bloc de notas.
2. Pulsa Archivo → Abrir, y busca el archivo estilo_texto.htm.
3. Para declarar los estilos en la propia página, añade, dentro del head, pero después de </title>, la etiqueta <style type="text/css">    </style>. Todo lo referente a los estilos irá en estas etiquetas.
4. Comenzamos por lo más genérico. Declara el selector body{}.
5. Ahora, le asígnale una fuente sin serifa (font-family: Arial, Sans-Serif;) y establece los colores de texto (color: #880000;) y fondo (background-color: #F7F0E2;) de la página.

     body {
       font-family: Arial, Sans-Serif;
       background-color: #F7F0E2;
       color: #880000;
     }

6. Declara el selector del título (h1 {}).
7. Céntralo (text-align: center;) y subráyalo (text-decoration: underline;).

     h1 {
       text-align: center;
       text-decoration: underline;
     }

8. Declara el selector para el encabezado 2 (h2 { }).
9. Cámbiale el color de fondo (background-color: #EFD1D1;), dale un poco de margen a la izquierda (padding-left: 1em;), y transforma el texto a mayúsculas pequeñas (font-variant: small-caps;).

     h2 { 
       background-color: #EFD1D1;
       padding-left: 1em;
       font-variant: small-caps;
     }

10. Declara el selector para los párrafos (p { }).
11. Separa un poco los párrafos entre sí, y un poco más con los laterales de la página ( margin: 1.5em 3em). Para que el lateral derecho no quede dentado, justifica el texto (text-align: justify;). Por último, aumenta el alto de la línea (line-height: 1.5em;).

    p { 
        margin: 1.5em 3em;
        text-align: justify;
        line-height: 1.5em;
     } 

12. Hay fragmentos de texto con un estilo especial. Utilizaremos un span, así que declara el selector span { }.
13. Al span, dale un fondo blanco (background-color: white;) y un color gris (color: #666666;). Además, cambia la fuente a monospace (font-family: monospace;) y auméntale un poco el tamaño (font-size: 110%;).

    span {
        font-family: monospace;
        font-size: 110%;
        color: #666666;
        background-color: white;
    } 

14. Para acabar, encierra los fragmentos de texto a los que hay que aplicar el último estilo entre etiquetas <span></span>.

 Cursos Informática Gratuitos