:: Vinculando folhas de estilo à documentos ::

Este tutorial foi atualizado em: 11/03/2011

Os três tipos de vinculação de folhas de estilo

As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas:

Importadas ou linkadas;
Incorporadas;
Inline.

Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css

Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).

O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir.

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

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>
...
<style type="text/css">
	@import url("estilo.css");
</style>	
...	
</head>

O navegador "lerá" as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.

Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css

Folha de estilo incorporada ou interna

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.

As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.

<head>
...
<style type="text/css">
<!--
body {
	background: #000; 
	url(imagens/minhaimagem.gif);
	}
h3 {
	color: #f00;
	}
p {
	margin-left: 15px; 
	padding:1.5em;
	}
-->
</style>
...
</head>

O navegador "lerá" as regras de estilo na própria página, e formatará o documento de acordo com elas.

Nota: Um navegador ignora normalmente as tags desconhecidas. Isto significa que um navegador antigo que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um navegador antigo mostre o conteúdo da tag, "escondendo-o" através do uso da marcação de comentário do HTML.

Observe a inclusão dos símbolos  (fecha comentário) no código acima. Nos dias atuais mesmo os navegadores mais antigos ainda em uso suportam CSS e a prática de se marcar regras de estilo com sinais de comentário HTML está em desuso.

Folha de estilo inline

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.

Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.

A sintaxe para aplicar estilo inline é mostrada a seguir:

<p style="color:#000; margin: 5px;">
	Aqui um parágrafo de cor preta e com 5px nas 4  margens.
</p>

Folhas de estilo múltiplas

Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica.

Suponha, uma folha de estilo externa com as seguintes declarações para o seletor h2:

h2 {
	color: #fc0;
	text-align: center;
	font: italic 9pt Verdana, Sans-serif;
	}

e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:

h2 {
	color: #fc0;
	text-align: center;
	font: italic 10pt Verdana, Sans-serif;
}

Estando ambas as folhas vinculadas ao documento há um conflito no tamanho da fonte para o elemento h2. e Sendo a folha interna declarada depois da externa na seção head do documento, prevalecerá a folha interna e a fonte de h2 terá o tamanho igual a 10 pt.

Este artigo foi traduzido para o russo. Grato ao Nikolay.