•  
     

Por que separar o formulário da função? - HTML e CSS

Existem duas razões principais para separar seu formulário/formatação (CSS) da sua estrutura/conteúdo funcional (HTML):

Você pode aplicar a mesma formatação a vários elementos HTML sem reescrever o código (por exemplo: style="color:red":) várias vezes
Você aplicar formatação e aparência simulares a várias páginas HTML a partir de um único arquivo CSS


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Fontes ainda mais bonitas</title>
</head>
<body>
<p>A maior parte desse texto é normal, mas alguns trechos são <span>estilizados</span>!
		Podemos usar nossa <span>recém estilizada fonte</span> para dar
<span>glamour</span> ao nosso website. Seria um <span>grande problema</span> 
		fazer cada uma dessas tags de span ficar <span>chique</span> individualmente,
		mas é uma moleza com <span>CSS</span>!</p>
</body>
</html>


CSS

Código: Selecionar todos

p {
font-size:100px;
}
span {
font-family:cursive;
}


Demo: http://jsfiddle.net/j28u8cu6/