Como linkar CSS no HTML: link, style, @import e como corrigir caminhos
Ligue uma folha de estilos com o elemento link, ou use style, estilos inline ou @import. Teste caminhos relativos e absolutos ao vivo e siga uma checklist quando o CSS não carregar.
Como linkar CSS no HTML
Para ligar um arquivo CSS a uma página HTML, coloque <link rel="stylesheet" href="styles.css"> dentro do head. O href é um caminho do arquivo HTML até o arquivo CSS, então um arquivo dentro de uma pasta css precisa de href="css/styles.css". Você também pode escrever CSS em um elemento style, em um atributo style ou trazer arquivos com @import.
Quatro formas de adicionar CSS a uma página
Método
Onde fica
Melhor para
<link rel="stylesheet">
No head
Quase tudo: um arquivo compartilhado por muitas páginas
Elemento <style>
No head
Páginas pequenas, critical CSS, demonstrações
Atributo style="..."
Em um elemento
Valores pontuais definidos pelo código
@import url(...)
No topo de um arquivo CSS
Dividir o CSS em layers ou arquivos
Quase todo caso de página sem estilo se resume ao caminho ou aos atributos do elemento link. Este guia mostra cada forma de adicionar CSS, inclui um verificador de caminhos que descobre exatamente para qual URL o seu href aponta e termina com uma checklist para quando os estilos ainda não aparecem.
Digite o endereço da sua página HTML, como aparece na barra do navegador.
Digite o href que você usou no elemento link.
O verificador mostra a URL completa que o navegador vai requisitar, calculada no seu navegador com as regras padrão de URL.
Abra essa URL em uma nova aba. Se ela não mostrar o seu CSS, o caminho está errado.
O atributo type="text/css" é opcional. CSS é a única linguagem de folha de estilos que os navegadores usam.
Coloque os links de stylesheet no head. Links no body são permitidos, mas podem causar um flash de conteúdo sem estilo.
Adicione um atributo media como media="print" para aplicar uma folha de estilos só quando essa condição for atendida.
A ordem importa. Quando duas regras têm a mesma especificidade, vence a que foi carregada depois, então linke o seu próprio CSS depois de qualquer framework.
Perguntas frequentes
Por que o meu arquivo CSS não está ligado ao meu HTML?
Confira o caminho primeiro: abra as ferramentas de desenvolvedor do navegador, vá até a aba Network e encontre a requisição do CSS. Um 404 significa que o href aponta para o lugar errado. Confira também se rel="stylesheet" está escrito corretamente, se os nomes dos arquivos usam as mesmas maiúsculas e minúsculas e se você salvou o arquivo.
Qual a diferença entre caminho relativo e absoluto?
Um caminho relativo como css/site.css é resolvido a partir da pasta da página atual. Um caminho que começa com / é resolvido a partir da raiz do site, e uma URL completa que começa com https:// aponta para um endereço exato. Caminhos a partir da raiz não funcionam quando você abre o arquivo direto do disco.
Devo usar @import ou link?
Prefira link. Cada @import só é descoberto depois que o arquivo que o contém foi baixado, então imports encadeados carregam um depois do outro. O @import é útil para ordenar com layer() ou dentro de uma ferramenta de build que junta os arquivos de qualquer forma.
Como subo uma pasta no href?
Use ../ para cada nível. Uma página em /blog/post.html com o CSS em /css/site.css usa href="../css/site.css", ou o caminho a partir da raiz href="/css/site.css" quando o site roda em um servidor.
Onde o @import precisa ficar?
Bem no topo da folha de estilos, antes de qualquer outra regra. Só declarações @charset e @layer podem vir antes dele. Um @import colocado depois de regras de estilo é ignorado.
Como o navegador resolve um href
O navegador parte da URL da própria página, descarta o nome do arquivo e aplica o href à pasta que sobra. ../ sobe uma pasta, ./ fica na mesma, e uma barra no início recomeça na raiz do site.
Quando você abre uma página com clique duplo, a raiz é o seu disco, não o seu projeto. É por isso que /css/site.css funciona em um servidor, mas falha a partir de um endereço file://, enquanto um caminho relativo funciona nos dois.
Estilos inline e elementos style
Um elemento style mantém o CSS na página, o que economiza uma requisição e é prático para o pequeno bloco de critical CSS que estiliza a primeira tela. Ele não pode ficar em cache separadamente e se repete em toda página.
Um atributo style se aplica a um elemento e vence as regras das folhas de estilos, a menos que elas usem !important. Use-o para valores que o seu código calcula, não para o design normal, que fica impossível de mudar no site inteiro.
O elemento link
Uma página com uma folha de estilos linkada
O link fica no head. O href é relativo a este arquivo HTML, então styles.css precisa estar em uma pasta css ao lado dele.
O elemento style e os estilos inline
CSS incorporado e inline juntos
O elemento style colore todo p. O atributo style no segundo parágrafo vence só para aquele elemento.
@import dentro de uma folha de estilos
Os imports vêm primeiro. Eles podem levar uma media query, uma condição supports() ou uma cascade layer.
CSS não carrega? Siga esta lista
Por que os estilos não se aplicam e como conferir
Sintoma
Causa provável
Solução
404 para o CSS na aba Network
Caminho ou pasta errados
Use o verificador de caminhos acima; tente um caminho a partir da raiz em um servidor
Nenhuma requisição para o CSS
Erro de digitação no rel ou link fora do HTML
Escreva rel="stylesheet" exatamente; coloque o link no head
Funciona localmente, falha online
Maiúsculas e minúsculas do nome do arquivo diferem
Estilos antigos continuam aparecendo
Cache do navegador
Recarregue forçado, ou adicione uma versão como styles.css?v=2
Algumas regras são ignoradas
Sobrescritas por regras posteriores ou mais específicas
Inspecione o elemento; confira a ordem e a especificidade
O @import não faz nada
Ele vem depois de outras regras
Mova todo @import para o topo do arquivo
Bloqueado no console
Servido com o content type errado
O servidor precisa enviar text/css para arquivos .css
Verificador de caminhos
Endereço da sua página HTML
href no seu elemento link
O navegador requisita:
Esse endereço de página não é uma URL completa. Comece com https:// ou file:///
Este é um arquivo no seu disco. Caminhos que começam com / apontam para a raiz da unidade, não para o seu projeto.