Herencia en CSS

La herencia o sobreescritura de propiedades en CSS

Hay ciertos detalles que hay que tener claros antes de empezar a profundizar en CSS. El concepto de herencia y el de cascada (que veremos más adelante) son dos de las características de CSS más infravaloradas y que más problemas suelen producir, ya que sin lugar a dudas son los que menos se conocen y los que mayor frustración acarrean porque se utilizan indebidamente.

Concepto de herencia

En primer lugar, debemos saber que algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto:

body {
  color: green;    /* Color de texto */
}

En el ejemplo anterior, aplicamos a la etiqueta HTML <body> el color de texto verde. En principio, esta propiedad aplicará dicho color a los textos que estén dentro de dicha etiqueta <body>.

Sin embargo, si tenemos más etiquetas dentro, como por ejemplo una etiqueta <div> con texto en su interior, si no tenemos aplicada una propiedad color a dicho elemento, veremos que también aparece en color verde. Esto ocurre porque la propiedad color es una de las propiedades CSS que, en el caso de no tener valor específico, hereda el valor de su elemento padre.

Ojo, porque esto no ocurre si lo hacemos con otras propiedades CSS, como por ejemplo, con los bordes de un elemento HTML:

body {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Si esta propiedad aplicara herencia, todos los elementos HTML situados en el interior de <body> tendrían un borde rojo, comportamiento que no suele ser el deseado. Por esa razón, la herencia no ocurre con todas las propiedades CSS, sino sólo con algunas propiedades como color o font, donde si suele ser deseable.

Valores especiales de herencia

Además de los valores habituales de cada propiedad CSS, también podemos aplicar ciertos valores especiales que son comunes a todas las propiedades existentes. Con estos valores modificamos el comportamiento de la herencia en dicha propiedad:

Valor	Significado
inherit	Hereda el valor que tiene la misma propiedad CSS en su elemento padre.
initial	Establece el valor inicial que tenía la propiedad CSS inicialmente.
unset	Combinación de las dos anteriores: Hereda el valor del padre, y en caso de no existir, su valor inicial.

Veamos, por ejemplo, el siguiente ejemplo para forzar la herencia en una propiedad que no la aplica por defecto:

body {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

div {
  border: inherit;
}

Si tenemos un elemento <div> dentro del <body>, el primero heredará los estilos del elemento <body>, ya que le hemos especificado el valor inherit en la propiedad border.

Tabla de contenidos