CSS — Cascading Style Sheets

El lenguaje de estilos que controla cómo se ve y cómo se dispone cada elemento HTML. Separa la presentación visual del contenido estructural, permitiendo que un mismo HTML tenga apariencias completamente distintas.

1996 CSS 1 publicado por W3C
CSS3 Módulos en constante evolución
~600 Propiedades en la especificación
Cascada Herencia + especificidad + orden

Playground — CSS en vivo

Escribe CSS en el editor y observa el resultado en tiempo real. El bloque .caja es el elemento objetivo. Experimenta con cualquier propiedad.

CSS
Resultado
¡Edita el CSS!

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que describe la presentación visual de un documento HTML. Controla colores, tipografías, espaciados, tamaños, posiciones, animaciones y prácticamente cualquier aspecto visual de una página web.

La palabra clave es "cascada": cuando múltiples reglas compiten por estilizar el mismo elemento, el navegador resuelve el conflicto mediante un algoritmo determinista basado en origen, especificidad e importancia. Entender la cascada es fundamental para escribir CSS predecible.

CSS fue creado por Håkon Wium Lie en 1994 y se publicó como estándar W3C en 1996. Desde CSS3 (2011), el lenguaje se divide en módulos independientes (selectores, layout, colores, animaciones…) que evolucionan a su propio ritmo.

Anatomía de una regla CSS

Una regla CSS tiene dos partes: el selector (qué elemento se estiliza) y el bloque de declaraciones (qué estilos se aplican).

h2.titulo ,  .card > p  { /* selector — qué elementos */
color : #1a2332 ; /* propiedad: valor */
font-size : 1.25rem ; /* unidades relativas al padre */
margin-block : 0 1em ; /* propiedad lógica: top bottom */
}
  • Selector — identifica los elementos a los que se aplica la regla. Puede ser un tipo (p), una clase (.card), un ID (#hero), un combinador (ul > li) o una pseudo-clase (:hover).
  • Propiedad — el aspecto visual a controlar (color, font-size, margin…). Hay ~600 propiedades estándar.
  • Valor — qué valor toma esa propiedad. Puede ser un color, una longitud, una palabra clave o una función CSS (calc(), clamp(), var()).
  • Declaración — par propiedad + valor separados por : y terminados en ;.
  • Regla — selector + bloque de declaraciones entre llaves { }.

La Cascada — cómo se resuelven los conflictos

Cuando múltiples reglas aplican a un mismo elemento, la cascada determina cuál gana. Se evalúan en este orden de prioridad (mayor número = mayor prioridad):

5
!important Anula todo lo demás. Usar con extrema moderación — rompe el flujo normal de la cascada y dificulta el mantenimiento.
4
Estilos en línea style="color: red" directamente en el HTML. Muy alta especificidad pero difícil de sobreescribir y mantener.
3
Especificidad del selector ID > clase/atributo/pseudo-clase > tipo/pseudo-elemento. La especificidad más alta gana entre reglas del mismo origen.
2
Orden en el código Entre reglas de igual especificidad, la última declarada gana. Base del sistema de temas y overrides.
1
Herencia Propiedades como color, font-family o line-height se heredan del elemento padre si no se sobreescriben.

Propiedades heredables (se propagan a los hijos): color, font-*, line-height, text-align, cursor, visibility, list-style…
No heredables (deben declararse explícitamente): margin, padding, border, background, width, height, display, position… Usa inherit para forzar herencia en cualquier propiedad.

Calculadora de Especificidad

La especificidad se representa como tres números (a, b, c): a = selectores ID, b = clases, atributos y pseudo-clases, c = tipos y pseudo-elementos. Un selector con mayor valor en a siempre gana sin importar los otros.

0
ID
#id
,
0
Clase
.cls :pseu [attr]
,
0
Tipo
div ::before
Escribe un selector para ver su especificidad.
Ejemplos rápidos:

El Box Model

Todo elemento HTML es una caja rectangular. El Box Model define las cuatro capas que componen esa caja, de adentro hacia afuera:

margin
border
padding
contenido
Content — el contenido real (texto, imagen). Controlado por width y height.
Padding — espacio interior entre el contenido y el borde. Tiene el color de fondo del elemento.
Border — línea alrededor del padding. Suma al tamaño total (salvo con box-sizing: border-box).
Margin — espacio exterior entre la caja y otros elementos. Transparente (no hereda el fondo).
Regla #1 de CSS moderno: añade siempre *, *::before, *::after { box-sizing: border-box; } — hace que width incluya padding y border, evitando desbordamientos inesperados.

Unidades CSS

Las unidades CSS se dividen en absolutas (valor fijo en el mundo físico) y relativas (dependen de otro valor de referencia). Para diseño web se prefieren las relativas porque escalan con el usuario y el viewport.

Absolutas
pxPíxel CSS. Referencia en pantallas: 1px = 1/96 pulgada en pantallas estándar.
ptPunto tipográfico. 1pt = 1.333px. Solo para impresión.
cm / mmCentímetros / milímetros. Útiles en CSS para impresión.
Relativas al elemento
emRelativo al font-size del propio elemento. Se acumula en nesting.
remRelativo al font-size del elemento raíz (html). No se acumula. Preferido para tamaños de texto.
chAncho del carácter "0" en la fuente actual. Útil para limitar anchos de texto legible.
exAltura de la x minúscula. Raramente usado en producción.
Relativas al viewport
vw1% del ancho del viewport. 100vw = ancho completo de la ventana.
vh1% de la altura del viewport. Problema en móvil con barras del browser — usar dvh.
dvhDynamic viewport height — incluye/excluye las barras móviles según estén visibles. Recomendado para alturas 100dvh.
vmin / vmaxEl menor / mayor valor entre vw y vh. Útil para elementos cuadrados fluidos.
Porcentajes y funciones
%Relativo al valor del mismo atributo del padre. En width, al ancho del padre; en font-size, al del padre.
calc()Mezcla unidades: calc(100% - 2rem). Operaciones: +, -, *, /.
clamp()Valor entre un mínimo y máximo. Ideal para tipografía fluida: clamp(1rem, 2.5vw, 2rem).
min() / max()Toma el menor / mayor entre dos valores. Ej: width: min(600px, 100%).

Selectores más usados

Los selectores son el mecanismo por el que CSS identifica qué elementos estilizar. Combinados, permiten una precisión quirúrgica.

Selectores básicos *universalTodos los elementos divtipoElemento por nombre de tag .claseclaseElementos con ese class #ididEl elemento con ese id único [attr]atributoTienen ese atributo; [href^="https"] comienza con
Combinadores A BdescendienteB dentro de A (cualquier nivel) A > BhijoB hijo directo de A A + Bhermano adyacenteB inmediatamente después de A A ~ Bhermano generalTodos los B hermanos de A A, BlistaAplica la regla a A y a B
Pseudo-clases de estado :hoverinteracciónCursor encima del elemento :focusinteracciónElemento con foco de teclado :activeinteracciónElemento siendo clicado :checkedformularioCheckbox o radio seleccionado :disabledformularioControl de formulario deshabilitado
Pseudo-clases estructurales :first-childposiciónPrimer hijo de su padre :last-childposiciónÚltimo hijo de su padre :nth-child(n)posición2n = pares, 2n+1 = impares, 3n = cada tercero :not(sel)negaciónElementos que NO coinciden con el selector :is(A, B)lista forgivingToma la especificidad del selector más específico

Propiedades por categoría

Las ~600 propiedades CSS se agrupan en módulos temáticos. Estas son las más usadas en cada categoría:

Box Model y Layout
width height min-width max-width padding margin border box-sizing overflow display position top/right/bottom/left z-index float clear
Flexbox
display: flex flex-direction flex-wrap justify-content align-items align-content gap flex flex-grow flex-shrink flex-basis order align-self
CSS Grid
display: grid grid-template-columns grid-template-rows grid-template-areas gap grid-column grid-row repeat() fr minmax() auto-fill auto-fit place-items place-content
Tipografía
font-family font-size font-weight font-style line-height letter-spacing word-spacing text-align text-decoration text-transform white-space word-break text-overflow
Colores y Fondos
color background background-color background-image background-size background-position opacity linear-gradient() radial-gradient() conic-gradient() mix-blend-mode filter
Efectos y Animación
transition animation @keyframes transform box-shadow text-shadow border-radius clip-path backdrop-filter will-change animation-delay animation-fill-mode
Responsive y @Rules
@media @layer @container @import @font-face @supports aspect-ratio object-fit object-position
Variables y Funciones
--nombre var() calc() clamp() min() max() env() attr() :root currentColor counter() counters()

Secciones de esta guía

11 secciones con documentación detallada, ejemplos visuales y playgrounds interactivos para cada módulo CSS:

Selectores Tipos, clases, IDs, atributos, combinadores, pseudo-clases estructurales y de estado. Especificidad y selector highlighter interactivo. 12 conceptos → Box Model content, padding, border, margin, box-sizing, collapse de márgenes, outline y playground interactivo del modelo de caja. 8 conceptos → Display y Posición display, position (static, relative, absolute, fixed, sticky), z-index, stacking context, float y overflow. 6 conceptos → Flexbox Contenedor y elementos flex, ejes principal y cruzado, alineación, ordenación y playground con todas las propiedades. 12 conceptos → CSS Grid Filas y columnas, fr, repeat(), minmax(), grid-template-areas, auto-fill, subgrid y playground. 14 conceptos → Tipografía font-family, font-size, line-height, text-decoration, tipografía fluida con clamp() y playground tipográfico. 14 conceptos → Colores y Fondos Formatos de color (HEX, RGB, HSL, oklch), gradientes, background avanzado, filter, mix-blend-mode y playground de colores. 10 conceptos → Transiciones y Animaciones transition, animation, @keyframes, transform, animation-fill-mode, will-change y ejemplos interactivos. 12 conceptos → Variables y Funciones Propiedades personalizadas (--var), var(), calc(), clamp(), @layer, @supports y playground de variables. 8 conceptos → Pseudoclases y Pseudoelementos Estado (:hover, :focus), estructurales (:nth-child), formularios (:valid), ::before, ::after, ::marker. 20 conceptos → Responsive y @Rules @media, @container, breakpoints, aspect-ratio, object-fit, @font-face y visualizador de media queries. 8 conceptos →

Reglas esenciales

  • Siempre incluye *, *::before, *::after { box-sizing: border-box; } como reset base.
  • Prefiere rem para tipografía y em para espaciados relativos al componente.
  • Usa clamp(min, ideal, max) para valores fluidos que no necesitan media queries.
  • Evita !important — si lo necesitas, revisa la arquitectura de tus selectores.
  • Prefiere :focus-visible sobre :focus para los estilos de foco del teclado.
  • Para layout usa Flexbox (componentes en una dimensión) o Grid (layouts en dos dimensiones).
  • Usa variables CSS (--color-primary) para valores que se repiten o que forman un sistema.
  • Respeta el principio de mobile-first: escribe los estilos base para móvil y añade @media (min-width: ...) para escritorio.
  • Prefiere 100dvh sobre 100vh en alturas de pantalla completa para evitar el problema de las barras del navegador móvil.
  • Usa las herramientas de desarrollo del navegador (DevTools) para inspeccionar la cascada y la especificidad en tiempo real.