Herencia y valores de control

La cascada resuelve conflictos cuando varias reglas compiten. Pero ¿qué pasa cuando un elemento no tiene ninguna regla propia? Ahí entra la herencia.

Qué es la herencia

La herencia es el mecanismo por el cual un elemento hijo toma el valor computado de una propiedad de su padre, sin que haya una regla que lo declare explícitamente.

section { color: teal; }

<section>
  <h2>Menú</h2>       <!-- h2 hereda color: teal de section -->
  <p>Espresso</p>     <!-- p también hereda color: teal -->
</section>

Sin ninguna regla para h2 ni para p, ambos tienen color: teal — lo heredaron del padre.

La regla mental: texto sí, caja no

No todas las propiedades se heredan. La regla mental:

Se heredan las propiedades de texto y tipografía:

color, font-family, font-size, font-weight, font-style, line-height, text-align, letter-spacing

Tiene sentido: si pusiste una tipografía en el contenedor, querés que todo el texto adentro la use sin repetirlo.

No se heredan las propiedades de caja y layout:

margin, padding, border, background, width, height, display, position

Tiene sentido: si el padre tiene margin: 20px, no querés que todos sus hijos también tengan ese margen — sería un caos de espacios acumulados.

La herencia no aplica cuando hay una regla explícita

La herencia es el “valor por defecto cuando no hay regla propia”. En cuanto hay una regla explícita, esa gana:

section { color: teal; }
p       { color: gray; }   /* esta regla gana — p deja de heredar el teal de section */

`inherit` — forzar la herencia

¿Qué pasa si querés que un hijo adopte una propiedad que normalmente no se hereda? Usás inherit:

section { padding: 16px; }
p       { padding: inherit; }  /* p hereda el padding de section aunque no se herede sola */

inherit puede usarse en cualquier propiedad CSS, incluso las que no se heredan por defecto. El hijo toma el valor computado del padre.

`initial` — volver al valor inicial de la spec

initial resetea una propiedad a su valor inicial según la especificación CSS, borrando herencia y overrides:

section { font-weight: bold; }
/* p y h2 heredan bold de section */
.precio { font-weight: initial; }  /* vuelve a normal (400) — el inicial de font-weight */

Punto fino: initial es el valor que define la especificación CSS para esa propiedad, no el que aplica el navegador por defecto a esa etiqueta. Generalmente coinciden en <p>, pero no siempre: <h1> tiene font-size: 2em por el UA, no por initial.

A nivel introductorio: “initial vuelve al punto de partida de la spec, borrando herencia y overrides”.

`unset` — el valor “inteligente”

unset elige automáticamente según la propiedad:

Si la propiedad se hereda de forma natural → actúa como inherit
Si la propiedad no se hereda de forma natural → actúa como initial

.precio { color: unset; }      /* color ES heredada → actúa como inherit → toma el color del padre */
.precio { margin-top: unset; } /* margin-top NO es heredada → actúa como initial → 0 */

Es útil cuando querés “resetear” una propiedad al comportamiento natural sin recordar si se hereda o no.

CSS resets y la user-agent stylesheet

Cada navegador tiene una hoja de estilos interna que aplica estilos por defecto a los elementos HTML:

<h1> → font-size: 2em; font-weight: bold; margin: 0.67em 0
<ul> → list-style-type: disc; padding-left: 40px
<p> → margin: 1em 0
<body> → margin: 8px

Distintos navegadores a veces usan valores distintos para el mismo elemento.

Un CSS reset sobrescribe esos defaults a un valor base uniforme:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Un normalize en cambio no los borra, sino que los emparejaría entre navegadores conservando los defaults útiles.

El mini-reset del sandbox: el motor ya aplica antes de tu CSS:

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }

Es invisible en la pestaña CSS pero está ahí. El <body> ya llega sin margen y con font-family: system-ui. Es un ejemplo en vivo de por qué los resets son útiles.

Límites del motor: los resets que usan * no son validables con checks style (el selector * también matchearía elementos internos del sandbox). El concepto se enseña en la teoría y se puede observar en el preview. Si el alumno llega al mismo computed por otra vía que no sea exactamente la indicada, el check pasa igual — el enunciado guía el método.

Tu turno: el HTML de la sección de Café Aroma ya está. Escribí el CSS para que section tenga color: teal, padding: 16px y font-weight: bold; que p fuerce la herencia del padding; y que .precio vuelva a font-weight: normal. Hacé clic en “Comprobar”.