¿Qué es CSS?

MDN define CSS como el lenguaje de estilos que se usa para describir la presentación de documentos HTML o XML. Si el HTML dice qué es cada cosa, un título, un párrafo o un enlace, el CSS dice cómo se ve. Separar las dos cosas permite cambiar el diseño de una web entera sin tocar su contenido.

El nombre explica el mecanismo. «Hojas de estilo» porque las reglas se agrupan en archivos o bloques de estilos. «En cascada» porque varias reglas pueden aplicarse al mismo elemento y el navegador decide cuál gana según su origen, su especificidad y su orden. Una regla general puede decir que todos los párrafos son grises, y otra más concreta, que los de la cabecera son blancos.

CSS ya no se publica como una versión única. Se desarrolla en módulos independientes, por ejemplo para la cuadrícula, las fuentes o las animaciones, que avanzan cada uno a su ritmo. Por eso no tiene sentido hablar de CSS4 como de una versión cerrada.

Una regla CSS tiene dos partes: un selector, que indica a qué elementos se aplica, y una lista de declaraciones, que dicen qué propiedades cambian y con qué valor. Por ejemplo, un selector de encabezados de segundo nivel con la declaración color azul pinta de azul todos esos encabezados.

El CSS puede llegar al navegador de tres formas: en un archivo aparte enlazado desde el HTML, en un bloque de estilos dentro del propio HTML o como atributo de un elemento concreto. La diferencia importa para la velocidad. Lighthouse, la herramienta de auditoría de Chrome, marca como recursos que bloquean el renderizado las hojas de estilo enlazadas que el navegador tiene que descargar antes de pintar la página, y recomienda incrustar el CSS crítico, aplazar el que no lo es y eliminar el que no se usa.

Los media queries permiten que el mismo HTML se vea distinto según el ancho de pantalla, la orientación o la preferencia de modo oscuro. Gracias a ellos, una web responsive no necesita una versión móvil aparte: es el CSS quien reorganiza el contenido.

Para el SEO, el CSS cuenta por dos vías. La primera es la velocidad: una hoja de estilos grande o que bloquea el renderizado retrasa el momento en que se ve el contenido y puede empeorar métricas como el LCP, una de las Core Web Vitals. Un CSS mal planteado también provoca saltos de diseño cuando los estilos llegan tarde.

La segunda es la comprensión. Google indica en su guía de robots.txt que se pueden bloquear archivos de estilo sin importancia, pero que no se deben bloquear si su ausencia hace más difícil al rastreador entender la página. Googlebot renderiza las páginas y necesita el CSS para saber, por ejemplo, qué contenido es visible y cómo se adapta al móvil.

En el código fuente de zds.es se ve un bloque de estilos incrustado en el propio HTML: en la entrada sobre CMS de este glosario, medida el 8 de octubre de 2026, ocupa 124.828 de los 186.694 bytes de la página, dos tercios. Que sea así es una decisión de nuestra propia configuración, que le pide al generador, Astro, incrustar siempre el CSS en lugar de enlazarlo como archivo aparte. La ventaja es que el CSS propio no obliga al navegador a esperar una hoja de estilos externa antes de pintar; las únicas que siguen bloqueando son dos archivos pequeños del gestor de consentimiento, de unos 20 y 5 KB. El coste es que esos bytes viajan con cada página y no se reaprovechan de una visita a la siguiente, como ocurriría con un archivo guardado en caché. La fuente de iconos, en cambio, se carga desde fuera con una técnica que evita bloquear el primer pintado.

• Incrusta el CSS crítico, el necesario para pintar lo que se ve al cargar, y aplaza el resto.
• Elimina las reglas que no se usan, sobre todo si vienen de plantillas o frameworks completos.
• No bloquees en robots.txt los archivos de estilo que Google necesita para entender la página.
• Reserva con CSS el espacio de imágenes, anuncios y banners para evitar saltos de diseño.
• Usa media queries para adaptar el diseño a móvil en lugar de mantener una versión móvil separada.
• Mide el efecto de cada cambio de estilos con datos de campo, no solo con una prueba de laboratorio.

• Ocultar con CSS texto o enlaces pensados solo para buscadores, algo que Google considera spam.
• Cargar varias hojas de estilo completas de frameworks para usar una parte mínima de ellas.
• Bloquear la carpeta de estilos en robots.txt y dejar a Google sin forma de ver la página como un usuario.
• Cargar fuentes web sin reservar espacio ni definir una fuente de respaldo, con saltos visibles al cambiar.
• Juzgar la velocidad de una página solo en escritorio, cuando el CSS pesa más en móviles con conexiones lentas.