O que é CSS e as 3 formas de aplicar: inline, interno e externo
Abra uma página feita só com HTML e o resultado é sempre o mesmo: fundo branco, texto preto em Times New Roman, links azuis sublinhados e tudo empilhado do lado esquerdo da tela. Funciona, mas parece um documento de 1995. O que transforma essa página crua em um site de verdade tem nome: CSS.
Neste artigo você vai entender o que é CSS, qual o papel dele ao lado do HTML e, principalmente, as três formas de aplicar CSS em um site — inline, interno e externo — com as vantagens e desvantagens de cada uma e qual delas usar no dia a dia.
O que significa CSS?
CSS é a sigla de Cascading Style Sheets, que em português significa Folhas de Estilo em Cascata. Vamos por partes:
- Folha de estilo (style sheet): um conjunto de regras que dizem ao navegador como cada elemento deve aparecer.
- Em cascata (cascading): quando várias regras tentam estilizar o mesmo elemento, elas “descem” em uma ordem de prioridade, e o navegador decide qual vence. Vamos ver isso na prática mais adiante.
Em uma frase: o CSS define cores, fontes, espaçamentos, posicionamento e todos os outros aspectos visuais de uma página HTML.
HTML é o corpo, CSS é a pele e a roupa
A analogia que mais funciona em sala de aula é a do corpo humano. O HTML é o esqueleto: define a estrutura, o que existe na página e em que ordem — um título, um parágrafo, uma imagem, um menu. O CSS é a pele e a roupa: não muda o que existe, mas muda completamente como aquilo se apresenta.
Essa separação é o coração do desenvolvimento web: HTML cuida do conteúdo e da estrutura; CSS cuida da aparência. Quanto mais você respeitar essa divisão, mais fácil fica manter um site.
Anatomia de uma regra CSS
Antes de ver onde colocar o CSS, vale entender como uma regra é escrita. Toda regra tem um seletor (quem vai receber o estilo) e uma ou mais declarações (o que muda), cada uma formada por propriedade e valor:
Três detalhes de sintaxe que derrubam muito iniciante: as declarações ficam entre chaves { }, propriedade e valor são separados por dois-pontos : e cada declaração termina com ponto e vírgula ;. Esqueceu um ponto e vírgula? A declaração seguinte provavelmente será ignorada.
As três formas de aplicar CSS em um site
Agora a pergunta principal: onde o CSS fica? Existem três lugares possíveis, e cada um tem seu uso.
1. CSS inline
O estilo é escrito diretamente na tag HTML, usando o atributo style. Repare que aqui não existe seletor nem chaves: o estilo vale só para aquela tag.
<p style="color: red;">Texto do site</p>Imagine um site com 40 parágrafos vermelhos. Se o cliente pedir para trocar para azul, você terá que editar 40 atributos style, um por um. É por isso que o inline deve ser a exceção, não a regra.
2. CSS interno
Os estilos são escritos dentro da própria página HTML, em uma tag <style> colocada no <head>. Agora sim usamos seletores, e uma única regra atinge todos os elementos daquele tipo:
<head>
<meta charset="UTF-8" />
<title>Meu site</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Texto do site</p>
</body>O CSS interno é ótimo para páginas únicas: uma landing page, um exercício de aula, um protótipo rápido. O problema aparece quando o site cresce para várias páginas.
3. CSS externo
Os estilos ficam em um arquivo separado, com extensão .css (normalmente style.css), e são ligados ao HTML pela tag <link> no <head>:
index.html
<head>
<meta charset="UTF-8" />
<title>Meu site</title>
<link rel="stylesheet" href="style.css">
</head>style.css
p {
color: red;
}Note que o arquivo .css contém apenas regras CSS — nada de tag <style> lá dentro. E o href precisa apontar para o caminho certo: se o arquivo estiver em uma pasta, escreva href="css/style.css".
A grande força do CSS externo fica clara quando o site tem várias páginas: um único arquivo estiliza todas elas. Mudou a cor no style.css, mudou no site inteiro.
.css em cache. Na primeira página ele baixa o style.css; nas seguintes, reaproveita a cópia salva. O site fica mais leve e carrega mais rápido.Comparativo: qual forma usar?
| Inline | Interno | Externo | |
|---|---|---|---|
| Onde fica | Atributo style na tag | Tag <style> no <head> | Arquivo .css ligado por <link> |
| Alcance | Um elemento | Uma página | Quantas páginas quiser |
| Manutenção | Difícil | Média | Fácil |
| Melhor para | Testes rápidos | Páginas únicas e exercícios | Qualquer site de verdade |
A recomendação é direta: use CSS externo como padrão. Recorra ao interno em páginas isoladas e deixe o inline para testes pontuais.
E se as três formas estiverem na mesma página?
É aqui que entra o “cascata” do nome. Se o mesmo elemento receber regras de lugares diferentes, o navegador segue uma ordem de prioridade. De forma simplificada:
- O inline vence as regras escritas em folhas de estilo (internas ou externas), porque está colado no próprio elemento.
- Entre interno e externo, com seletores equivalentes, vence o que aparece por último no
<head>.
<head>
<link rel="stylesheet" href="style.css"> <!-- p { color: blue; } -->
<style>
p { color: green; } /* vem depois: vence o externo */
</style>
</head>
<body>
<p>Fico verde.</p>
<p style="color: red;">Fico vermelho: o inline vence.</p>
</body>Existem outros fatores que entram nessa disputa, como a especificidade dos seletores, mas esse é assunto para outro artigo. Por enquanto, guarde: quanto mais perto do elemento, mais força a regra tem.
Mão na massa: seu primeiro CSS externo
- Crie uma pasta chamada
meu-site. - Dentro dela, crie os arquivos
index.htmlestyle.css. - No
index.html, monte a estrutura básica e adicione<link rel="stylesheet" href="style.css">dentro do<head>. - No
style.css, escreva uma regra bem visível, comobody { background: #fce4e4; }. - Abra o
index.htmlno navegador. Se o fundo mudou de cor, o link funcionou.
href: nome do arquivo digitado errado, arquivo em outra pasta ou extensão duplicada (style.css.txt, comum no Windows com extensões ocultas). Aperte F12, abra a aba Network (Rede), recarregue a página e veja se o style.css aparece com erro 404.Desafio para praticar
Crie duas páginas, index.html e sobre.html, ligadas ao mesmo style.css. Defina uma cor de fundo, uma fonte e uma cor para os títulos. Depois, troque a cor dos títulos no arquivo CSS e confirme que as duas páginas mudaram juntas. Para fechar, adicione um style inline em um único título e observe qual regra vence.
Washington Paiva — instrutor de Desenvolvimento de Sistemas · washington.pro.br
Compartilhe:
Publicar comentário