O conceito

Olá, como vai? Então, eu estava reestudando CSS e HTML por meio da internet e acabei me deparando com um funcionamento do próprio CSS que achei interessante, pois nunca havia necessitado realmente de usar ele, mas quando descobri foi algo que não imaginava que teria na tecnologia. É até engraçado, por conta que as vezes pensamos que sabemos tudo de uma determinada ferramenta, mas ao dar uma revisada descobrimos um mundo totalmente novo.

O que eu estou falando é dos eventos em Cascata no CSS, ou seja, ocorrem de cima para baixo.

O maior exemplo para falar sobre esse evento é o seguinte:
Aqui temos um código em que estilizei um mesmo h1 3 vezes: Dentro da tag h1 com a cor vermelha, dentro do HTML com a tag style na cor azul e externamente com o link para uma folha CSS separada na cor amarela.

Desse modo, fica até difícil saber quem vai ter prioridade na hora de aplicar a cor, né? Porém, é bem simples saber. Basta aplicar o conceito de cascata para saber qual cor ficará o nosso título. Portanto, como o link externo está em primeiro no código HTML, ele será aplicado primeiro, o da tag style será o segundo e o dentro da tag h1 será o último a ser aplicado, logo é ele que aparecerá na tela para o usuário, uma vez que ele foi o último a ser aplicado pelo CSS, como você pode ver:

Conclusão

Portanto, no final o que leva a propriedade é a estilização dentro da tag. Então, isso é mais uma curiosidade que descobri e achei interessante compartilhar com a comunidade e com os iniciantes que talvez não conheçam isso, muito provavelmente isso não tem aplicação em um sistema real.

Obrigado pela atenção