Docs executáveis de CSS: CSS externo

Q: O que é CSS externo?

CSS externo é uma folha de estilo salva em um arquivo .css próprio e carregada com no da página. Toda página que liga o arquivo recebe os mesmos estilos, e o navegador guarda o arquivo em cache entre as páginas.

Q: Como linkar um arquivo CSS no HTML?

Adicione dentro do . O href é um caminho relativo ao arquivo HTML, então css/styles.css aponta para uma pasta css ao lado dele, e /styles.css parte da raiz do site.

Q: Por que meu CSS externo não funciona?

As causas comuns são um caminho errado no href (procure um 404 na aba Network), um rel="stylesheet" faltando, tags escritas dentro do arquivo .css ou uma regra posterior sobrescrevendo a sua. Um hard refresh descarta uma cópia antiga em cache.

CSS externo e CSS interno: link e style explicados

O CSS externo fica em um arquivo .css que cada página liga com <link rel="stylesheet">; o CSS interno fica em um elemento <style> dentro de uma página. Aprenda os dois, como funcionam os caminhos de arquivo e qual regra vence quando eles se encontram.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

CSS externo em uma linha

CSS externo é um arquivo .css separado. Você o liga no <head> de cada página que precisa dele:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

O arquivo em si contém regras CSS puras, sem nenhuma tag HTML em volta:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

A prévia abaixo não tem um segundo arquivo para carregar, então coloca o mesmo CSS em um elemento <style>. Isso é CSS interno, e o resultado é idêntico ao do arquivo ligado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS interno: o elemento style

CSS interno (também chamado de CSS incorporado) é um elemento <style> dentro da página. Coloque-o no <head> para que os estilos sejam conhecidos antes de o body ser renderizado. Ele vale para a página toda, e suas regras usam seletores, o que o atributo style inline não consegue.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Passe o mouse sobre uma tag: :hover funciona aqui porque é uma regra de verdade. A terceira forma, o atributo style, está na página de CSS inline.

CSS interno vs externo

	Externo (`<link>`)	Interno (`<style>`)
Onde	Um arquivo `.css`	Dentro da página HTML
Alcance	Toda página que o liga	Uma página
Cache	Baixado uma vez, reaproveitado entre páginas	Enviado de novo com cada página
Mudar o visual do site	Altera um arquivo	Altera todas as páginas
Requisição extra	Sim, uma por arquivo	Não
Bom para	Sites reais	Demos, páginas únicas, e-mail HTML, CSS crítico

A especificidade é a mesma nos dois: uma regra em um elemento <style> e a mesma regra em um arquivo ligado pesam exatamente igual. Em caso de empate, vence a que vem depois no documento.

Ordem: a folha de estilo posterior vence

As folhas de estilo são lidas na ordem do documento, tanto <link> quanto <style>. Entre duas regras com a mesma especificidade, vence a posterior. Os dois blocos <style> abaixo fazem o papel de um arquivo ligado seguido de uma sobrescrita na página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

O botão mantém o padding e o texto branco da primeira regra e pega só o fundo da segunda. É por isso que a folha de estilo do seu site vem depois da de um framework: faça o <link> da biblioteca primeiro e depois o seu.

Caminhos de arquivo no href

O href de um <link> é uma URL, resolvida a partir da localização do arquivo HTML.

href	Carrega
`styles.css`	Um arquivo na mesma pasta da página
`css/styles.css`	Uma pasta `css` ao lado da página
`../styles.css`	Uma pasta acima
`/styles.css`	A partir da raiz do site
`https://example.com/a.css`	Uma URL completa em outro servidor

Em um site com páginas em profundidades diferentes, a forma relativa à raiz (/css/styles.css) mantém um único caminho funcionando em todas as páginas.

Folhas de estilo para impressão e outras mídias

O atributo media restringe uma folha de estilo às condições que combinam com ele. Tanto <link> quanto <style> o aceitam:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

A prévia é uma tela, então o banner aparece. Em uma página real, o banner some da impressão, e no DevTools você vê o mesmo emulando o tipo de mídia print (painel Rendering).

Erros comuns

Caminho errado. Um erro de digitação no href não carrega nada e a página aparece sem estilo. Abra o DevTools, aba Network, e procure um 404 no arquivo .css.
Esquecer rel="stylesheet". Sem ele, <link href="styles.css"> não carrega folha de estilo nenhuma.
HTML dentro do arquivo .css. Um arquivo .css contém só regras. Tags <style> dentro dele não são CSS válido e quebram a regra vizinha.
Colocar sua folha de estilo antes da do framework. Com especificidade igual, vence o arquivo posterior, então ligue o seu CSS por último.
Ver uma versão antiga. Navegadores guardam folhas de estilo em cache. Faça um hard refresh ou acrescente uma versão à URL (styles.css?v=2) ao publicar uma mudança.

Perguntas frequentes

O que é CSS externo?

CSS externo é uma folha de estilo salva em um arquivo .css próprio e carregada com <link rel="stylesheet" href="styles.css"> no <head> da página. Toda página que liga o arquivo recebe os mesmos estilos, e o navegador guarda o arquivo em cache entre as páginas.

O que é CSS interno?

CSS interno, também chamado de CSS incorporado, é o CSS escrito dentro de um elemento <style> no próprio documento HTML, normalmente no <head>. Ele vale só para aquela página.

Como linkar um arquivo CSS no HTML?

Adicione <link rel="stylesheet" href="styles.css"> dentro do <head>. O href é um caminho relativo ao arquivo HTML, então css/styles.css aponta para uma pasta css ao lado dele, e /styles.css parte da raiz do site.

O que é melhor, CSS interno ou externo?

CSS externo para qualquer coisa com mais de uma página: um só arquivo para editar, e os navegadores baixam uma vez e reaproveitam. O CSS interno serve para uma página única, uma demo ou um pequeno bloco de estilos críticos que você quer na primeira resposta.

Por que meu CSS externo não funciona?

As causas comuns são um caminho errado no href (procure um 404 na aba Network), um rel="stylesheet" faltando, tags <style> escritas dentro do arquivo .css ou uma regra posterior sobrescrevendo a sua. Um hard refresh descarta uma cópia antiga em cache.

Conceitos relacionados