O que significa o termo 'cascata' em CSS?

A cascata no CSS determina qual dos estilos em conflito deve ser aplicado a um elemento. Baseia-se em três critérios principais:

1. Importância: Os estilos com !important têm prioridade máxima.
2. Especificidade: Os seletores mais específicos sobrescrevem os menos específicos. A especificidade é calculada com base na quantidade de IDs, classes/pseudo-classes/seletor de atributos e tags/pseudo-elementos no seletor.
3. Ordem no código fonte: Quando a importância e a especificidade são iguais, aplica-se a regra declarada por último.

Além desses três, outros fatores também são considerados:

• Origem do estilo: Estilos do usuário (nas configurações do navegador), estilos do autor (estilos externos e internos, estilos inline), estilos padrão do navegador.
• Herança: Algumas propriedades são herdadas dos elementos pais para os filhos.

Exemplo de especificidade:

/* Especificidade: 0-1-0 */
.minha-classe {
  cor: azul;
}

/* Especificidade: 1-0-0 */
#meu-id {
  cor: vermelho;
}

Neste caso, o elemento com id meu-id e classe minha-classe terá a cor do texto vermelha, pois o ID #meu-id tem uma especificidade maior que .minha-classe.