Uso do CSS
Use uma das três formas de adicionar estilos a um documento HTML: inline, interno e externo. Saiba quando e como usar cada uma delas.
O CSS controla a aparência de um documento HTML, mas o navegador precisa saber onde encontrar essas regras de estilo. Existem três formas de vincular CSS a uma página HTML, e cada uma se adapta a uma situação diferente:
- Estilo inline — coloca as regras diretamente em um único elemento usando o atributo
style. - Estilo interno (incorporado) — reúne as regras dentro de um elemento
<style>na seção<head>da página. - Estilo externo — mantém as regras em um arquivo
.cssseparado e o vincula à página.
Esta página abrange os três métodos, quando usar cada um deles e como eles interagem quando mais de um aponta para o mesmo elemento. Se você é iniciante e ainda não sabe como uma regra CSS é construída (seletor, propriedade, valor), leia Sintaxe CSS primeiro.
Estilo Inline
Um estilo inline é escrito diretamente em um elemento usando o atributo style. As regras se aplicam somente a esse elemento. O atributo contém uma ou mais declarações (propriedade: valor) separadas por ponto e vírgula — nenhum seletor nem chaves são necessários, pois o elemento ao qual a regra se aplica é o próprio elemento em que ela está escrita.
Quando usar: para ajustes rápidos e pontuais ou para estilos gerados dinamicamente (por exemplo, pelo JavaScript). Evite-o para estilização geral — como a regra fica no elemento, não é possível reutilizá-la, e fica difícil de manter em uma página grande.
Exemplo de criação de um estilo inline para um documento HTML:
Exemplo de Estilo CSS Inline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Resultado
Vamos analisar o exemplo. Na tag <h2> escrevemos style="color:#1c87c9", de modo que o texto desse título é renderizado na cor azul #1c87c9.
Fizemos o mesmo na tag <p> com style="color:#8ebf42; font-size:15px". As duas declarações são separadas por ponto e vírgula: o texto entre as tags de abertura <p> e fechamento </p> fica colorido com #8ebf42 (verde) e com tamanho de 15px.
Estilo Interno
Com um estilo interno (ou incorporado), o CSS de uma página fica dentro de um elemento <style> no <head> da página. Ao contrário dos estilos inline, aqui você escreve regras completas — um seletor seguido de um bloco de declaração entre chaves — portanto uma única regra pode atingir vários elementos ao mesmo tempo.
Quando usar: para uma página individual que precisa de estilização própria e não é compartilhada com o restante do site, ou para prototipagem rápida. A desvantagem é que as regras afetam apenas essa página. Para estilizar várias páginas da mesma forma, seria necessário copiar o bloco <style> em cada uma delas — exatamente o problema que as folhas de estilo externas resolvem.
No exemplo abaixo, a regra body pinta o fundo da página com #1c87c9 (azul) e a regra p deixa o texto dos parágrafos branco.
Exemplo de criação de um estilo interno para um documento HTML:
Exemplo de Estilo CSS Interno
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Estilo Externo
Uma folha de estilo externa mantém todo o CSS em seu próprio arquivo, separado do HTML. Esta é a abordagem padrão para sites reais, pois todas as páginas podem vincular ao mesmo arquivo e compartilhar uma aparência consistente. Você pode criar o arquivo com qualquer editor de texto ou editor HTML, como o Bloco de Notas ou o Sublime Text.
O arquivo contém apenas CSS — sem tags HTML — e é salvo com a extensão .css. Para vinculá-lo a uma página, adicione uma tag <link> dentro da seção <head>. Cada página que deve usar esses estilos precisa do seu próprio <link>.
Quando usar: quase sempre em um site com várias páginas. Como as regras ficam em um único lugar, alterar uma cor ou fonte nesse arquivo .css atualiza todas as páginas de uma vez, e o navegador pode armazenar o arquivo em cache para que seja baixado apenas uma vez.
Exemplo de criação de um estilo externo para um documento HTML:
Exemplo de Estilo CSS Externo
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Um arquivo style.css correspondente pode ter a seguinte aparência:
body {
background-color: #1c87c9;
}
p {
color: white;
}Qual Método Usar?
Como regra geral:
- Use uma folha de estilo externa para quase todo trabalho real — ela é reutilizável, armazenável em cache e fácil de manter.
- Use estilos internos para uma página única ou uma demonstração rápida.
- Use estilos inline apenas para um ajuste pontual que não pode ser expresso de outra forma (geralmente um valor calculado dinamicamente).
Como os Métodos Interagem
Quando o mesmo elemento é alvo de mais de um método, o navegador precisa decidir qual declaração prevalece. Em igualdade de condições, a ordem de força é:
- Estilos inline (maior prioridade).
- Regras internas e externas, decididas pela especificidade do seletor e, quando há empate de especificidade, pela regra que aparece por último.
Portanto, um style="color:red" inline substitui uma regra p { color: blue; } de uma folha de estilo. Esse sistema de prioridade é chamado de cascata — o "C" em CSS.