Incluindo CSS na Página: Inline, Interno e Externo
1 min de leitura
Existem três formas de aplicar CSS a uma página. Todas funcionam; a diferença é o alcance e a organização.
1. Inline (no próprio elemento)
<p style="color: red; font-size: 20px;">Texto vermelho e grande</p>
Você coloca o estilo direto na tag, com o atributo style. Serve para um
ajuste pontual, mas vira caos em página com mais de cinco elementos.
Imagine ter que achar cada tag no HTML pra mudar a cor. E se forem 200 botões?
2. Interno (no <head> do HTML)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>Texto vermelho e grande</p>
</body>
</html>
Você abre uma tag <style> dentro do <head> e escreve as regras ali. Vale
para uma única página, especialmente em protótipos ou testes rápidos. Mas se
você tem 10 páginas, vai copiar e colar o mesmo bloco em todas.
3. Externo (em arquivo .css separado) - o padrão
<!-- index.html -->
<head>
<link rel="stylesheet" href="estilo.css" />
</head>
/* estilo.css */
p {
color: red;
font-size: 20px;
}
O CSS mora num arquivo próprio (estilo.css), e o HTML só aponta pra ele com
<link>. Esse é o jeito certo na esmagadora maioria dos casos reais:
-
Uma página, dez páginas, cem páginas - todas usam o mesmo arquivo.
-
O navegador cacheia o CSS depois do primeiro download - nas próximas páginas, ele não baixa de novo.
-
Você separa o conteúdo (HTML) do visual (CSS) - cada um no seu lugar, mais fácil de achar e manter.
-
Inline: ajuste pontual, único elemento. Evite em produção.
-
Interno: página única, protótipo, experimentação rápida.
-
Externo: o padrão. Sempre que tiver mais de uma página ou mais de meia dúzia de regras.
Dica: a tag
<link rel="stylesheet">vai dentro do<head>, antes de qualquer<script>. O motivo é performance - o navegador só pinta a página depois de processar o CSS, e scripts que dependem de estilo precisam do CSS já carregado.
No próximo nó, vamos aprender a escrever as regras - os famosos "seletores", que dizem a qual elemento o estilo se aplica.