¿Qué se puede hacer con CSS? Una guía práctica

Las Hojas de Estilo en Cascada (CSS) es el lenguaje que transforma el HTML sin formato en páginas web visualmente diseñadas. Controla el diseño, la tipografía, el color, el movimiento y el comportamiento responsivo: todo lo que el usuario ve.

Capacidades principales

• Tipografía: Familias de fuentes, tamaños, pesos, interlineado, espaciado de letras, fuentes variables, @font-face para fuentes web personalizadas.
• Color y fondo: Hex, RGB, HSL, colores con nombre, degradados (lineal, radial, cónico), imágenes de fondo, mezclas, opacidad.
• Diseño: Flexbox, CSS Grid, columnas múltiples, flotantes (heredado), posicionamiento (relativo, absoluto, fijo, pegajoso).
• Espaciado y tamaño: Margen, relleno, espacio, ancho/alto, mínimo/máximo, relación de aspecto, box-sizing.
• Bordes y efectos: Radio, sombras (box-shadow, text-shadow), contornos, recorte, máscaras, filtros (desenfoque, escala de grises).
• Animación y transición: @keyframes, transition, transform (translate, scale, rotate, skew), prefers-reduced-motion.
• Diseño responsivo: Consultas de medios, consultas de contenedor, unidades de viewport, tipografía fluida (clamp).
• Pseudoclases/pseudoelementos: :hover, :focus, :nth-child, ::before, ::after, ::selection.
• Propiedades personalizadas (variables CSS): Valores reutilizables, temas, actualizaciones en tiempo de ejecución mediante JS.
• Accesibilidad: Estilos de enfoque, modos de alto contraste, movimiento reducido, propiedades lógicas (margin-inline-start).

Lo que CSS no puede hacer

• Ejecutar lógica/bucles (usa JavaScript).
• Obtener datos de API.
• Modificar la estructura HTML (solo darle estilo).
• Persistir el estado entre sesiones (usa localStorage/cookies mediante JS).

Mejores prácticas modernas

• Consultas de medios móvil primero.
• Propiedades lógicas para soporte de RTL.
• Propiedades personalizadas CSS para tokens de diseño.
• Arquitectura en capas: restablecimiento → base → componentes → utilidades.
• Usa @supports para mejora progresiva.

CSS es ahora un sistema de estilo potente y programable, mucho más allá de la simple herramienta de “fuente y color” de principios de los años 2000.