CSS: Onde colocar o código CSS?

Onde colocar o código CSS?

O código CSS pode ser inserido em três locais diferentes:

  1. em linha (inline)

  2. Área de estilos interna

  3. Á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: