Cabecera: header

Cuando distintos estilos afectan a un mismo elemento, entran en competición unos con otros para decidir cual de ellos da su apariencia final al elemento. Dicha competición tiene un ganador "a los puntos" atendiendo a los siguientes criterios:

  1. Un estilo aplicado a la etiqueta genérica obtiene 1 punto. Es una aplicación tan general, tan inconcreta... que apenas se valora.
  2. Un estilo aplicado a una clase CSS obtiene 10 puntos. 10 veces más que una etiqueta genérica, vaga e imprecisa. ¡La clase vence a la simple etiqueta!
  3. Un estilo aplicado sobre un identificador concreto de una etiqueta obtiene 100 puntos. Gran puntuación y es que aplicar un estilo a un elemento ¡utilizando su propio nombre! tiene un alto valor.
  4. Un estilo aplicado en línea, directamente sobre el elemento cuya apariencia se desea controlar, ¡tiene 1000 puntazos!. Es la más alta puntuación, y significa que un estilo aplicado directamente sobre el propio elemento tendrá siempre más prioridad que ningún otro.
  5. Y como en toda competición pueden darse empates. Cuando dos estilos que compiten por vestir a un elemento HTML obtienen la misma puntuación, el último en ser declarado y aplicado es el que se lleva el gato al agua.

Ejemplo

El texto de cabecera "Cabecera: header" de esta página está definido de la siguiente manera:

<div id="caja">
  <header class="cabecera">
    <h1 style="color:red;">Cabecera: header</h1>
  </header>
</div>

En la página se han establecido los siguientes estilos que le afectan en distintos grados:

EstiloExplicaciónPuntos
p { padding: 5px 3px 5px 3px; }Este estilo no afecta a la cabecera, ya que esta no es ni se encuentra dentro de un elemento de párrafo. Este estilo ni siquiera se clasifica para competir en este caso.0
h1 { color: grey; }Este estilo que quiere que el color del texto de cabecera sera gris se aplica a la cabecera por estar dentro de una etiqueta h1. Su puntuación sería de 1 punto.1
header h1 { color: lime; }Este estilo se aplica a la cabecera por estar dentro de una etiqueta h1 (1 punto) que a su vez está dentro de otra etiqueta header (1 punto más). Obtiene un punto por cada etiqueta. 2
#caja .cabecera h1 { color: blue; }Este estilo aplica a la cabecera por tres vías: por ser una etiqueta h1 (1 punto); por ser descendiente de un elemento de clase "cabecera" (10 puntos más) y por ser descendiente de un div de nombre #caja (¡100 puntos!). 111 puntos a favor de una cabecera de color azul.111
#caja header h1 { color: green; }Este estilo, como el anterior, se aplica a la cabecera por tres vías: por su etiqueta h1 (1 punto); por ser descendiente de una etiqueta header (1 puntos) y por ser descendiente de un elemento de nombre #caja (¡100 puntos!). 102 puntos. En este momento, la cabecera podría ser verde.102
style="color:red;"Este estilo se aplica directamente al elemento h1 del título. Obtiene directamente 1000 puntos contra los que ninguno de los estilos anteriores puede competir. Con esta puntuación no hay duda de que el texto "Cabecera: header" será rojo, sí o sí.1000