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:

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.

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.