Cabecera: header

Marcación HTML y CSS

<!doctype html>
<html>
<head>
   <meta charset="utf¬8">
   <title>Herencia</title>
   <style>
      header h1 { letter-spacing: .3em; }
      .cabecera { color: #369; font-family: serif; letter-spacing: 10em; }
      #caja { font-family: sans-serif; font-size: 32pt; }
   </style>
</head>
<body>
   <div id="caja">
      <header class="cabecera">
         <h1>Cabecera: header</h1>
      </header>
   </div>
</body>
</html>

Comentario sobre herencia de estilos

El título <h1> contenido en la cabecera de la página <header> se encuentra afectado por tres definiciones de estilo: el selector <h1> contenido en la sección <header> (peso: 2), la clase .cabecera (peso: 10) y el identificador #caja de la etiqueta <div> (peso: 100).

Aun cuando la clase cabecera posee tres características (color, fuente y espaciado de letras), el título de la cabecera sólo hereda el color ya que el identificador #caja también realiza una definición de fuente (font-family) y tiene mayor peso que la clase.

En el caso del espaciado de letras, el selector <h1> tiene definición propia de este estilo por lo cual sobreescribe la propiedad heredada del mismo, a pesar de los pesos de cada definición.

Cuadro 1. Precedencia de estilos