Ordem da cascata

Como sabemos um documento HTML pode conter definições CSS inline, embebidas e externas. Ora quando coexistem num mesmo documento poderá haver conflitos o que pode originar situações anómalas e renders estranhos do documento HTML.

Leitura

A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte:

1. CSS existente no browser
2. CSS externa
3. CSS embebida
4. CSS inline

Cascata

Quando existe mais do que um estilo num documento HTML, estes funcionam em cascata numa folha de estilo virtual com a ordem acima descrita.
A última regra da cascata é a que tem prioridade.
A ordem de prioridade é a seguinte:

1. Inline
2. CSS embebida
3. CSS externa
4. CSS do browser

Isto quer dizer que em caso de regras iguais com valores diferentes a inline sobrepõe-se à embebida e esta à externa.
É importante saber que mesmo quando existem duas declarações iguais na mesma css, a última regra da lista das declarações é a que prevalece. É, também, importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na ordem do HTML é a que tem predominância.

Inerência

Propriedades e valores em tags parent têm inerência sobre as child tags
Quando um selector está ligado por uma relação de parentesco a outro ou está contido nele, assume as propriedades do selector onde está contido.
Se, por exemplo, declararmos no selector body a property font-family todo o texto da página HTML vai assumir esta propriedade.

body {font-family: Verdana, serif;}
Se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos selectores
Por exemplo:

h1 {font-family: Georgia, serif;}
p {font-family: Tahoma, sans-serif;}
Agora as tags <h1> terão a fonte Georgia e não a verdana anteriormente declarada na tag body.
Mas se declararmos

h1 {font-size: 12px;}
a fonte seria verdana, a font declarada na tag body.
Por inerência uma tag ganha o estilo da tag pai.

<div id=”exemplo”>
<p> Viva o <em>Porto!</em></p>
</div>

#exemplo{
font-family:Arial;
{
p{
font-size:1em; color:red;
}
em{color:blue; font-style:normal}

Neste exemplo teremos: Viva o (arial, 1 em, vermelho) Porto! (arial, 1 em, azul)

Relembrando, o render final é dado pela ordem das CSS, que podem ser externas, embebidas e inline. Em caso de conflito, o mesmo estilo para as mesmas tags, a última css aplicada sobrepõe-se à anterior.

Especificidade

	Inline	ID	Classe	Elemento	Especificidade
<p style ...>	1	0	0	0	1000
h1, h2	0	0	0	2	2
h1.primeiro	0	0	1	1	11
#contentor	0	1	0	0	100
#contentor h2	0	1	0	1	101
#contentor #lateral p	0	2	0	1	201
h1 p	0	0	0	2	2
.imagem	0	0	1	0	10

Quando a cascata ou a ordem de inerência não conseguem resolver um conflito de render é usada a especificidade. A cada selector é atribuído um peso. O número mais alto é usado para o render final.