Dos webs pueden compartir exactamente el mismo HTML de contenido y, aun así, tener aspectos completamente distintos entre sí. Esa diferencia visual la aporta el CSS (Cascading Style Sheets, «hojas de estilo en cascada»): el lenguaje que define cómo se ve el contenido marcado en HTML, desde colores y tipografías hasta la disposición completa de los elementos en pantalla.
Separar contenido y presentación, la idea de fondo
Antes de que CSS se generalizara, el estilo visual se mezclaba directamente dentro del propio HTML, lo que hacía cualquier cambio visual mucho más laborioso. Separar ambas capas permite modificar por completo el aspecto de una web (colores, tipografías, disposición) sin tocar ni una palabra del contenido real, o al revés, cambiar el contenido sin arriesgarse a romper el diseño visual.
Qué controla exactamente CSS
- Colores y fondos de cada elemento de la página.
- Tipografías, tamaños de texto y espaciados entre líneas o párrafos.
- La disposición general: cómo se organizan los elementos en columnas, filas o cuadrículas.
- El comportamiento responsive: cómo se reorganiza todo según el tamaño de pantalla del dispositivo.
- Animaciones y transiciones sencillas, como el cambio de color de un botón al pasar el cursor por encima.
Por qué el «cascading» (en cascada) del nombre importa
Las reglas de estilo se aplican en cascada, según un orden de prioridad determinado: estilos más específicos pueden sobrescribir a otros más generales, y estilos definidos más tarde en el código pueden sobrescribir a los anteriores si tienen la misma especificidad. Entender esta lógica de cascada es clave para depurar por qué un estilo no se aplica como se esperaba.
Un exceso habitual que penaliza el rendimiento
Acumular hojas de estilo muy grandes, con reglas duplicadas o innecesarias procedentes de plugins y temas mal optimizados, ralentiza la carga de una página, afectando directamente a los Core Web Vitals. Depurar el CSS innecesario es una de las tareas técnicas que más suele mejorar la velocidad de carga con relativamente poco esfuerzo.