CSS Avançado

Efeito em Cascata

O efeito cascata nada mais é do que o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.

A prioridade para o efeito cascata em ordem crescente é a seguinte:

1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário;
3. folha de estilo do desenvolvedor;
   • estilo externo (importado ou linkado).
   • estilo incorporado (definido na seção head do documento);
   • estilo inline (dentro de um elemento HTML);
4. declarações do desenvolvedor com !important;
5. declarações do usuário com !important;

Como herança e especificidade afetam as regras CSS
Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.

div {
color: green;
}

O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. Porém há propriedades que não são herdadas pelos "elementos filhos" como por exemplo propriedades referentes a formatação da caixa width, height, margin, padding e assim por diante.

Podemos especificar detalhes para os elementos, como modificar a cor apenas do italico dentro da div e/ou definir um background apenas para a div de dentro de certa classe etc.

div {
color: black;
}

div em {
color: #9fc5e8;
}

Paragrafo com enfase

Logo apenas o elemento em dentro na div serão em azul os outros será normal.
Diferenças entre o uso de link e @import
Link e @import são duas formas de importa uma folha de estilo para o html. A tag link fica dentro do head e é a mais recomendada, já a @import fica dentro da tag style

<link rel="stylesheet" type="text/css" href="style.css">

<style>
@import url("link");
</style>