CSS es el acrónimo de Cascading Style Sheets, o lo que sería en español Hojas de Estilo en Cascada. Es un lenguaje que sirve para especificar el estilo o aspecto de las páginas web. CSS se define en base a un estándar publicado por una organización llamada W3C, que también se encarga de estandarizar el propio lenguaje HTML.

En este artículo comenzamos el Manual de CSS y entramos en materia con los antecedentes de CSS, las razones por las que se han desarrollado las hojas de estilo en cascada, y los objetivos que trata de cumplir.

Por qué existe CSS

El lenguaje HTML está limitado a la hora de aplicar forma a un documento. Sirve de manera excelente para especificar el contenido que debe tener una página web, pero no permite definir cómo ese documento se debe presentar al usuario.

Esto es así porque HTML es un lenguaje ideado para definir páginas con contenido basado principalmente en texto y enlaces, a los que se le puede agregar algunos elementos gráficos como imágenes.

Al principio, para solucionar las limitaciónes del HTML, los diseñadores usaron técnicas tales como las tablas, imágenes para ajustar márgenes, así como etiquetas que no formaban parte del estándar. Estas "trampas", aunque daban sus resultados estéticos, lo cierto es que causaban muchos problemas, por ejemplo a la hora de su visualización en distintas plataformas, o a la hora de mantener el código HTML de sitios medianos o grandes.

Como resultado, los diseñadores se habían visto tremendamente frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las páginas. Hay que entender que muchos de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto y, al llegar a la web, se encontraban con un medio muy hostil y sin prácticamente posibilidades de hacer realidad sus ideas.

Finalmente, otro motivo que ha hecho necesaria la creación de CSS ha sido la separación del contenido de la presentación. Al inicio las páginas web tenían mezclado en su código HTML el contenido con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes, ya que la lectura del código HTML se hace pesada y dificil a la hora de buscar errores o depurar las páginas. Además, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que los textos están mezclados con etiquetas incrustadas para dar forma a éstos, pues se degrada su utilidad.

Cómo CSS permitió superar los problemas que enfrentaba HTML

Como hemos visto, para facilitar un correcto mantenimiento de las páginas web y para permitir que los diseñadores pudieran trabajar como sería deseable, había que introducir un nuevo elemento en los estándares y éste fue el lenguaje CSS.

CSS se ideó para aplicar el formato en las páginas, de una manera mucho más detallada, con nuevas posibilidades que no estaban al alcance de HTML. Al mismo tiempo, gracias a la posibilidad de aplicar el estilo de manera externa al propio documento HTML, se consiguió que el mantenimiento de las páginas fuese mucho más sencillo.

Sin embargo, no fue un camino sencillo. La primera versión de CSS era bastante limitada y aunque rápidamente se lanzó una segunda versión, no llegó a cubrir las necesidades de todos los desarrolladores y diseñadores. Sin duda fue un paso adelante muy importante, pero la web siguió avanzando a un ritmo más rápido que los estándares y los diseñadores seguian teniendo que arreglárselas para conseguir efectos que eran imposibles con HTML y CSS. Ejemplos de ello eran las cajas con sombras, los bordes redondeados, el uso de textos con fuentes personalizadas, etc.

Afortunadamente, con la evolución del lenguaje aportada por CSS 3, prácticamente todas las necesidades fueron cubiertas. Estándares como Flexbox y el más novedoso CSS Grid Layout también han colaborado para que CSS hoy sea un lenguaje con prácticamente todas las posibilidades que podríamos desear.

Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a los elementos de la página.

Podemos aplicar CSS a muchos niveles, desde un sitio web entero hasta una pequeña etiqueta. Estos son los principales bloques de acción.

• Un web entero, de modo que se puede definir en un único lugar el estilo de toda una web, de una sola vez.
• Un documento HTML o página en particular. Se puede definir la forma de cada uno de los bloques de contenido de una página, en una declaración que afectará a un solo documento de un sitio web.
• Una porción del documento, aplicando estilos visibles en un trozo de la página, como podría ser la cabecera.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:

• Podemos definir la distancia entre líneas del documento.
• Se puede aplicar identado (sangrado) a las primeras líneas del párrafo.
• Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
• Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados...

Otra ventaja importante de CSS es la capacidad de espeficiar las medidas con diversas unidades. Si HTML tan sólo podíamos definir atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades como:

• Pixels (px) y porcentaje (%), como antes.
• Pulgadas (in).
• Puntos (pt).
• Centímetros (cm).
• ... y muchas otras que explicaremos cuando llegue el momento

Navegadores que lo soportan

En este momento absolutamente todos los navegadores soportan CSS, por lo que puedes usar este lenguaje con total seguridad y garantía. Pero no solo puedes, sino debes, porque con CSS aumentas mucho la optimización del sitio web en varios términos, no solo estéticos. Aplicando CSS correctamente, a nivel e sitio web completo, reduces el peso en bytes de las páginas y mejoras su mantenibilidad. Como CSS ha sido presentado por etapas y en distintas versiones, hay características avanzadas de la última versión del lenguaje que puede que no se vean en todos los navegadores anticuados, nos referimos principalmente a Internet Explorer 8 y anteriores. Hoy por suerte todos los navegadores se actualizan por ellos mismos, lo que mejora el soporte a los estándares como CSS y permite que los desarrolladores lo usemos con mayor confianza.

Alcance del manual de CSS

En estas páginas dedicadas a CSS pretendemos dar a conocer la tecnología con un enfoque práctico, para que en pocos capítulos podéis usar las CSS de una manera depurada, reflejando toda nuestra experiencia en su uso. No pretendendemos explorar todos los aspectos de la tecnología ya que para realizar esto necesitariamos un la extensión de un libro entero, pero sí ofrecer todos los conocimientos necesarios para aprovechar el máximo de las posibilidades del lenguaje.

A lo largo del Manual de CSS veremos diferentes estados de las Hojas de Estilo en Cascada, pues han ido evolucionando con el paso de los años. En este manual se estudiarán principalmente las especificaciones de CSS 1 y CSS 2 y dedicaremos un texto diferente al estudio de la más moderna especificación del lenguaje en estos momentos, su tercera especificación, en el Manual de CSS 3.

Además, para las personas que lo deseen, hemos realizado diversos videotutoriales que serán especialmente interesantes para las personas que quieran aprender CSS de una manera práctica y visual. Está todo en el Videotutorial de CSS.

Este artículo espero que te deje con ganas de conocer más, así que no te detengas y continua aprendiendo cuál es la filosofía principal de CSS: la separación del contenido y la presentación.