Definición:
CSS, siglas de Cascading Style Sheets u hojas de estilo en cascada, es un lenguaje utilizado para describir la presentación de documentos escritos en HTML, XML y otros lenguajes de marcado. Permite controlar colores, tipografías, espacios, tamaños, distribución, adaptación a pantallas y otros aspectos visuales sin mezclar esas decisiones con la estructura principal del contenido.
CSS es uno de los lenguajes fundamentales de la web abierta. El navegador combina las reglas de estilo aplicables, resuelve sus prioridades mediante la cascada y representa el resultado en pantalla, impresión u otros medios compatibles.
Índice de contenidos
Cómo funciona CSS
Una regla CSS básica contiene un selector y un bloque de declaraciones. El selector identifica los elementos afectados y cada declaración relaciona una propiedad con un valor:
.tarjeta {
background-color: white;
border: 1px solid #d9e1e5;
padding: 1rem;
}
En este ejemplo, .tarjeta selecciona los elementos que tengan esa clase. Las propiedades definen el fondo, el borde y el espacio interior. El navegador analiza las reglas válidas y calcula el estilo final de cada elemento.
Los selectores pueden referirse a tipos de elemento, clases, identificadores, atributos, estados o relaciones dentro del documento. Las declaraciones pueden utilizar unidades absolutas o relativas, palabras clave, colores, funciones y variables personalizadas.
Qué significa la cascada en CSS
La palabra «cascada» describe el proceso que decide qué valor se aplica cuando varias declaraciones afectan a la misma propiedad de un elemento. No significa únicamente que una página pueda cargar varias hojas de estilo.
El navegador considera factores como el origen de las reglas, su importancia, las capas de cascada, la especificidad del selector, la proximidad del ámbito y el orden de aparición. Algunas propiedades también se heredan desde elementos antecesores, aunque herencia y cascada son mecanismos relacionados pero diferentes.
Una regla más específica no gana siempre. Una declaración marcada como importante, una capa con otra prioridad o una regla procedente de otro origen pueden cambiar el resultado. Comprender este proceso evita acumular selectores innecesariamente complejos o utilizar !important como solución habitual.
Formas de aplicar CSS a una página
CSS puede incorporarse a un documento de tres maneras principales. La elección depende del alcance, la reutilización y las condiciones del proyecto:
- Hoja externa: el documento HTML enlaza un archivo
.css. Facilita compartir estilos entre páginas, organizar el código y aprovechar la caché del navegador. - Bloque interno: las reglas se incluyen dentro de un elemento
<style>del propio documento. Puede servir para estilos específicos de una página o para determinadas optimizaciones de carga. - Estilo en línea: la declaración se escribe en el atributo
stylede un elemento. Tiene usos puntuales, pero dificulta la reutilización y el mantenimiento cuando se extiende por el sitio.
Una página puede combinar estas formas. La procedencia de una declaración no determina por sí sola su prioridad, porque el resultado depende del conjunto de reglas de la cascada.
Para qué sirve CSS
CSS permite definir la presentación y el comportamiento visual de una interfaz. Entre sus capacidades se encuentran:
- Tipografías, colores, fondos, bordes, sombras y transparencias.
- Márgenes, rellenos, tamaños y el modelo de caja.
- Distribuciones mediante flujo normal, posicionamiento, flexbox, grid y columnas.
- Diseños adaptables con media queries y consultas de contenedor.
- Estados interactivos mediante pseudoclases como
:hovero:focus-visible. - Componentes reutilizables mediante clases, propiedades personalizadas y capas.
- Transformaciones, transiciones y animaciones.
- Estilos específicos para pantalla, impresión y otras condiciones del medio.
CSS puede aplicarse a HTML, SVG, XML y otros documentos compatibles. No crea por sí mismo la estructura semántica ni la lógica de una aplicación: esas funciones corresponden normalmente al lenguaje de marcado y a JavaScript.
CSS y diseño responsive
El diseño adaptable utiliza CSS para responder al espacio disponible y a determinadas características del dispositivo o del usuario. Las unidades relativas, las imágenes flexibles, flexbox y grid permiten construir distribuciones que no dependan de una anchura fija.
Las media queries aplican reglas según condiciones como el ancho de la ventana, la orientación o las preferencias de movimiento y contraste. Las consultas de contenedor permiten adaptar un componente al espacio de su contenedor en lugar de depender únicamente del tamaño de la pantalla.
Un diseño responsive no consiste solo en añadir puntos de ruptura para móvil. También debe conservar legibilidad, orden, navegación, tamaño de objetivos táctiles y capacidad de ampliación sin pérdida de contenido.
Evolución y estandarización de CSS
Håkon Wium Lie propuso CSS en 1994 y el W3C publicó CSS1 como recomendación en 1996. CSS2 amplió posteriormente el lenguaje y CSS 2.1 consolidó correcciones e interoperabilidad.
Después de CSS 2.1, el lenguaje pasó a desarrollarse mediante módulos que evolucionan a ritmos diferentes. Color, selectores, fondos, grid o transformaciones pueden tener sus propios niveles. Por eso, no existe una versión única denominada CSS4, ni todo el CSS moderno pertenece a una versión homogénea llamada CSS3.
El W3C publica especificaciones y snapshots que reúnen estados estables del lenguaje. La compatibilidad real de una característica depende de su implementación en los navegadores, por lo que conviene consultar documentación y tablas de soporte antes de utilizar funciones recientes. La referencia de CSS de MDN reúne sintaxis, compatibilidad y ejemplos actualizados.
CSS, rendimiento, accesibilidad y SEO
CSS no mejora el posicionamiento orgánico de forma automática. Sin embargo, sus decisiones pueden afectar al renderizado, la experiencia móvil, la estabilidad visual y el tiempo necesario para mostrar el contenido. Una hoja grande, bloqueante o cargada con reglas innecesarias puede perjudicar el rendimiento.
Entre las prácticas útiles se encuentran eliminar CSS no utilizado con cautela, reducir duplicidades, dividir recursos cuando esté justificado, comprimirlos, aplicar una política de caché y evitar dependencias innecesarias. El CSS crítico puede ayudar a mostrar antes la parte inicial de una página, pero una extracción incorrecta puede causar estilos incompletos o duplicados.
La accesibilidad también depende de la implementación. Deben conservarse contrastes suficientes, indicadores visibles de foco, orden comprensible, ampliación y reflujo. Las animaciones pueden respetar prefers-reduced-motion, y ocultar visualmente un elemento requiere distinguir entre contenido decorativo, visible, interactivo y destinado a tecnologías de asistencia.
Una optimización WPO debe evaluar el CSS junto con HTML, fuentes, imágenes, JavaScript, caché y comportamiento real del navegador. La minificación o un archivo más pequeño son medios técnicos, no garantías aisladas de velocidad, accesibilidad o mejores posiciones.