Herencia: qué se contagia y qué no

¿Notaste que al ponerle fuente al body, TODA la página cambió de fuente sin que se lo pidieras a cada elemento? Eso es la herencia: el mecanismo que hace al CSS eficiente — cuando sabes qué hereda y qué no. Hoy cierras esa laguna.

La regla mental: texto sí, cajas no

Las propiedades de texto se heredan: color, font-family, font-size, line-height, text-align, letter-spacing... Las propiedades de caja no: margin, padding, border, background, width, display.

¿Por qué esa división? Piensa qué pasaría al revés: si border se heredara, ponerle borde a una tarjeta dibujaría bordes en cada párrafo, enlace y span de adentro. El CSS hereda lo que casi siempre QUIERES propagar y aísla lo que casi nunca.

<div class="tarjeta">
<h3>Heredé la fuente y el color del padre</h3>
<p>Yo también — nadie nos dio estilos directamente.</p>
<p>Pero el borde y el fondo de la tarjeta no se nos contagiaron.</p>
</div>

body { padding: 24px; }
.tarjeta {
font-family: Georgia, serif; /* heredable: baja a h3 y p */
color: #1e3a8a;              /* heredable: baja a h3 y p */
border: 2px solid #1e3a8a;   /* NO heredable: solo la tarjeta */
background: #eff6ff;         /* NO heredable: solo la tarjeta */
padding: 16px;
border-radius: 8px;
}

Los cuatro valores de control

A veces quieres forzar la herencia (o apagarla). CSS te da cuatro palabras clave que funcionan en CUALQUIER propiedad:

/* inherit: hereda aunque la propiedad normalmente no lo haga */
.hijo-con-borde-del-papa {
border: inherit;
}

/* initial: vuelve al valor de fábrica de CSS (ojo: a veces sorprende) */
.enlace-reseteado {
color: initial;
}

/* unset: hereda si es heredable, initial si no — el "borrón inteligente" */
/* revert: vuelve al estilo del NAVEGADOR (no al de CSS) — el más natural */

Herencia = menos código

La aplicación práctica es el patrón con que empieza toda hoja de estilos profesional: define lo heredable UNA vez en el ancestro común y deja que baje solo.

body {
font-family: system-ui, sans-serif;
color: #1e293b;
line-height: 1.6;
}
/* y ya: cada h1, p, li y span de la página queda cubierto */

Mini-reto

En el CSS de tu periódico, borra cualquier color o font-family repetido en reglas individuales y decláralos UNA sola vez en body. Si la página se ve igual con menos líneas, acabas de usar la herencia como un profesional.

Qué sigue

Con cascada y herencia entendidos, llega el modelo mental más importante de todo el CSS: el box model. Todo — TODO — en una página es una caja, y la próxima lección te enseña a medirlas.