A sigla CSS vende de "Cascading Style Sheets", ou em português "Folhas de Estilo em Cascata". Este nome vem pelo fato da distribuição de estilização ser feita em forma de cascata sobre a árvore do HTML.
Quando configuramos que um botão tem a fonte com a cor vermelha então todos os elementos que estão dentro do botão também herdarão este estilo.
No exemplo abaixo definimos os estilos para um elemento divisor do HTML, "div". Como podemos ver o estilo dado a divisória é herdado pelos elementos "p".
.content { /* Seletor de classe */
color: red; /* Fonte vermelha */
font-weight: bold; /* Texto em alta espessura */
font-size: x-large; /* Fonte "grande" */
}
...
<h1>CSS: Efeito cascata</h1>
<div class="content">
<p>... ou herança</p>
<p>Os atributos configurados em um elemento são herdados pelos seus descendentes.</p>
</div>
...
No exemplo anterior todos os parágrafos herdaram três valores de atributos do elemento "div" que os contem.
Podemos redefinir para um dos parágrafos estes valores, através da sobrescrita, utilizando um seletor mais próximo.
**.green {
color: green;
}**
.content { /* Seletor de classe */
color: red; /* Fonte vermelha */
font-weight: bold; /* Texto em alta espessura */
font-size: x-large; /* Fonte "grande" */
}
...
<h1>CSS: Efeito cascata</h1>
<div class="content">
<p **class="green"**>... ou herança</p>
<p>Os atributos configurados em um elemento são herdados pelos seus descendentes.</p>
</div>
...
Visualizando através das ferramentas de inspeção (Chrome DevTools) pela seleção do parágrafo verde podemos notar a sobrescrita definida acima.
