La cascada: cuando varias reglas compiten
"He puesto color: red y el texto sigue azul." Esa es, con diferencia, la duda
nº 1 de quien empieza con CSS. Y casi nunca es un bug: es la cascada haciendo
su trabajo. Sobre un mismo elemento pueden aplicar varias reglas que tocan la
misma propiedad, y la cascada (la C de CSS) es el algoritmo que decide cuál gana.
El navegador las ordena, en este orden de prioridad:
- Origen e importancia. Las hojas del autor (las tuyas) pesan más que las
del navegador por defecto. Una declaración con
!importantsube de nivel. - Especificidad. A igualdad de origen, gana el selector más específico (lo vemos en detalle en la siguiente lección).
- Orden de aparición. Si hay empate de especificidad, gana la última regla declarada.
p { color: black; }
p { color: blue; } /* gana esta: misma especificidad, va después */
En el ejemplo ambas reglas tienen idéntica especificidad, así que decide el
orden: el <p> se pinta de azul. Regla mental rápida: a igualdad de fuerza,
gana la que escribiste última. Por eso a veces basta con mover una regla unas
líneas más abajo para que por fin "se aplique".
La herencia: propiedades que viajan hacia abajo
Algunas propiedades, si no se especifican, se heredan del elemento padre. Son sobre todo las relativas al texto:
- Se heredan:
color,font-family,font-size,line-height,text-align,visibility... - No se heredan:
margin,padding,border,background,width,height,display...
body { color: #333; font-family: system-ui; }
/* Un <p> dentro de <body> hereda color y font-family
aunque no tenga ninguna regla propia. */
Puedes forzar el comportamiento con valores especiales:
.caja { color: inherit; } /* hereda explícitamente del padre */
a { color: inherit; } /* el enlace toma el color del texto que lo rodea */
La herencia evita repetir reglas: defines la tipografía base en body una vez y
todo el documento la respeta salvo donde la sobrescribas. Piénsalo como un apellido
familiar: el hijo lo lleva sin pedirlo, hasta que decide cambiárselo a propósito.