En este artículo vamos a conocer la maquetación web utilizando Hojas de estilo en cascada (CSS). Veremos cómo realizar la maquetación de diversas maneras, con explicaciones generales y descripciones de las ventajas e inconvenientes de cada herramienta. Para muchos lectores será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS, para poder cubrir posibles lagunas del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.

Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la presentación. Es decir, los elementos que componen una página (el contenido) de la forma con la que se muestran (presentación). Además, CSS ayuda en gran medida a la definición de estilos en la página, ya que permite ajustar de una manera mucho más precisa cualquier aspecto de cualquier elemento de la página.

La maquetación con CSS es una de las tareas donde más se puede aprovechar las hojas de estilo en cascada, ya que permite aplicar posicionamiento de elementos en la página, cambiando radicalmente el layout de la página solamente a base de alterar las declaraciones de estilos. Para ello se utilizan diversos atributos CSS que nos permiten aplicar un posicionamiento de manera tan detallada y personalizada como se necesite.

Cómo especificar el contenido que se desea maquetar

Como ya sabemos, el contenido se expresa mediante HTML. Realmente es un poco indiferente qué etiquetas uses para realizar la definición de tu contenido, pero muy habitualmente se usa la etiqueta <div>, que define una división de contenido.

La etiqueta <div> realmente no tiene un significado específico, es simplemente un bloque de contenido. A veces a este bloque de contenido lo llamamos con el término de capa. En las capas se introducen los elementos que queramos que aparezcan en la página.

Cada bloque de contenido se colocará en su propia división. Por ejemplo la cabecera, el pie de página o el contenido principal se especificarán en sus propias etiquetas <div>. Los elementos dentro de los <div> también se pueden anidar, algo que es muy normal porque generalmente para especificar el contenido de la cabecera necesitarás un logotipo, con una imagen, y quizás una cantidad de enlaces en una lista. Al colocarse unos elementos dentro de otros también conseguimos heredar las propiedades y posicionamiento de las capas padre.

El papel de las tablas de HTML

Es importante mencionar que en la maquetación CSS no se usan las etiquetas de tablas, <table> y demás. Las tablas sólo se utilizan para mostrar información tabulada, es decir, mostrada en filas y columnas.

Cierto es que en los inicios de la maquetación CSS y antes que CSS se volviera un lenguaje suficientemente avanzado no teníamos otra herramienta para maquetar que no fueran las tablas, pero de esto ya hace muchos años. Afortunadamente hoy ya nadie usa tablas para maquetar una web, pues aunque se trata de una técnica bastante sencilla, era muy poco práctica y complicaba demasiado el código de las páginas web resultantes.

Objetivos de la maquetación CSS

La maquetación CSS tiene como objetivo ofrecer al usario una estructura visual de página avanzada, personalizada y atractiva visualmente, donde sea fácil identificar cada parte del contenido, destacando los elementos que sean importantes en cada caso.

Ya desde el punto de vista del desarrollador, la maquetación CSS sirve para permitir la separación del contenido y la presentación, o aspecto, con el que se debe mostrar. Debemos tener en cuenta que, cuanto más separemos estos dos elementos, más sencillo será el mantenimiento de las páginas y el procesamiento de la información. Con ello también podremos obtener páginas más limpias y claras en lo que respecta al código.

Además, la maquetación con CSS y la separación del contenido de la presentación busca aportar algunas ventajas:

• Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento CSS externo, liberaremos de código el documento HTML y ocupará mucho menos, por lo que su transferencia será más rápida. Además, como la declaración de estilos se almacena en la caché del navegador, sólo se transfiere en la primera página que se visita del sitio, con lo que la segunda y posteriores páginas que se soliciten se cargarán mucho más rápido.
• Facilidad para alterar el aspecto de la página sin tocar el código HTML. Como toda la información de los estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la página -ya sea su posición o su aspecto-, sólo tenemos que actualizar la hoja de estilos y los cambios se verán automáticamente en todo el web.
• Independencia de la posición de los elementos en la página a la posición donde aparencen en el código HTML. Las técnicas más modernas de maquetación web nos permiten posicionar los elementos en la página en cualquier lugar, siendo prácticamente indiferente dónde éstos aparezcan en el código HTML.
• Adaptabilidad de la página a las distintas resoluciones y tamaños de pantallas. Dado que la web es un medio de consulta de todo tipo de dispositivos, ordenadores y móviles o tablets, es importante usar mecanismos de maquetación CSS modernos, que permitan que las páginas se adapten a cada tipo de pantalla.

Y las problemáticas de la maquetación CSS

Cuando empezábamos a realizar maquetación CSS existían algunas desventajas, que la verdad en la actualidad no son relevantes. Actualmente todos los navegadores soportan maquetación con herramientas modernas y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo.

Solamente algunos estándares como CSS Grid Layout, del que hablaremos en seguida, están actualmente (2020) soportados con menor generalidad, aunque afortunadamente el navegador que siempre da problemas es Internet Explorer y su uso es prácticamente irrelevante en la actualidad.

Tampoco deben preocuparnos que existan diferencias entre navegadorespues en la actualidad se han minimizado bastante y lo cierto es que con unas pocas técnicas podremos diseñar páginas que se vean exactamente igual en cualquier navegador, o al menos que se vean de una manera similar. En este sentido te recomendamos la lectura de los conceptos Progressive Enhancement y Graceful Degradation.

Quizás la única dificultad sea acostumbrarnos a maquetar correctamente, tener un buen conocimiento del CSS y las herramientas más adecuadas para usar en cada caso. Pero esperamos poder ayudaros mediante estos textos. Al final hay que quedarse con todas las ventajas que nos ofrece la maquetación CSS para tener un mayor control de los elementos de la página.

Alternativas para maquetación CSS

A lo largo del tiempo han aparecido diversas herramientas en CSS para ayudarnos a maquetar. Las vamos a enumerar a continuación para que tengas una idea más global de lo que te puedes encontrar y usar.

Capas con float

La primera alternativa que tuvimos para maquetar webs con CSS fueron las capas (divisiones) a las que les aplicábamos el atributo de CSS "float", que permite que se situen a izquierda y derecha. Mediante float conseguimos fácilmente diseños con varias columnas, lo que estaba muy bien para comenzar a abandonar las tablas HTML como herramienta de maquetación.

Sin embargo, float no fue creado para maquetar específicamente, sino para conseguir que determinados elementos de la página "flotasen" hacia un lado, y el texto de la capa padre se agrupase alrededor del elemento flotante. El uso de floats por tanto nos traía diversos problemas y los diseñadores teníamos que usar diversos trucos para evitarlos.

Las técnicas para este estilo de maquetación explican en diversos artículos de desarrolloweb como: maquetar con floats. Sin embargo, hoy no podemos recomendar usar floats para maquetar.

Display table

Durante un breve espacio de tiempo se llegó a usar display: table para conseguir maquetar contenido, ya que nos permitía cosas que en CSS eran muy difíciles de conseguir anteriormente, como el alineamiento vertical.

Afortunadamente no tuvimos que dedicarnos demasiado a estas técnicas, ya que producía diseños muy rígidos (el posicionamiento dependía mucho de cómo estaba escrito el HTML). Si quieres saber algo más te recomendamos leer el artículo de display table.

Flexbox

Flexbox es la primera gran herramienta que nos aportó verdadera flexibilidad en el código HTML, ya que Flexbox nos permite cambiar el posicionamiento de los elementos, de modo que podemos por ejemplo ordenarlos de manera distinta a como aparecen en la página, aunque con algunas limitaciones.

En todo caso, Flexbox nos permite, con atributos muy variados, conseguir que los elementos se ordenen en columnas o filas y conseguir que se alineen de la manera que necesitemos, con facilidad, sin complicaciones ni necesidad de trucos (lo que antes se conocía como hacks CSS).

Flexbox nos trajo por ejemplo la alineación vertical, que antes era muy complicada de realizar. Los desarrolladores comenzamos de nuevo a disfrutar de la maquetación web, pero todavía no era una herramienta pensada específicamente para maquetación, es decir, creación de layouts de contenido. Puedes aprender Flexbox en el Manual de Flexbox.

CSS Grid Layout

Esta es la herramienta definitiva para maquetación y creación de layouts avanzados, que nos da todas las posibilidades que los diseñadores para la web estábamos esperando desde hace décadas.

CSS Grid layout nos permite definir una plantilla organizada en filas y columnas, destinando el espacio que necesitemos para cada elemento de la página, de una manera muy versátil. Los elementos se pueden posicionar en cualquier lugar de la rejilla y podemos conseguir que su posición en la página sea totalmente diferente a cómo aparecen en el código HTML.

Usar Grid Layout es una auténtica maravilla, ya que nos permite con muy poco esfuerzo colocar los elementos donde deseamos y que puedan cambiar de manera radical al cambiar las condiciones de la pantalla del usuario, con total libertad para el diseñador. La única desventaja es que no funciona en algunos navegadores antiguos, como Internet Explorer, que tiene un soporte parcial y necesitas usar prefijos CSS. Pero como decíamos, ya casi nadie usa ese navegador, afortunadamente.

Puedes aprender este nuevo estándar de CSS para la maquetación con layouts avanzados en el manual de CSS Grid Layout.

Otros recursos para maquetación web

Es cierto que en este artículo nos hemos quedado un poco en la teoría, haciendo un recorrido a las distintas alternativas de maquetación. Tendrás que documentarte en cada manual de DesarrolloWeb, los cuales hemos enlazado en las anteriores líneas.

Pero antes de acabar te vamos a dar otros recursos que puedan ser de tu interés para seguir abordando este tema.

Ejemplo CssZenGarden, ilustra las posibilidades de la maquetación CSS

Existe un sitio muy interesante e ilustrador que nos puede ayudar a conocer rápidamente la potencia de las CSS y hacernos una idea de lo que puede significar su uso. Es un sitio donde se muestra un contenido y un diseño bastante logrado. Además, dispone de varios enlaces para poder ver el mismo sitio, con exactamente el mismo contenido y código HTML, pero con distinto aspecto.

La URL del sitio es http://www.csszengarden.com. Este recurso no te enseñará a maquetar porque no es un tutorial, sino que te podrá abrir los ojos en relación a las posibilidades de CSS. Gracias a él podemos ver cómo se puede llegar a alterar el diseño de una página con tan solo cambiar la hoja de estilos.

Frameworks de CSS

Existen algunos frameworks de CSS que nos han ayudado a maquetar a lo largo del tiempo, proponiendo diversos sistemas de rejilla, para conseguir posicionar los elementos de una manera sencilla para el desarrollador.

Uno de los ejemplos más destacados en este sentido es Bootsrap, que además ofrece muchas interfaces de usuario bonitas y ya listas para usar. Otro de los ejemplos más tradicionales, precursor de los frameworks CSS actuales es 960 Grid System.

Sin embargo, a día de hoy, con las herramientas CSS que nos ofrece el propio estándar no los vemos nada recomendables, por lo menos no te recomendamos usar su sistema de rejilla, ya que es mucho mejor y más versátil usar CSS Grid Layout o Flexbox directamente.

Prácticas de maquetación web

En DesarrolloWeb.com hemos publicado una compilación de artículos sobre el tema en el Manual de Maquetación CSS. En el manual podremos encontrar algunas notas interesantes e introductorias para comenzar a maquetar con CSS, pero además diversos artículos prácticos que nos ayudarán a aprender con casos reales.

Conclusión sobre maquetación web con CSS

Esperamos que este artículo te haya aclarado bastantes cosas sobre maquetación web en general y maquetación CSS en particular.

Son muchas alternativas, pero te recomiendo ir directamente a Flexbox y CSS Grid Layout, que es lo más nuevo y más versátil que existe. Estas herramientas te harán disfrutar del diseño web y las puedes usar con tranquilidad, pues el soporte está muy extendido en los navegadores.