Hoy he visto vía menéame un gif que no he podido dejar de plasmar en este blog. Se trata de una animación que muestra el proceso de creación del CSS de una web, desde el inicio con texto plano sobre fondo blanco, hasta llegar a un diseño a mi juicio bastante acertado. Aparte de ser curioso, creo que es muy orientativo de cara a todos los que se encuentren por primera vez ante una hoja vacía y se propongan construir un estilo desde cero. Puede parecer un proceso bastante obvio, pero una vez puestos en ello no siempre resulta tan sencillo seguir un orden lógico sin dispersarse en pequeños detalles, que abordados en el momento equivocado ralentizan enormemente el diseño.

Evidentemente tras este bonito proceso aún quedaría la cansina tarea de adaptar la web para que se vea correctamente en Internet Explorer, pero un gif de semejantes dimensiones daría al traste con el servidor más pintado...

En esta ocasión voy a plantear lo que podríamos llamar el esqueleto de una página web, mostrando varias opciones a partir de las cuales se puede construir prácticamente cualquier otra estructura. Por supuesto voy a dar los métodos que a mi juicio son los mejores siempre teniendo en cuenta por encima de todo la compatibilidad con cualquier navegador (lo cual para nuestra desgracia incluye a IE6), aunque hay que dejar claro que el hecho de que muestre una forma no implica que no haya otras muchas de obtener un resultado similar, ni que sea la mejor. Sencillamente es a lo que yo he llegado a base de experimentar tratando de hacer las cosas lo mejor posible.

Para los totalmente profanos en la materia, hay que comenzar diciendo que CSS son las siglas de "hojas de estilo en cascada", lo que traducido a nivel coloquial viene siendo la definición de un conjunto de parámetros que van a dar un estilo visual a nuestra web. Se puede decir que hoy en día resultan imprescindibles, ya que el viejo método de definir la estructura y los colores de una página a base de tablas y los atributos de las etiquetas está totalmente obsoleto, y aunque en principio puede ser más intuitivo (sí, todos tendemos a usar tablas), a largo plazo supone una enorme limitación y un engorro a la hora de introducir nuevos elementos o modificar cualquier aspecto del estilo de la página.

El hecho de hacer la descripción completa de las características en un archivo aparte organizando los elementos por clases hace que podamos modificar practicamente cualquier aspecto sin alterar el html. Esto permite trabajar aisladamente con las distintas partes que componen un sitio web (por un lado los elementos que se van a mostrar, por otro cómo deben verse) simplificando enormemente cualquier tarea de administración.

Yendo a la materia en sí, en principio voy a intentar hacer una síntesis de utilización de CSS al nivel más básico, detallando lo que desde mi punto de vista puede resultar más complejo o escabroso a partir de ejemplos sencillos que en un momento dado puedan ser válidos para crear la estructura básica de una página.