Onde colocar o código CSS?
O código CSS pode ser inserido em três locais diferentes:
em linha (inline)
Área de estilos interna
Área de estilos externa.
Vamos demonstrar utilizando o seguinte exemplo de formatação:
Pretendemos atribuir a cor linen (#FAF0E6: salmão claro) ao fundo da página HTML ou seja, ao body.
1. Em linha (inline), ou seja, no atributo style da tag body:
Conteúdo do ficheiro HTML:
<body style="background-color: linen">
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
2. Folha de estilos interna, ou seja, na tag style dentro do head:
Conteúdo do ficheiro HTML:
<head>
<style>
body {
background-color: linen;
}
</style>
</head>
<body>
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
3. Folha de estilos externa, ou seja, no ficheiro separado meuestilo.css:
Conteúdo do ficheiro meuestilo.css:
body {
background-color: linen;
}
Conteúdo do ficheiro HTML:
<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head>
<body>
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
Mais informação em: