CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la "guerra de los navegadores", hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS.

Netscape 4 e Internet Explorer 4 incorporaron parcialmente un soporte a esta recomendación, pero éste dejaba mucho que desear, especialmente en Netscape 4, por lo que no era plausible la incorporación de las CSS en el diseño de sitios salvo en un muy mínimo número de características, y esto aún con reservas, puesto que la manera de tratar los estándares era muy diferente y por eso ni aún así se podía asegurar una visualización correcta de la misma hoja de estilos. El uso más amplio de las posibilidades de las CSS en Netscape 4, por ejemplo, podía llegar a causar un "crash" en el browser sin explicación alguna. Internet Explorer 4 tenía una mejor implementación de la recomendación CSS nivel 1, pero, de nuevo, parcial -aunque permitía el uso de un mayor número de características, como aquéllas que exceden a la tipografía (la parte de las reglas de las CSS pensada para reemplazar al tradicional uso de tablas en el diseño de "layouts").

La situación, hoy, es muy diferente. Netscape 4 acaparaba, según estadísticas, el 80% de usuarios, al menos en Estados Unidos. Desde el lanzamiento de Internet Explorer 5 -que tuvo problemas al principio, luego solucionados mayormente con la versión 5.5-, esta situación cambió radicalmente y hoy es éste el navegador más usado. No obstante no incorporaba el soporte completo de las CSS nivel 1. Habría que esperar a las recientes versiones 6, para esto, e incluso para un soporte parcial de las CSS nivel 2. Otros navegadores, como Opera (el tercer navegador más usado), cuya última y también reciente versión es la 6, incluye el mismo soporte.

A diferencia de entonces, hoy, CSS ya no es una novedad, pero ahora ya no hay pretextos para no usarla. Y es posible utilizar ciertas posibilidades más amplias de las CSS, como el control de otras características gráficas tales como imágenes y colores de fondo, márgenes exactos y bordes, para evitar el trabajoso y a veces poco gratificante diseño de tablas complejas para un "layout", que incluye frecuentemente tablas anidadas y complicados algoritmos de combinación de celdas (me refiero a la forma en la que los navegadores resuelven esto para su graficación), características que hacen al archivo muy pesado para descargar, porque inundan el código con la extensa serie de etiquetas requeridas. Y también, hoy, la "guerra de los navegadores" ha terminado, y la W3C y los estándares empiezan a liderar el camino, por lo que ya no hay tantas trabas para un uso más extendido, aunque medido, de las CSS.

En vista de esta breve recapitulación, entonces, podríamos decir que los beneficios de usar CSS son dobles. Por un lado, evitamos hacer a los archivos demasiado pesados (excluyendo el largo código requerido para las tablas anidadas y el añadido de características gráficas), y definimos el "estilo visual" de un sitio entero sin necesidad de hacerlo etiqueta por etiqueta, para cada una de las páginas. Por otro, trabajamos con estándares, y separamos hasta cierto punto la estructura (vale decir, el código) de la presentación, logrando una manera más nítida de trabajar, y lo que es más: en un sencillo documento CSS, definimos lo que yo llamaría una "plantilla gráfica" para todo un sitio. Vale decir, que cualquier cambio hecho a un estilo CSS, se reflejará en todos los elementos que sean referidos a éste, automáticamente, con sólo editar un sencillo documento CSS.

Este tutorial se centra en el diseño de un documento CSS pensado para un sitio web entero, y sobretodo con el uso medido de las características de CSS nivel 1, aunque recomendando un uso medido de tablas para el "esqueleto" del "layout" de las páginas (no obstante, el tutorial no cubre este aspecto; sólo el de creación, sintaxis y edición de un documento CSS externo enlazado a los documentos HTML). Esto implica, por una parte, un "target" de navegador que no sea exclusivo de la "última generación" (la cual comprende: IE 5, 5.5, 6, Netscape 6, y Opera 6). Por lo tanto, se intenta una correcta visualización de la página también en Internet Explorer 4. Es posible que Netscape 4 muestre la página más o menos correctamente, pero esto no debe preocuparnos ya que es un navegador que no soporta estándares.

Ya no son necesarias las tablas al usar CSS ?

Las tablas fueron diseñadas para tabular data y no son precisamente la solución para diseñar nuestras páginas

En teoría podríamos reemplazar las tablas enteramente con CSS, pero este método no sería recomendable por lo problemático. Aunque quizá sea posible en un corto período de tiempo, si los estándares siguen afirmándose (en este sentido, fue muy importante la acción de la Web Standards Project, grupo de diseñadores que difundieron el uso y apoyaron las propuestas de la W3C durante la "guerra de los navegadores", y que hoy ofrecen los archivos de su sitio web para su consulta).

En consecuencia, se recomienda utilizar tablas, moderadamente, para la organización del "layout", y CSS para el resto. En suma, aquí sólo utilizaremos aquéllas características gráficas de CSS que no provoquen demasiado conflicto: márgenes, bordes, colores de fondo, "padding", y alineación de texto; no más. El objetivo es poder lograr un documento HTML que no exceda los 10kb; éste es el tamaño ideal si queremos que, con imágenes incluidas, el monto total no exceda los 50 kb.

Existen editores CSS, pero el software que nosotros usaremos será un editor de texto (recomiendo Textpad; puede descargarse una versión de prueba en http://www.textpad.com/) y los navegadores de "target" (que decidimos "soportar", qué palabra adecuada...). El lector sólo necesitará el editor de texto de su opción y cualquier navegador que soporte aceptablemente CSS nivel 1, como por ejemplo Internet Explorer 4x o superior.

Ver mas Sobre el tema: Manual de CSS