CSS y adiós a las tablas, por Luman

En este primer artículo vamos a intentar dar una visión de conjunto de lo que nos ofrecen las Hojas de Estilo en Cascada (Cascading Style Sheets) , cómo pueden beneficiarnos su uso, herramientas que nos facilitarán su creación, optimizar nuestras hojas de estilo para que pesen menos, pequeños trucos para salvar incompatibilidades con el ****** (añada aquí su adjetivo) Internet Explorer, y unos cuantos enlaces para meternos en profundidad con este apasionante tema.

Cuando empezamos a lanzarnos a la aventura del diseño web, creo que hay dos maneras de empezar: una buena y complicada o la mala y facilona. La primera es en la que aprendemos a usar por nosotros mismos las distintas etiquetas de html y maquetamos nuestras paginas html con un simple editor de textos haciendo la visualización en un navegador. La segunda es la que empezamos directamente en Dreamweaver o GoLive. No cuento a los que empiezan con FrontPage porque eso no hacer páginas webs ni nada parecido. El primer método nos lleva a un código relativamente limpio y exacto de lo que queremos, sentando una base para aprender Javascript, CSS y lenguajes dímanicos como PHP o ASP. Si usamos directamente un editor del tipo WYSWYG (lo que ves es lo que tienes) como Dreamweaver o GoLive, sin aprender primero las sencillas etiquetas HTML, da por seguro de que tus páginas estarán plagadas de código inútil o redundante, con muchas líneas de código innecesario. Pero también está el metodo del diseñador gráfico. Coger Photoshop, hacer tu diseño, trazar unas guías y dejar que Photoshop nos cree una página repleta de tablas y gráficos. No tengo que decir que este camino es casi tan malo como el de FrontPage.

Elijamos el "camino del código" o el del editor visual, posiblemente estemos acostumbrados a usar tablas para colocar los distintos elementos de nuestro sitio web (menus, cabecera, pie, textos…) ¿Y qué tiene de malo usar tablas para esto? Si nos vamos a los puristas del XHTML (algo con lo que yo mismo, siendo sincero, aún no me atrevo a meterme, pero que forma parte del camino, lo queramos o no) , pues nos dirán que las tablas no se pensaron para maquetar si no para mostrar datos tabulados, y que el uso de hojas de estilo, separando el contenido de la forma, es la mejor forma para conseguir un diseño correcto y facilitar la indexación de contenidos por parte de los buscadores. Ejemplos de lo que nos permite esa separación de forma y contenido los tenemos en proyectos como el CSS Zen Garden o la reciente CamaleónCSS.

De momento vamos a comenzar a verle utilidad al uso de las Hojas de Estilo, ya que su uso nos va a permitir centralizar nuestro diseño en un mismo archivo (.css), con lo que un cambio en este automáticamente nos va a permitir actualizar nuestro sitio en el acto, y nos va a dar además mucho más control sobre los elementos de nuestro diseño (color, tamaño, visibilidad…) que lo que podríamos conseguir usando HTML. Así, poco a poco, iremos haciendo desaparecer de nuestros diseños las tablas por etiquetas <div>, o conseguiremos crear sistemas de navegación por pestañas con simples listas ordenados (<ol>) . Bueno lo de eliminar las tablas para maquetar, algunos lo pueden ver muy "heavy" y preguntar el por qué, como me acaba de preguntar Neeke por iChat con el símil del papel del WC: "no se inventó para sonarse los mocos, pero yo lo hago". Argumento difícil de debatir ya que podemos encontrar papel de WC de una textura y suavidad similar a la de un kleneex. Pero no estamos distrayendo del tema. Quede claro que podemos seguir usando tablas y usar estilos, no tienen ninguna incompatibilidad entre ellos. Podríamos decir que este sería el primer nivel de aprendizaje, incorparar estilos a nuestra maquetación con tablas, en un segundo iríamos haciendo desaparecer estos elementos. Resumiendo lo que nos va permitir las hojas de estilo es redefinir la forma en que se previsualizan los distintos elementos o etiquetas que usemos en nuestro diseño.

¿Cómo aplicamos estilos a nuestro diseño?

Podemos usar una hoja de estilos externa que contiene todas las especificaciones, también podemos incluir nuestros estilos dentro del mismo html en la cabecera, es decir, entre las etiquetas <head></head>, o podemos aplicar estilos dentro de una etiqueta. Veamos unos sencillos ejemplos de esto casos.

Podemos tener un archivo externo llamado estilo.css que contenga algo como

Y en nuestra página html, en la cabecera, entre las etiquetas <head></head> ponemos un enlace al archivo tal como este:

<link rel="stylesheet" type="text/css" href="estilo.css">

¿Qué conseguimos con esto? Pues olvidarnos de poner en el body las etiquetas leftmargin="0" topmargin="0" marginheight="0" marginwidth="0". Este es el método ideal. Pero si por ejemplo vamos a definir estilos que sólo vamos a usar en una de las páginas podemos añadir los estilos dentro del html, dentro de las etiquetas <head></head> de este modo:

Y la tercera forma de aplicar estulos la tenemos aplicando directamente los estilos dentro de la etiqueta html

En estos ejemplos estamos modificando la etiqueta html body. De igual modo podemos cambiar cualquier etiqueta como los enlaces (con los efecto hover al pasar el ratón sobre ellos) , cabeceras (h1,h2…), etc. Otra manera de usar estilos es definirlos usando Identificadores y Clases. Para lo primero deberemos añadir el parámetro id="menu" dentro de la etiqueta

<td id="menu">

y en nuestra hoja de estilos definir el estilo del identificador menu del siguiente modo:

Con esto conseguiremos que los elementos detro de la etiqueta con el identificador "menu" estén en negrita, tamaño de fuente 10px, interlineado de 18px y la fuente sería la Helvetica, y en el caso de no tenerla instalada Arial, y si no tenemos Arial una fuente sans-serif.

La diferencia entre Identificadores y Clases es que los primeros deben ser únicos, mientras que podemos tener varias clases que se llamen igual pero dentro de distintos Identificadores. Para añadir una clase a una etiqueta usamos el parámetro class="", que podemos usar junto con un Identificador de tal modo nuestra hoja de estilos sería:

Y para aplicarlo:

Aquí vemos una característica de las Hojas de Estilo, que es la Herencia. En nuestro ejemplo anterior la clase destacado aparecería también en Arial, con una fuente de 10px e interlineado de 18px, características heredadas del Identificador #menu.

Resumiendo un poco lo dicho hasta ahora. Con hojas de estilos podremos especificar márgenes, paddings, colores y formatos de letras, bordes… y un sin fin de elementos más, que podremos aplicar a las etiquetas html de manera general o mediante Identificadores o mendiante Clases.

¿Cómo crear tus hojas de estilo?

Con las hojas de estilo pasa lo mismo que lo que he comentado antes con editar nuestro propio código. Podemos usar las herramientas que incorporan Dreamweaver o GoLive o algunas específicas para diseñar Hojas de Estilo como CSSEdit. Pero están tienden a meter demasiado código y no usar los métodos abreviados para definir estilos como estoy haciendo yo en los ejemplos superiores. Un ejemplo para el caso de querer poner los márgenes y el padding de nuesta página a 0. Dreamweaver añade todo este código:

Todo esto se puede abreviar as??:

Por eso insisto tanto en conocer y escribir nuestro propio código, y no penséis que hay mucho que aprender de CSS.

CSS y el mundo "real"

El principal problema con que nos encontramos a la hora de usar Hojas de Estilo se resume en dos palabras: Internet Explorer, el pseudo-navegador (por llamarlo de alguna manera) más extendido a fecha de hoy. Pero cuidado que Firefox se está extendiendo de manera endémica sobre las peceras. Aún así aún nos podemos encontrar con algún IE 5.0 sin apenas soporte para CSS. Para solucionar esto lo que podemos hacer es comentar los estilos conflictivos de manera que IE no lea los estilos incapaz de representar bien y los Navegadores sí lo hagan. Hay mucha teoría al respecto, pero a mi el único que me ha funcionado a sido el siguiente:

De este modo IE se queda en el primer background-image, pero los Navegadores aplicarán el segundo. Cuidado! Si añadis más estilos a continuación dentro de ese Identificador o Clase no serán interpretados, por lo que lo mejor es ponerlos al final.

CSS al completo

Y ya para acabar unos cuantos enlaces que os vendrán muy bien para adentraros aún más en el maravilloso mundo de las Hojas de Estilos:

http://servidordetoad.mine.nu/tutorial-css/index.xhtml (tutorial muy completo para empezar desde cero)

http://www.minid.net/ (método abreviado para las Hojas de Estilos)

http://www.w3schools.com/css/css_reference.asp (referencia CSS 2.0 con el soporte de las versiones de los navegadores)

http://www.meyerweb.com/eric/css/references/css2ref.html (todos los atributos de CSS 2.0)

http://www.dezwozhere.com/links.html (un lugar con infinidad de recursos)

http://www.hicksdesign.co.uk/personal/experiments/cssnav/ (efectos rollover con CSS para crear menus).

Un artículo de Luman. Puedes visitar su web personal en Luman.info