La herencia permite que los elementos hijos adopten estilos de sus elementos padres por defecto. Propiedades comúnmente heredables incluyen color, propiedades de fuente (font-style, font-weight, font-size, font-family), alineación de texto (text-indent, text-align) y line-height.

Ejemplo básico de herencia:

<style>
  .contenedor-padre {
    color: rojo;
  }
</style>
<div class="contenedor-padre">
  Texto del padre
  <div class="contenedor-hijo">
    Texto del hijo (hereda el color rojo)
  </div>
</div>

Para verificar si una propiedad es heredable, se pueden usar las herrramientas de desarrollo del navegador.

Aplicaciones prácticas:

• Establecer list-style: none en elementos ul para eliminar marcadores predeterminados.
• Definir font-size en la etiqueta body para estandarizar el tamaño de texto entre navegadores.

Casos donde la herencia no aplica como se espera:

• Cuando un navegador aplica estilos predetemrinados, estos tienen prioridad sobre los heredados.
• La propiedad color en etiquetas ancla (a) suele usar el estilo del navegador.
• Las etiquetas de encabezado (h1-h6) mantienen su propio tamaño de fuente.
• La altura de elementos div no se hereda, aunque el ancho puede comportarse de manera similar.

Cascada en CSS

La cascada determina cómo se combinan múltiples estilos aplicados a un mismo elemento. Cuando se aplican estilos diferentes, estos se fusionan. Si los estilos son idénticos, el último declarado en el código prevalece.

Nota importante: La cascada solo resuelve conflictos cuando los selectores tienen igual especificidad.

Especificidad en CSS

La especificidad define el peso de un selector para resolver conflictos de estilo. La jerarquía es: herencia < selector universal (*) < selector de etiqueta < selector de clase < selector de ID < estilo en línea < !important.

Reglas para !important:

• Se agrega después del valor de la propiedad, antes del punto y coma.
• No incrementa la especificidad de herencia; esta siempre tiene la prioridad más baja.
• Se recomienda evitar su uso en desarrollo para mantener la previsibilidad.

Para selectores compuestos, se calcula la especificidad mediante una suma ponderada: (estilos en línea, selectores de ID, selectores de clase, selectores de etiqueta).

Ejemplo de cálculo:

<style>
  /* (0, 1, 0, 1) */
  div #identificador {
    color: celeste;
  }
  /* (0, 0, 2, 0) */
  .clase-padre .clase-hijo {
    color: celeste;
  }
  /* (0, 0, 1, 1) */
  .clase-padre p {
    color: púrpura;
  }
  /* (0, 0, 0, 2) */
  div p {
    color: rosa;
  }
</style>
<div class="clase-padre">
  <p class="clase-hijo" id="identificador">Elemento de demostración</p>
</div>

Para resolver conflictos de estilo:

1. Determinar si el selector aplica directamente al elemento; si es por herencia, tiene baja prioridad.
2. Calcular la especificidad de cada selector para identificar el estilo ganador.