En CSS, la herencia es un mecanismo a través del cual ciertas propiedades de un elemento se transmiten a sus elementos anidados (descendientes). Es un concepto muy parecido a la herencia genética (de padres a hijos). Si los progenitores tienen el pelo moreno, los hijos seguramente también lo tendrán.
Por ejemplo, si para un elemento HTML se indica un color de texto y un tipo de fuente mediante las propiedades color y font-family, cada elemento que se encuentre dentro de este elemento también mostrará el texto de la misma manera. Los elementos hijos podrán cambiar de aspecto si se les especifica reglas CSS de forma directa, entonces no tendrán valores por herencia.
Sin embargo, no todas las propiedades se heredan. En muchos casos la herencia no tendría sentido. Por ejemplo, el ancho no se hereda porque es poco probable que un elemento hijo necesite el mismo ancho que su elemento contenedor. Si se heredase todo sería frustrante usar el lenguaje CSS.
La mayoría de propiedades que se heredan tienen que ver con la apariencia del texto, y la mayoría de las que no se heredan tienen que ver con la apariencia del resto de elementos. Puedes consultar la tabla resumen de las herencias de las propiedades, pero en general es una cuestión de sentido común.
La necesidad de la herencia
El hecho de que el lenguaje CSS tenga un mecanismo de herencia tiene una explicación. Es lógico preguntarse qué ocurriría si este mecanismo no existiera. Por ejemplo, se tendría que especificar el aspecto del texto (color, tamaño, tipo de fuente) de forma individual para todos los elementos del documento.
Así pues, gracias a la herencia del CSS se pueden especificar las propiedades de las fuentes de forma masiva en todo el documento. Es suficiente con crear reglas CSS en el elemento <body> para que el resto de elementos HTML del documento las hereden. La herencia simplifica mucho el diseño web.
El funcionamiento de la herencia
El funcionamiento de la herencia es simple: todos los elementos que componen un documento HTML (a partir del <body>) heredan todas las propiedades heredables de su elemento contenedor. La excepción es el elemento raíz de un documento HTML (<html>), que no tiene progenitor.
Las propiedades heredadas pueden anularse. Esto es importante: significa que no todas las propiedades heredadas tendrán efecto. El hecho de que tengan efecto o no tienen que ver con otro concepto que también es importante aprender: la cascada, que se verá en el próximo artículo.
Forzar la herencia
En CSS es posible modificar el comportamiento de la herencia de todas las propiedades, sean del tipo que sean. Como ya se dijo en el artículo anterior, cada propiedad CSS admite una serie de valores concretos. Pero existen unos valores especiales que permiten modificar la herencia.
Con el valor inherit se hereda el valor que tiene la misma propiedad CSS especificada en el elemento padre. El valor initial permite establecer el valor que tenía la propiedad CSS inicialmente. Y el valor unset hereda el valor del elemento padre, pero si no lo tiene, usa su valor inicial.
Forzar la herencia no es algo que se tenga que hacer con frecuencia. Puede ser de utilidad cuando se necesita solucionar una declaración conflictiva o para no tener que introducir ciertos valores en el elemento HTML.
