> Manuales > Tutorial de CSS básico

Una introducción sobre cómo maquetar una página utilizando capas, que ilustra el funcionamiento y la potencia de las CSS con ejemplos.

En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos 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 que cubrir la posible laguna por parte 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 forma, es decir, los elementos que componen una página de la forma con la que se muestran. 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 lleva la utilización de las hojas de estilo a su grado máximo, de manera que cualquier definición del aspecto de la página se realiza en la declaración CSS que enlazamos con el documento HTML. Para definir la situación de los elementos en la página se utilizan las capas, a las que se aplica un posicionamiento a través también de las hojas de estilo.

Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que queramos que aparezcan en la página. Los elementos dentro de los <DIV> también se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre.

En la maquetación por capas se definen únicamente etiquetas <DIV> y las tablas sólo se utilizan para mostrar información tabulada, es decir, mostrada en filas y columnas. Cabe señalar que en la maquetación tradicional se utilizan las tablas para ajustar la posición de los elementos en la página. Seguro que muchos de los lectores están muy familiarizados con el uso de tablas para maquetar una web, pues se trata de una técnica bastante sencilla, aunque bastante poco práctica y que complica un tanto el código de las páginas web resultantes.

Ventajas e inconvenientes de la maquetación CSS

La maquetación por capas, también llamada maquetación CSS, es una forma de crear webs más evolucionada y que mejora en mucho a la maquetación tradicional (que antes se hacía por tablas), aunque también tiene sus inconvenientes.

Veamos primero algunas de las ventajas de la maquetación CSS:

Como decimos, también hay algunas desventajas:

Actualizado: La verdad es que en la actualidad casi no podemos decir que existan desventajas en la maquetación CSS, salvo la difcultad que puedan encontrar los desarrolladores para para aprender una cosa nueva. Actualmente todos los navegadores la soportan y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo.

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 el mismo contenido, pero con distinto aspecto. De ese modo podemos ver cómo se puede llegar a alterar el diseño de una página con tan solo cambiar la hoja de estilos.

La URL del sitio es http://www.csszengarden.com. Es muy interesante que seleccionéis otros diseños para ver el cambio radical que puede tener las páginas web con distintas hojas de estilos.

Nosotros hemos explorado un poco las capacidades de las CSS y hemos realizado un ejemplo de diseño de CssZenGarden por nuestra cuenta. Podemos verlo en nuestro propio servidor en este enlace.

Por donde continuar para aprender a maquetar con CSS

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.

Prestar especial atención al taller de maquetación comienza con Maquetar una página con CSS y los artículos siguientes donde se continúa ese ejemplo. Además, para los desarrolladores más avanzados que deseen disponer de unas herramientas que ayuden a la maquetación más rápida, recomendamos estudiar los artículos del framework css 960 Grid System.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual