¿Qué significa «cascada» en CSS y cómo afecta a los estilos?

El término «cascada» es fundamental en CSS (Cascading Style Sheets - Hojas de estilo en cascada) y se refiere al algoritmo que utilizan los navegadores para resolver los conflictos cuando múltiples reglas de estilo se aplican a un mismo elemento HTML. Este algoritmo determina qué declaración de estilo tiene prioridad y, por lo tanto, qué estilo se mostrará finalmente.

La cascada funciona considerando varios factores en un orden de precedencia específico para determinar el valor final de cada propiedad de un elemento:

1. Origen de la hoja de estilos e importancia: El navegador considera de dónde proviene la regla (hoja de estilos del autor –la que tú escribes–, hoja de estilos del usuario –personalizaciones del navegador por el usuario–, o la hoja de estilos por defecto del navegador). Además, tiene en cuenta si una declaración está marcada con !important. Las declaraciones !important en los estilos del autor suelen tener la máxima prioridad, seguidas por las !important del usuario, luego los estilos normales del autor, los del usuario, y finalmente los del navegador.
2. Especificidad del selector: Si varias reglas tienen el mismo origen e importancia, se aplica la regla con el selector más específico. Por ejemplo, un selector de ID (ej. #miElemento) es más específico que un selector de clase (ej. .miClase), y este último es más específico que un selector de tipo de etiqueta (ej. p).
3. Orden de aparición (Source Order): Si dos reglas en conflicto tienen el mismo origen, importancia y la misma especificidad, la regla que aparece más tarde en el código CSS o en la última hoja de estilos enlazada es la que «gana» y se aplica.

/* style.css */
p {
  color: blue; /* Regla 1 */
}

.texto-principal {
  color: green; /* Regla 2 */
}

p {
  color: red;  /* Regla 3 */
}
Lenguaje del código: PHP (php)

Si un párrafo tiene la clase texto-principal (<p class="texto-principal">), su color será green (la Regla 2 es más específica que la Regla 1 o la 3 para tipo p).

Si es un párrafo sin esa clase, su color será red (la Regla 3 anula la Regla 1 por orden de aparición, teniendo ambas la misma especificidad).

Este proceso de cascada asegura que, para cualquier propiedad de cualquier elemento, siempre haya un único valor ganador, resolviendo los conflictos de forma predecible.