Sabemos que HTML esta constituido por un conjunto de etiquetas. Ese conjunto de etiquetas posee una especie de jerarquia, en donde unas etiquetas contienen a otras. A traves de esta jerarquia se pueden establecer relaciones de "padre-hijo.
Automaticamente cuando a una etiqueta padre se le ha aplicado una hoja de estilo, la etiqueta hijo heredara todas las caracteristicas del padre. Hay que tomar en cuenta que existen algunas propiedades que de una etiqueta a otra no pueden ser heredadas, por ejemplo las propiedades relacionadas con el formato visual (posición, bordes, tamaño, fondo, margen) . Por ello nunca esta demás echarle un vistazo a las especificaciones de que es heredable y que no.
Incluso para todas aquellas propiedades que no la especifican, es posible forzar la herencia utilizando el valor inhrit El ejemplo siguiente asignaría al elemento identificado como Cuadro la misma altura que se ha computado para su elemento padre (si es que eso tiene sentido en ese contexto):
Ahora, esta caracteristica de la herencia tiene una ventaja muy importante, supongamos que tenemos el siguiente archivo:
Archivo herenciacss.html:
<html>
<head>
<title>Ejemplo 2: Herencia en CSS</title>
<style type="text/css">
#importante{
color:red;
}
#importante b{
color:green;
font:"Courier New", Courier, monospace;
}
</style>
</head>
<body>
<div id="importante">
<p>hola 1 </p>
<p><b>hola 2 </b>
</p>
</div><b>hola 3 </b>
</body>
</html>
Ahora veamos la sintaxis:
#importante{
color:red;
}
#importante b{
color:green;
font:"Courier New", Courier, monospace;
}
Cuando se coloque algo dentro de la etiqueta importante, esta sera de color rojo, pero cuando se coloque algo dentro de la etiqueta importante, y dentro de b, entonces el color sera verde.
Si queremos que mas etiquetas tengan el mismo estilo que el que se le aplica a b se separan con comas:
#importante b,#estilo1,.estilo2{
color:green;
font:"Courier New", Courier, monospace;
}