Carregando...

Como adicionar CSS

Você pode escrever regras CSS perfeitas e ainda assim não ver nenhuma mudança, se o navegador nunca as carregar. Nesta sessão você vê as três formas comuns de conectar o CSS ao HTML e qual delas vale a pena adotar como padrão.

Como adicionar CSS a uma página HTML?

Existem três formas: uma folha de estilo externa vinculada no head, um bloco interno <style> no head, ou o atributo inline style em um único elemento. Em sites reais e projetos com várias páginas, comece com um arquivo .css externo.

Os três métodos em resumo

Use esta tabela para escolher o método antes de escrever o código. Nas próximas seções há um exemplo curto de cada um.

📊 Formas de adicionar CSS

Método Onde fica Reuso entre páginas Melhor uso no dia a dia
Folha de estilo externa Arquivo .css separado + <link> no head Excelente Padrão para projetos e para este curso
CSS interno <style> … </style> no head do HTML Só uma página Demos rápidas e prática em um único arquivo
CSS inline style="…" em um elemento HTML Nenhum Ajustes pontuais bem pequenos (use com moderação)

Folha de estilo externa (padrão recomendado)

Mantenha HTML e CSS em arquivos separados. No head, aponte para a folha de estilo com um elemento link; o navegador busca o arquivo CSS e aplica as regras.

Vincular uma folha de estilo externa

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

Escreva as regras em styles.css, ao lado do arquivo HTML (se o arquivo estiver em uma subpasta, ajuste o href):

Arquivo externo styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

Por que o externo vence no trabalho real

  • Uma única folha de estilo pode formatar muitas páginas HTML
  • Você muda o visual sem precisar caçar estilos no meio das tags
  • O navegador pode guardar o arquivo .css em cache e não baixá-lo de novo a cada página
  • Cuide do rel="stylesheet" e de um href correto: um erro de digitação no caminho deixa a página sem estilo, sem nenhum aviso

CSS interno (<style> no head)

Para uma única página de prática, você pode colocar as regras dentro de um elemento <style> no head. Nas sessões Introdução e Syntax usamos esse padrão para manter HTML e CSS no mesmo arquivo.

Bloco style interno

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

Quando o CSS interno é uma boa

O CSS interno funciona bem em demos e em exercícios que precisam ser entregues em um único arquivo. Mas ele não escala: copiar o mesmo bloco <style> em todas as páginas faz as versões se desencontrarem e deixa qualquer atualização trabalhosa. Passe para o arquivo externo assim que tiver mais de uma página, ou quando quiser uma separação mais limpa.

CSS inline (atributo style)

O CSS inline coloca as declarações direto no elemento, por meio do atributo style. Não há seletor nem arquivo separado: só aquele elemento recebe o estilo.

Atributo style inline

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

Use com moderação

Estilos inline são práticos para um teste rápido e temporário, mas misturam apresentação com marcação, são difíceis de reaproveitar e mais difíceis de sobrescrever depois, quando cascata e especificidade entram em jogo. Prefira classes em uma folha de estilo. As regras de conflito da cascata aparecem em sessões futuras; por enquanto, trate o inline como exceção, não como hábito.

Qual método escolher?

  • Construir um site ou fazer os projetos deste curso: folha de estilo externa
  • Um arquivo de demonstração curto em sala: <style> interno é aceitável
  • Alterar um único elemento por alguns segundos ao depurar: o inline ajuda; depois, mova a regra para a folha de estilo
    Combinar métodos é permitido. Quando a mesma propriedade é definida em mais de um lugar, o navegador segue as regras da cascata (veremos depois). Um bom hábito: deixe os estilos definitivos no arquivo externo e evite espalhar a mesma propriedade pelos três métodos.

Experimente você mesmo

  1. Crie howto.html e styles.css na mesma pasta.
  2. Em howto.html, adicione um head com <link rel="stylesheet" href="styles.css"> e, no body, um título: <h1 class="hero">How-to practice</h1>.
  3. Em styles.css, escreva: .hero { color: #0f766e; }. Abra o arquivo HTML no navegador.
  4. Mude a cor para #1d4ed8, salve o arquivo CSS e atualize a página: a cor do título deve mudar.
  5. Adicione temporariamente style="color: #b45309;" no h1, atualize e depois remova o atributo para que a folha de estilo volte a mandar.

Erros comuns

  • Colocar <link rel="stylesheet" …> no body por hábito — o lugar dele é o head, junto com os outros metadados do documento
  • Erro de digitação no href (style.css em vez de styles.css), fazendo o arquivo nunca carregar e a página ficar sem estilo
  • Esquecer rel="stylesheet" no elemento link
  • Colar um bloco <style> completo em cada página em vez de compartilhar um arquivo externo
  • Depender do style inline para cada cor e fonte — a marcação fica poluída e difícil de manter

Resumo

  • Três formas: folha de estilo externa, <style> interno e atributo style inline
  • Padrão para páginas reais: arquivo externo com <link rel="stylesheet" href="…"> no head
  • O CSS interno serve para prática em um arquivo só; o inline, para ajustes raros e pontuais
  • Erro no caminho ou rel esquecido são causas comuns de estilos que "não fazem nada"
  • Pratique vinculando um arquivo .css de verdade, mudando um valor e atualizando a página

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial