Nesta lição, irei detalhar os 3 métodos que podemos usar para inserir estilos CSS em uma página.

Método 1: Arquivo Externo CSS

Este é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (um arquivo CSS controla o visual do site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:

<link href="css/arquivo.css" rel="stylesheet">

A tag link é uma tag vazia, assim como br e meta. O atributo href indica o endereço do arquivo CSS (hiper-referência), nesse exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos. Se estivéssemos utilizando a sintaxe XHTML, também é necessário o atributo type com o valor text/css.

Atenção: a tag link não é utilizada para fazer "links" no site como dizemos informalmente. Para links, é utilizada a tag a (anchor or âncora), que veremos na unidade 3.

Esse método é o que tem menor precedência em relação aos outros. Ou seja, estilos aplicados utilizando os outros métodos abaixo terão preferência de aplicação em caso de um conflito (estilos aplicados a um mesmo elemento). Veremos mais detalhes sobre cascata, herança e precedência na unidade 2.

Método 2: Tag style

Com este método, aplicamos estilos apenas na página onde as regras CSS estão inseridas. Para isso, utiliza-se a tag style dentro da tag head. Exemplo:

<style>
    p {
        color: red;
    }
</style>

No exemplo acima, os estilos definifos aplicarão a cor vermelha para todos os parágrafos do documento HTML em questão. Todos os elementos style devem ficar dentro do elemento head de uma página.

Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.

Método 3: Atributo style

Esse é o método que deve ser menos utilizado, por ir contra a divisão de um página em 3 camadas, como vimos anteriormente. Utilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo:

<p style="color: red;">Texto</p>

No exemplo acima, aplicamos a cor vermelha apenas para o parágrafo em questão (existem maneiras melhores de se selecionar apenas um elemento ou grupo de elementos para aplicação de estilos). Esse método é chamado de “inline styles” (ou estilos em linha) por estarem localizados junto com o código HTML. Ele tem precedência de aplicação sobre todos os outros.

Porém, seu uso não é recomendado, pois mistura o código CSS com o HTML e dificulta a manutenção do site, além de ir contra ideia de separação da página em camadas. Portanto, o seu uso esporádico deve ser feito com cuidado e bom senso.

Clique no botão abaixo para ver um exemplo dos três métodos em uma página (não deixe de ver o código fonte da página):

Visualizar Exemplo