Lo prometido es deuda, así que aquí va la segunda entrega de esta mini guía de los principios básicos del HTML5, dedicada esta vez al uso conjunto de este lenguaje y las hojas de estilo.
Como decíamos hace un par de semanas -repito, por si no queréis revisar el anterior artículo– el cuerpo (body) de una página web, bien estructurada en HTML5, consta de las siguientes partes: cabecera <header>, pie <footer>, dirección <address>, navegación <nav>, sección <section>, artículo <article>, apartado <aside> y grupo de encabezados <hgroup>.
Pues bien, en lo que a las hojas de estilo atañe, estas etiquetas se pueden formatear como las antiguas divisiones <div>, pero sin necesidad de escribir por delante la almohadilla (#) a la hora de declararlas. Es decir:
- Así sí: header { }
- Así no: #header { }
No obstante, aquí no acaban las explicaciones, pues existen algunas consideraciones que debemos tener presentes:
1.
Si repetimos alguna de las etiquetas para referirnos a partes diferentes de la estructura de la web, como por ejemplo el header o el footer general y los propios de cada artículo, habrá igualmente que duplicarlas diferenciándolas en el estilo, para que no se produzca un desbarajuste.
CSS
/* Cabecera general */ header#top { padding:20px 20px; background-color:#9CC; } /* Cabecera de artículo */ header#article { margin:0 5px; padding:5px 10px; border-radius:25px 0px; background-color:#BFE6C3; font: 110% Georgia, "Times New Roman", Times, serif; }
HTML
<!-- [Cabecera general] --> <header id="top">...</header> <!-- [Cabecera de artículo] --> <header id="article">...</header>
2.
Si queremos centrar todo el contenido de la página, hay que crear el elemento contenedor de todo porque, extrañamente, no se ha definido una etiqueta específica para esto. Dejo expuesto un ejemplo, aunque la forma de hacerlo no ha variado respecto a la versión previa de HTML.
CSS
/* Elemento contenedor */ #warp { width:900px; margin:0px auto; }
HTML
<!-- [Elemento contenedor] --> <div id="warp">...</div>
3.
De resto, tanto a las clases (class), como a los encabezados (h1…h6), a los párrafos (p), a las tablas (table, tr, td), etc. se les pueden aplicar estilos como se hacía hasta ahora y combinarlos con las nuevas etiquetas. Por ejemplo, imaginad que la tónica del diseño de la página es disponer los artículos uno debajo de otro, pero que, en una sección determinada, han de colocarse alineados de izquierda a derecha.
CSS
/* Artículos: Elementos comunes */ article { margin:0 0 15px; padding:5px 0 0; border-radius:25px 0px; background-color:#FFF; } /* Párrafos de los artículos, también común */ article p { margin:5px 10px; } /* Sección de disposición horizontal: Defino el siguiente elemento para conseguir que los artículos con esta id se alineen uno al lado del otro. */ article#hz { width:48%; float:left; } /* Sección de disposición horizontal: Establezco el margen necesario para separar los artículos con la id="hz". Esta clase se debe aplicar a partir del 2º artículo de la sección. */ article.space { margin-left:4%; }
HTML
<!-- [Primer artículo de la sección de disposición horizontal] --> <article id="hz">...</article> <!-- [Segundo artículo de la sección de disposición horizontal] --> <article class="space" id="hz">...</article>
Por cierto, si os habéis fijado en el ejemplo anterior, hay una propiedad extraña hasta el HTML5: border-radius. Es una de las novedades introducidas y sirve para redondear -sin necesidad de recurrir a imágenes de fondo- las esquinas de las cajas en las que quedan encapsulados los distintos elementos de la página web. El mayor problema de esta novedad -y de todas las introducidas- es la falta de compatibilidad con los distintos navegadores web. Alguien con el último Chrome o FireFox no tendrá problemas de visualización, pero con un iE8… ¡Uf! En fin, para comprobar la compatibilidad de los navegadores con el HTML5, html5test.com está bastante bien.

Aparte, encontraréis mucha más información sobre la propiedad border-radius en el artículo: Border-radius: create rounded corners with CSS! [en inglés]
Sobre todo lo más, podéis ampliar horizontes en w3.org [también en inglés] y para ver un ejemplo de lo que se puede hacer con el CSS aplicado a los tags del HTML5, os dejo la versión formateada (y comentada) de la página web creada en el primer artículo: Ejemplo de HTML5 con CSS.
Actualización 21/02/2012: Para mejorar la compatibilidad del HTML5 con Internet Explorer 8 y otros navegadores antiguos, revisad esta nueva entrada del blog: Solución al problema de compatibilidad entre HTML5 y los viejos navegadores (iE7, iE8, FF3)
¿Opiniones, dudas? Cuéntame…