La herencia con ejemplos

Veamos con ejemplos sencillos qué ventajas tiene la herencia.

Partimos de este código:

<p class="text">Una frase con una <span>palabra</span> destacada</p>

Imagina que queremos que todo el texto sea rojo. Asignamos la propiedad CSS así:

.text {
  color: red;
}

Gracias a la herencia, el texto de span también se vuelve rojo:

Una frase con una palabra destacada

Así se vería el resultado si no existiera la herencia:

Una frase con una palabra destacada

Tendríamos que indicar el color del texto de span por separado. Hasta definir el estilo de la fuente se volvería complicado: habría que asignar las propiedades a cada posible etiqueta anidada.