HTML e CSS do zero: crie a sua primeira página web

Por Mattheus Moraes · Exemplos de código testados · Atualizado em 6 de novembro de 2026 · Leitura de 4 min

HTML e CSS: quem faz o quê

• HTML (HyperText Markup Language) é a estrutura: o que existe na página.
• CSS (Cascading Style Sheets) é o visual: como cada coisa aparece.
• JavaScript é o comportamento: o que acontece quando alguém clica. Ele vem depois.

Uma comparação: o HTML é a planta da casa, o CSS é a pintura e a decoração, e o JavaScript é a parte elétrica.

O que você precisa

Um editor de texto simples (o Bloco de Notas serve; editores como o VS Code ajudam mais) e um navegador. Crie uma pasta e, dentro dela, dois arquivos: index.html e estilo.css.

A estrutura da página (HTML)

Copie para o index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Minha primeira página</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Esta é a minha primeira página, feita com HTML e CSS.</p>
  <h2>O que estou aprendendo</h2>
  <ul>
    <li>HTML: a estrutura</li>
    <li>CSS: o visual</li>
  </ul>
  <a href="https://developer.mozilla.org/pt-BR/">Documentação de HTML e CSS</a>
</body>
</html>

Cada parte tem um papel:

• As tags ficam entre sinais de menor e maior, e quase sempre abrem e fecham: <p> abre um parágrafo e </p> fecha.
• <head> traz informações sobre a página (título da aba, idioma, o arquivo de estilo). <body> traz o que aparece.
• <h1> é o título principal e <h2> um subtítulo.
• <ul> é uma lista com marcadores, e cada <li> é um item.
• <a href="..."> cria um link.
• O lang="pt-BR" diz o idioma e ajuda leitores de tela e buscadores.

O visual da página (CSS)

Copie para o estilo.css:

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  background: #f6f5ff;
  color: #17142e;
}

h1 {
  color: #6a4dff;
}

a {
  color: #4a30d6;
}

Cada regra tem o formato seletor { propriedade: valor; }. O seletor diz quem recebe o estilo (body, h1, a), e as propriedades dizem como. A propriedade max-width limita a largura do texto para ficar fácil de ler, e margin: 2rem auto centraliza o conteúdo.

Veja o resultado e experimente

1. Abra a pasta e dê dois cliques no index.html. Ele abre no navegador.
2. Mude a cor do h1 no CSS, salve e atualize a página (tecla F5).
3. Aperte F12 no navegador para abrir as ferramentas do desenvolvedor e ver o HTML e o CSS da página em tempo real.

Hábitos que valem desde o início

• Use as tags pelo significado: <h1> para título, <p> para parágrafo, <ul> para lista. Isso ajuda quem usa leitor de tela e os buscadores.
• Descreva as imagens com o atributo alt.
• Teste no celular. A linha com viewport no <head> faz a página se ajustar às telas pequenas.
• Indente o código para enxergar o que está dentro de quê.

Próximos passos

Depois de dominar o básico, aprenda a organizar a página em partes (cabeçalho, conteúdo, rodapé), a usar imagens e a deixar o layout flexível para qualquer tela. Quando se sentir pronto, junte o JavaScript para tornar a página interativa e publique o seu projeto, como em montar um portfólio de programação.

<h1>Sobre mim</h1>
<p>Meu nome é ... e estou aprendendo a programar.</p>
<ul>
  <li>Gosto de ...</li>
  <li>Quero aprender ...</li>
  <li>Meu objetivo é ...</li>
</ul>

Leia também