La herencia es el concepto de cascada de los Estilos CSS. Es decir, son los estilos que un elemento padre le proporciona a un elemento hijo bajo la jerarquía de cascada.
Ejemplo
Crearemos un documento HTML el cual va a tener un título y un párrafo. Se sabe que por defecto y sin aplicar estilos por parte nuestra, el navegador agrega estilos para que este contenido pueda verse con algo de formato a través de nuestras pantallas.
El concepto de herencia, lo podemos comprender fácilmente modificando las propiedades del texto para todo el sitio. Es decir, vamos a cambiar las propiedades que aplica el navegador por defecto y agregaremos los nuestros.
Código
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Herencia</title> <style> html { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 80%; } h1 { font-size: inherit; } </style></head><body> <main> <h1>Hola soy un título</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam iusto aperiam, eaque quaerat rem maxime fugiat nostrum ex dignissimos temporibus praesentium quibusdam soluta minus alias nobis incidunt non recusandae ut?</p> </main></body></html>
![Se observa un título y un párrafo con lorem ipsum, al lado derecho el código HTML. Herencia](https://escuelawow.com/wp-content/uploads/2023/06/resultado-sin-css.jpg)
En la imagen anterior están aplicando los estilos por defecto en el navegador. Tanto el título, como el párrafo tienen las mismas propiedades de texto.
![Resultado del ejercicio de Herencia.](https://escuelawow.com/wp-content/uploads/2023/06/resultado-con-css-herencia.jpg)
En este resultado, al selector html, le agregamos dos propiedades css para modificar el tipo de fuente (font-family) y su tamaño (font-size). Ambas propiedades se aplican a la etiqueta <p></p>
.
H1 está tomando la propiedad de font-family, pero no en su tamaño. Para que H1 tome las propiedades heredadas del tamaño de fuente, es necesario crear el selector en CSS h1, y colocarle a la propiedad font-size un valor de heredado para que tome el tamaño de su elemento padre “html”.