Una de las características más importantes de CSS es la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores que se repitan.

Otro detalle que hay que dejar claro antes de empezar es el concepto de herencia y el concepto de cascada, pues son los que más problemas suelen dar y los que, sin lugar a dudas, mayor frustración acarrean cuando no comprendemos lo que está pasando.

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 verde */
}

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, veremos que también aparece en color verde. Esto ocurre porque la propiedad color es una de las propiedades CSS que hereda el valor de su elemento padre.

Esto no tendría sentido si lo hacemos con otras propiedades CSS, como 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.

Sin embargo, podemos aplicar ciertos valores especiales comunes a la gran mayoría de propiedades, para cambiar el valor de la propiedad respecto a la herencia:

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

Veamos, por ejemplo, el siguiente ejemplo para forzar la herencia:

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).