Ejercicio con Hojas de Estilos en Cascada

Un ejercicio fácil de elaborar que permite paso a paso el contruir un portal web haciendo uso de CSS es el siguiente que acabo de elaborar:

Partiendo de la anterior página HTML, donde se han puesto una serie de clases, pretendemos llegar a este resultado final:

Podéis descargaros la página html Inicial y las imágenes desde este enlace.

Antes de comenzar debes echar un vistazo a la estructura de la página inicial. Está comentada y es muy sencilla.

Crea una hoja de estillos llamada default.css y sigue los siguientes pasos:

1. El espacio y el margen de todo el documento por defecto sera 0px (margin, padding)
2. Poner en el body la imágen de fondo bg.gif (alineada en la parte superior y centrada), el color del texto #333, color de fondo #5F8000 y las fuentes Lucida Sanz Unicode, con un tamaño predeterminado del 62.5%.
3. Todos los enlaces de la página serán de color #682 y al pasar por encima de ellos de color: #9A6
4. Los párrafos y listas de todo el documento tendrán un tamaño de 1.2em y una separación por abajo de 1.2em; Además las listas tendrán un margen izquierdo de 1.2em y una imágen por cada elemento de la lista (li.gif)
5. la etiqueta blockquote (tabulación) tendrá un fondo blanco, un tamaño de fuente 0.9em, serán de color #333 y un borde sólido superior e inferior de tamaño 1px y de color #EEE. Los párrafos contenidos dentro de la etiqueta blockquote tendrán una serparación de 3px arriba y abajo y de 0px a la izq y dch.
6. Los título de cabecera h1 tendrá un tamaño de 1.4em. h2,h3 y h4 tendrán el color #654
7. Definir la estructura de la página para la clase container: anchura (702px),  imágen de fondo: (bgcontainer.gif) y centrada en la ventana del navegador.
8. La capa correspondiente al título del portal (clase top), tendrá el fondo de color #567300, será de anchura 630px y altura 60px. Su tipo de letra será Verdana de tamaño 2.4em. Los enlaces  de esta clase serán blancos sin subrayar y ocuparán el 100% de la anchura de la capa. Al pasar el ratón por encima de los enlaces cambiar al color #688B00; Ajustar el espaciado para que tenga un aspecto similar al resultado final.
9. La capa header mostrará la imágen de fondo: header.jpg centrada y con un tamaño de 630x180px.

Bueno vamos a dejarlo por ahora aquí (me duelen los dedos).... continuará

Si has llegado hasta aquí deberíamos ver lo siguiente

...continuará....