Otro detalle que hay que dejar claro antes de empezar es el concepto de herencia (y el concepto de cascada, que veremos más adelante), 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.
Valores especiales
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 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, 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.
