Herencia de estilos

Las hojas de estilo permiten la herencia de propiedades, es decir, que elementos hijo hereden los estilos de elementos padre. Si tenemos varios elementos HTML anidados, los elementos más internos heredan los estilos de los externos en los que están anidados, siempre y cuando ellos no los tengan definidos.

Supongamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <style type="text/css">
      div {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Título en rojo</h1>
      <p>Texto en color rojo.</p>
    </div>
    <h2>Título en color predeterminado</h2>
  </body>
</html>

El código CSS indica que el texto contenido en <div> debe ser de color rojo. A pesar de definirlo solo para <div>, el texto contenido en <h1> y <p> también será de color rojo, ya que hereda los estilos de <div> (los elementos <h1> y <p> son hijos de <div>). Sin embargo, el texto del elemento <h2> será de color negro (el color predeterminado para el texto), ya que no es hijo de <div>.

Probar en el navegador

Documento HTML

Conflictos

En ocasiones y dependiendo de cómo se haya hecho la definición de estilos, es posible que el navegador se encuentre estilos contradictorios. Ante esta situación, el navegador aplicará la siguiente precedencia:

Declaración en línea.
Declaración interna.
Declaración externa.
Propiedades por defecto del navegador.

Supongamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="estilos.css" />
    <title>CSS</title>
    <style type="text/css">
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 style="color: blue;">Título</h1>
  </body>
</html>

El contenido del fichero estilos.css es el siguiente:

h1 {
  color: green;
}

Podemos observar que se está definiendo el color de <h1> en tres lugares y, en los tres lugares, se está definiendo un estilo diferente. Es decir, los estilos definidos entran en conflicto. En este caso, se aplica una prioridad:

En el que acaba prevaleciendo es el que está definido en el atrbituo style del propio elemento HTML. Es decir, el título se verá en azul.
Si no hubiese el atributo style, el que se tendría en cuenta sería el que está definido en la etiqueta <style>. Es decir, el título se vería en rojo.
Si ninguno de los dos anteriores estuviesen definidos, se tendría en cuenta los estilos del fichero estilos.css definido en el elemento <link>. Es decir, el título se vería en verde.
Si no se aplican estilos de ningún tipo, el texto se vería de color negro, ya que éste sería el color por defecto para el texto de títulos.

Probar en el navegador

Documento HTML

Conflictos​

Conflictos