•  
     

Efeito Cascata com CSS

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Desafio de Texto Extremo</title>
</head>
<body>
<p id="intro">Introdução: Efeito Cascata com CSS</p>
<div>
<p>Sinopse: Quando você define a propriedade de um seletor 'p' como um certo valor, esse valor se aplica a <em>todas</em> as tags p.
			Contudo, se você mudar a mesma propriedade para um valor diferente em uma instância mais específica de p,
			essa mudança vai se <em>sobrepor</em> à 'regra geral'.
</p>
<ul>
<li><p>Se você fizer p { font-family: Garamond}, todos os 'p's vão ter fonte Garamond.</p></li>
<li><p class="list_item">MAS, se você fizer li p {font-family: Verdana}, os 'p's de fora dos 'li's vão ter
					   fonte Garamond, e os 'p's de DENTRO das 'li's vão ter fonte Verdana.
</p></li>
<li><p class="list_item">Quanto mais específicos são os seletores, maior a importância que CSS dá a eles durante a estilização!</p></li>
</ul>
</div>
<p id="summary">Resumindo: Maiores especificidades fazem com que CSS priorize essas estilizações em particular.</p>
</body>
</html>



CSS

Código: Selecionar todos

p{
font-family:Garamond,serif;
}

#intro{
font-weight:bold;
color:#000000;
}

div p{
color:#7AC5CD;
}

li p{
font-family:Verdana,sans-serif;
color:#000000;
}

.list_item{
font-family:Vivaldi,cursive;
}
#summary{
font-size: 20px;
color: #000000;
}


Demo: http://jsfiddle.net/Luxm03st/