Estamos ya en 2015 y dado que el Tutorial de CSS básico lo comenzamos a escribir en 2001 siempre es bueno retomar algunos asuntos elementales que nos ayuden a mejorar el texto y sobre todo que ayuden a las personas que están comenzando con CSS a entender bien el motivo de su existencia.

En este sentido, lo más importante de CSS es la separación del contenido y de la presentación. Esta separación no es algo que sale "de la nada", sino que responde a las necesidades de los creadores de sitios web y viene a facilitar la vida de aquellos que nos dedicamos al diseño web.

La separación entre contenido y presentación tiene una serie de beneficios que os vamos a resumir a continuación. No obstante, con la intención de no confundir a nadie, conviene aclarar que el objetivo de CSS es el de especificar el estilo, formato o forma de la información desplegada en una página web. La separación del contenido y la presentación es una necesidad, CSS es la respuesta a esa necesidad y sirve para definir los estilos de una página.

Por qué de la separación del contenido y de la presentación

Comencemos explicando qué es esto del contenido y la presentación. "El qué y el cómo" ("qué" es lo que quieres mostrar y "cómo" deseas mostrarlo) y el motivo por el que es tan importante que estén bien separados.

El contenido es lo que se escribe con el HTML. Es aquella información que se presenta en una página, tanto textos como imágenes, banners, interfaces de usuario, formularios, barras de navegación, así como cualquier otro elemento que encontramos dentro de una web.

La presentación es cómo deseamos que ese contenido se muestre en la página. Los colores, distancias de márgenes, colocación de los elementos en el layout, tipografías, fondos, etc. forman parte de la presentación.

Antiguamente contenido y presentación iban juntos en un mismo archivo, dentro del código HTML. Existían etiquetas para definir la tipografía, el tamaño de los textos, atributos para definir el color de fondo de una página o una tabla, los márgenes, etc. Incluso cuando creábamos una estructura en la página (por ejemplo contenidos en dos columnas, con un pie, cabecera, etc.) en el propio HTML teníamos que definir íbamos a colocar cada cosa, el tamaño de las columnas, su posición, color, etc.

Esa situación duró poco tiempo, afortunadamente, pues acarreaba diversas problemáticas. Te damos un par de ejemplos en situaciones que podrían ocurrir.

Imagina que tienes una cabecera de color rosa y un día decides que la quieres de color verde. Como el contenido y presentación estaban unidos en cada uno de los archivos (páginas) de un sitio web, si querías hacer ese cambio, estabas obligado a editar todos y cada uno de los archivos del sitio web y en el lugar donde habías escrito el color de tu cabecera, cambiarlo por el nuevo color deseado. Esto ocurre así con cualquier elemento, por poner otro ejemplo, si un día decidías que había que cambiar el tipo de letra del contenido de tu sitio tenías que editar todos los archivos y modificar las etiquetas que definen el estilo de la fuente. Vamos, una auténtica locura, sobretodo si teníamos un sitio grande con decenas o cientos de páginas.

Pero no solo eso, si mañana decidías que en tu layout de dos columnas ibas a agregar una tercera para colocar algunos de los contenidos existentes, te obligabas a cambiar el código HTML, recolocar elementos de un lugar para otro… en cada uno de los archivos de tu sitio. Un cambio que aparentemente no era tan aparatoso, tendría como resultado decenas o cientos de horas editando código en diversos archivos.

Cómo se implementa la separación del contenido y presentación

Con la llegada de las CSS se animó a los desarrolladores a colocar en el HTML únicamente el código necesario para definir el contenido de la página. Es decir, párrafos con textos, imágenes, formularios. Pero no colocar una sola etiqueta o atributo para definir los estilos. Un archivo HTML queda entonces limitado a lo que sería un texto en color negro sobre un fondo blanco, así como imágenes y otros elementos, pero sin ajustarse a ningún layout.

Todo lo que son estilos o forma con la que se presentan esos elementos, debe indicarse en el CSS. Allí definiremos el tipo de letra para cada uno de los elementos de la página, la familia tipográfica, su tamaño, color, etc. Definimos en el CSS también el fondo de la página o de otros elementos, los espacios entre ellos, etc. Pero no solo eso, también podemos definir el layout o disposición de todo el conjunto de la página, distribución en columnas, cabecera, pie…

Estos estilos se definen en un archivo independiente del HTML, una única vez. En todas y cada una de las páginas que componen el sitio web se enlaza con la hoja de estilos, de modo que todas comparten un mismo aspecto. De este modo, cuando deseamos cambiar cualquier cosa relacionada con el aspecto de la página, solo necesitamos tocar la hoja de estilo, una única vez, en un único archivo y con ello se alterará la presentación de todas las páginas del sitio.

¿Queremos un nuevo color en la cabecera? simplemente tocamos los estilos del elemento HTML que engloba la cabecera. ¿Queremos una nueva tipografía en los textos? pues simplemente tocamos los atributos donde se definía la tipografía para el cuerpo de la página. ¿Queremos modificar el layout agregando una nueva columna? pues simplemente reasignamos tamaños a las columnas existentes hasta el momento y definimos la posición de los elementos que queremos que se vean en la nueva columna.

Si hemos seguido las reglas básicas y las buenas prácticas relacionadas con el CSS, solo tendremos que tocar el código en un único lugar, el archivo con nuestras CSS, y ello nos permitirá cambiar radicalmente el aspecto de la web, en todas las páginas que componen el sitio.

El CSS nos evita usar trucos antiguos "de diseñadores"

Ahora queremos hablaros de otra de las problemáticas que CSS trata de resolver. Está también relacionada con la necesidad de separar el contenido y la presentación y te permitirá entender cómo en la evolución de CSS se ha ido alcanzando poco a poco ese objetivo.

A lo largo de la historia del CSS se ha avanzado mucho. A pesar fijar esa separación del código relacionado con el contenido y la presentación, los diseñadores siempre quieren llegar un poco más allá y ello ha provocado que a veces se pierda la perspectiva. En su afán de hacer un buen trabajo, los creativos conciben diseños que tratan de ser innovadores, distinguidos, atractivos, modernos y en esa búsqueda acababan siempre en la necesidad de usar diversos trucos "de diseñadores", saltándose algunas de las normas básicas de la separación del qué y el cómo.

Esto lo podemos ver con varios ejemplos que nos faciliten entender el tipo de situaciones que se producían en el pasado y que ahora en menor medida también ocurren, ya sea por desconocimiento de CSS o porque realmente el lenguaje de definición de estilos no sea capaz de solventar alguna necesidad.

Por ejemplo, un diseñador desea tener dos fondos de imagen distintos en un mismo elemento de la página. Como esto no es posible en navegadores antiguos y solo se presentó una solución con CSS3, lo que hace es anidar dos elementos y aplicarle un fondo de imagen a cada uno. Aquí, aunque use estilos CSS para definir los fondos de imagen, está creando elementos HTML que no tienen intención de mostrar un contenido, sino de dar soporte a una necesidad en el aspecto estético. Otro ejemplo similar, como antes no se podía crear elementos con las esquinas redondeadas, recurre a anidad diversas etiquetas, o a Javascript, para crear ese aspecto deseado.

Otro ejemplo un tanto diferente. Un diseñador desea un degradado de fondo. Como antes no se podían especificar degradados, usa imágenes creadas con Photoshop, u otro programa de diseño gráfico, para generar el degradado que usará de fondo. Esto puede ocurrir también para generar un elemento que tiene una sombra, o un resplandor.

Sin embargo, en CSS3 se dan respuesta a todas esas necesidades de diseño y poco a poco se han ido incorporando en los navegadores modernos, hasta tal punto que hoy no es necesario recurrir a trucos que nos obligaban a cambiar el HTML atendiendo a criterios estéticos.

A medida que la web evoluciona también se van encontrando nuevas necesidades de diseño y puede que haya miles de recursos de diseñadores que todavía no se han pensado y para los cuales no haya forma de implementar soluciones estéticas con el único uso de CSS. En ese sentido, nuevas versiones de las especificaciones de las CSS vendrán, que resolverán esas necesidades. Nosotros como desarrolladores debemos adaptarnos a lo que hoy disponemos y ser innovadores en la medida que respetemos la filosofía y buenas prácticas de los lenguajes de la Web.

Si estás empezando con las CSS te interesará seguir leyendo el Tutorial de CSS básico. Si eres de los que ya tiene una idea del lenguaje y desea saber cuáles son las características más nuevas, como degradados, animaciones, fuentes personalizadas, etc. te intersará leer el Manual de CSS3.