Imagina que tienes los ojos de tu madre y la nariz de tu padre. No lo pediste, simplemente lo heredaste. En CSS ocurre algo similar: los elementos hijos pueden heredar ciertas propiedades de sus elementos padre.
Este concepto, bien aprovechado, te ahorra escribir decenas de reglas repetidas.
Imagina este HTML:
Quieres que todos los textos dentro del .contenedor sean rojos. Sin herencia, tendrías que escribir esto:
Tres reglas para decir lo mismo tres veces. Y si después añades un <h4>, tendrías que añadir una cuarta regla. Eso no escala bien.
Aquí está el secreto: la propiedad color es una de las propiedades que los hijos heredan automáticamente de sus padres. Así que puedes simplificar todo esto a una sola regla:
El <div> no es un elemento de texto, es verdad. Pero como color es una propiedad heredable, todos sus hijos — el <h2>, el <h3>, los <p> — la recibirán automáticamente. Y cualquier elemento que añadas al contenedor en el futuro también la heredará. Sin tocar una sola regla CSS más.
La herencia también va más profundo. Si tienes esto:
El <strong> también será rojo, porque hereda el color de su padre, el <p>.
Pero aquí viene el matiz importante: no todas las propiedades CSS se heredan. Y tiene sentido si lo piensas.
Si le das un border a un <div>, sus hijos no tendrán bordes automáticamente — eso sería un desastre visual. El borde es una propiedad que no se hereda.
Sin embargo, propiedades relacionadas con el texto — como color, font-size, font-family — sí se heredan, porque es natural que el texto dentro de un contenedor adopte el estilo tipográfico de su entorno.
Con el tiempo irás aprendiendo qué propiedades se heredan y cuáles no. Por ahora, la regla mental es: lo que tiene que ver con texto, generalmente se hereda.
Dale al elemento con clase .contenedor un color de texto rojo. Verifica que todos los elementos de texto dentro de él (títulos, párrafos) también se vuelven rojos sin necesidad de reglas adicionales.
Algunos regalos no se piden — simplemente se reciben...