La herencia es una característica muy simple, por la cual los elementos contenidos por otros elementos heredan de sus padres las características aunque no haya sido definidas para ellos mismos.
En el siguiente ejemplo, las propiedades definidas para el párrafo anularán aquellas definidas para el cuerpo (tag HTML body). Las propiedaes del cuerpo que no son anuladas, ser heredarán por el párrafo (ya que el mismo está contenido por el cuerpo).
<html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body class="importante">
<p>Algún texto</p>
</body>
</html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body class="importante">
<p>Algún texto</p>
</body>
</html>
En este documento, el párrafo tendrá todas las propiedades definidas para el elemento "p" ("font-family", "font-size" y "color"), pero la propiedad "font-weight" será heredada del cuerpo (su padre).
