CSS (Cascading Style Sheets) es el lenguaje que separó el contenido de la presentación en la web. Desde su nacimiento en 1996, CSS ha evolucionado para permitir desde simples cambios de color hasta complejas interfaces responsivas y animadas.

En este artículo repasamos la evolución de CSS, sus versiones principales, hitos y cómo cada avance ha cambiado la forma de diseñar para la web.

---

CSS 1 (1996): El inicio de la separación

Propuesto por Håkon Wium Lie y Bert Bos, CSS 1 fue publicado por el W3C en diciembre de 1996. Permitía controlar fuentes, colores, márgenes y alineación, pero era muy limitado.

body {
  color: black;
  background: white;
  font-family: Arial, sans-serif;
}
h1 {
  text-align: center;
}

Los navegadores tardaron en implementarlo de forma consistente, pero fue el primer paso para dejar atrás las etiquetas de presentación en HTML.

---

CSS 2 (1998): Maquetación y medios

CSS 2 llegó en 1998 con grandes novedades: soporte para posicionamiento absoluto y relativo, z-index, media types (impresión, pantalla), hojas de estilo externas y selectores avanzados.

@media print {
  body { font-size: 12pt; }
}
#menu {
  position: absolute;
  left: 0;
  top: 0;
}

Permitió crear layouts más complejos y sentó las bases para el diseño web profesional.

---

CSS 2.1 (2011): Correcciones y compatibilidad

CSS 2.1 fue una revisión para reflejar lo que realmente implementaban los navegadores. Se eliminaron o corrigieron propiedades problemáticas y se mejoró la interoperabilidad.

---

CSS3 (2001–2017): Módulos y revolución visual

A diferencia de versiones anteriores, CSS3 se dividió en módulos independientes (selectores, fondos, bordes, animaciones, flexbox, grid, etc.), permitiendo que cada parte evolucionara a su propio ritmo.

Selectores avanzados

article > h2:first-child {
  color: #4f46e5;
}

Bordes redondeados y sombras

.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

Transiciones y animaciones

button {
  transition: background 0.3s;
}
button:hover {
  background: #4f46e5;
  color: white;
}

Flexbox y Grid: layouts modernos

.container {
  display: flex;
  gap: 1rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

---

CSS Custom Properties (Variables)

Introducidas en 2015, permiten definir valores reutilizables y crear temas dinámicos:

:root {
  --color-principal: #4f46e5;
}
.btn {
  background: var(--color-principal);
}

---

CSS Houdini, Containment y más allá

Hoy CSS sigue evolucionando con nuevas APIs como Houdini (acceso bajo nivel al motor de CSS), container queries, subgrid, nesting y más.

.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card {
    font-size: 1.5rem;
  }
}

---

Línea del tiempo

Versión/Módulo	Año	Hito principal
CSS 1	1996	Primer estándar, color y fuentes
CSS 2	1998	Posicionamiento, media types
CSS 2.1	2011	Correcciones y compatibilidad
CSS3 (módulos)	2001–17	Selectores, animaciones, flexbox, grid
Custom Properties	2015	Variables nativas
Houdini, Container…	2020+	APIs avanzadas, container queries

---

Conclusión

CSS ha pasado de ser un lenguaje simple para cambiar colores a una herramienta poderosa para crear interfaces complejas, responsivas y accesibles. Su evolución ha permitido separar completamente el contenido de la presentación y ha dado lugar a una web mucho más rica y expresiva.

---