HTML & CSS

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.

A mesma página sem CSS, só com a estrutura, e com CSS, estilizada Só HTML (esqueleto) HTML + CSS (pele e roupa) Minha Loja Início Produtos Contato Bem-vindo à nossa loja. Aqui você encontra os melhores produtos. Comprar Minha Loja Início Produtos Contato Bem-vindo! Aqui você encontra os melhores produtos. Comprar Mesmo HTML, mesmo conteúdo. Só o CSS mudou.
O conteúdo das duas páginas é idêntico. A diferença inteira está no CSS.

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:

Anatomia de uma regra CSS: seletor, propriedade, valor e declaração p { color : red ; font-size : 18px ; } seletor propriedade valor declaração bloco de declarações { }
Lê-se: “todos os parágrafos terão texto vermelho com 18px”.

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.

Onde o CSS fica em cada forma: dentro da tag, dentro do head, ou em um arquivo separado 1 · Inline index.html <head> … </head> <p style=”…”> <h1 style=”…”> <a style=”…”> espalhado nas tags2 · Interno index.html <head> <style> … </style> </head> <body> … </body> reunido no <head>3 · Externo index.html <link href=…> <body>… style.css só regras CSS em um arquivo à parte
Inline, interno e externo: a diferença é onde as regras moram.

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>
VantagemRápido para testar uma ideia em um único elemento.
DesvantagemCódigo repetitivo e difícil de manter: cada tag carrega o próprio estilo.

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>
VantagemOrganiza muito melhor que o inline: todo o estilo fica reunido em um só lugar.
DesvantagemSó funciona naquela página. Outra página precisaria copiar todo o bloco.

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".

VantagemSepara HTML de CSS, facilita a manutenção e pode ser usado em várias páginas.
DesvantagemExige mais de um arquivo e atenção ao caminho do link.

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.

Um único arquivo style.css ligado a quatro páginas HTML style.css 1 arquivo index.html sobre.html produtos.html contato.html
Com CSS externo, uma alteração no style.css vale para todas as páginas ligadas a ele.
Bônus de desempenho: o navegador guarda o arquivo .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?

InlineInternoExterno
Onde ficaAtributo style na tagTag <style> no <head>Arquivo .css ligado por <link>
AlcanceUm elementoUma páginaQuantas páginas quiser
ManutençãoDifícilMédiaFácil
Melhor paraTestes rápidosPáginas únicas e exercíciosQualquer 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:

  1. O inline vence as regras escritas em folhas de estilo (internas ou externas), porque está colado no próprio elemento.
  2. 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

  1. Crie uma pasta chamada meu-site.
  2. Dentro dela, crie os arquivos index.html e style.css.
  3. No index.html, monte a estrutura básica e adicione <link rel="stylesheet" href="style.css"> dentro do <head>.
  4. No style.css, escreva uma regra bem visível, como body { background: #fce4e4; }.
  5. Abra o index.html no navegador. Se o fundo mudou de cor, o link funcionou.
O fundo não mudou? Em 9 de cada 10 casos é o caminho do 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:

prof.wsp

Profissional engajado com as últimas tendências tecnológicas e de gestão, buscando continuamente aprimorar suas competências e compartilhar seu conhecimento.

view all posts

Postagens relacionadas

Publicar comentário

Vale a pena conferir