CSS son las siglas de Cascading Style Sheets. Se ha convertido en uno de los principales lenguajes para dar apariencia y diseño a los sitios web. Junto con HTML, CSS es fundamental para los diseñadores web.

Antes del desarrollo de CSS, en 1996 por el World Wide Web Consortium (W3C), las páginas web eran extremadamente limitadas tanto en forma como en función. Los primeros navegadores presentaban una página como hipertexto: texto sin formato, imágenes y enlaces a otras páginas de hipertexto. No había ningún diseño del que destacara, simplemente había párrafos que corrían a lo largo de la página en una sola columna.

CSS permitió varias innovaciones en el diseño de la página web, como la capacidad de:

• Especificar fuentes distintas a las predeterminadas para el navegador.
• Especificar el color y el tamaño del texto y los enlaces.
• Aplicar colores a los fondos.
• Contener los elementos de la página web en cuadros y colocaresos cuadros en posiciones específicas en la página.
• Pusieron el «estilo» en las hojas de estilo y, por primera vez, se pudieron diseñar páginas web.

El primer navegador comercial en leer y utilizar CSS fue Internet Explorer 3 de Microsoft en 1998. Hasta el día de hoy, el soporte para ciertas funciones de CSS varía de un navegador a otro. El W3C, que aún supervisa y crea estándares web, lanzó recientemente un nuevo estándar para CSS: CSS3. Con CSS3, los desarrolladores esperan que todos los principales navegadores lean y muestren todas las funciones de CSS de la misma manera.

¿Cómo funciona CSS?

Para comprender los conceptos básicos de cómo funciona CSS, primero debe comprender un poco sobre HTML moderno. Los desarrolladores web diseñan las páginas según el «modelo de caja». Una página web es una serie de cuadros, cada uno contiene un elemento discreto. Estas cajas están anidadas, una dentro de otra.

Por ejemplo, el encabezado de una página es un cuadro y contiene varios cuadros más pequeños que comprenden todos los elementos que componen un encabezado: logotipo, navegación, botones de redes sociales, botones del carrito de compras, etc. Mediante CSS, un desarrollador asigna estilos al «encabezado cuadro».

Aquí es donde entra en juego la parte de «cascada» de las hojas de estilo en cascada. Los estilos de fuente aplicados al encabezado descienden en cascada a todos los elementos contenidos dentro del encabezado. Los elementos que contengan texto como navegación, enlaces o llamadas a la acción serán todos morados, Arial y quince puntos de altura.

imagen: @mehaniq