Dotemos ahora de reglas de estilo para el esquema de estructura semántica que hemos realizado.
Para establecer sus propiedades, podríamos usar selectores de etiqueta. Es decir, crear un selector para la etiqueta <header>, otro para <nav>, etcétera. También podríamos crear selectores de clase. En este caso, definimos un atributo ID para cada etiqueta y a través de ellos podemos definir las reglas de estilo. A su vez, estas reglas las ubicaremos en un archivo .css. Como ya hemos visto, basta con pulsar el botón 
de la sección Fuentes del panel Diseñador de CSS para crear un nuevo archivo .css. Después debemos pulsar el mismo botón de la sección Selectores para añadir un selector por cada ID de nuestra página.
Las propiedades para el Panel Principal, etiqueta <main>, pueden verse enseguida.
Como puede verse, hemos establecido un ancho de 800px, un borde de 1px sólido, así como un fondo color #E8F5CA (verde claro).
El encabezado y el menú también tienen el mismo ancho y algunos márgenes. El cambio más interesante viene para los elementos Sección y Aside. La primera tiene un ancho de 600px y una propiedad float: left (izquierda). El espacio del lado derecho lo ocupa el contendor Aside, con un ancho de 180px y una propiedad float: right, así como colores de fondo distintos.
Finalmente, la propiedad clear del ID pie, que es la etiqueta <footer>, se establece en both, para romper con la propiedad float de los contenedores anteriores y se ubique debajo de éstos.
La apariencia final del esquema en la vista En vivo es la siguiente:
 Ejercicio propuesto de la Unidad 14 |
 Prueba evaluativa de la Unidad 14 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.