Todo site que você visita, dos mais simples aos mais sofisticados, é construído em cima de HTML e CSS. Aprender essa dupla é a porta de entrada mais rápida para quem quer criar páginas de verdade, e o melhor: você vê o resultado no navegador a cada alteração. Vamos ao que importa.
O que cada um faz
Pense em uma casa. O HTML (sigla em inglês para linguagem de marcação de hipertexto) é a estrutura: paredes, portas, cômodos. O CSS (folhas de estilo em cascata) é a decoração: cor da parede, tamanho da janela, posição dos móveis.
- HTML: diz o que é cada pedaço do conteúdo. Isto é um título, isto é um parágrafo, isto é um link, isto é uma lista.
- CSS: diz como cada pedaço deve aparecer. Tamanho, cor, fonte, espaço ao redor, alinhamento.
Os dois trabalham juntos e se complementam. Depois deles, vem o JavaScript, que dá interatividade. Esse trio forma o que se chama de front-end, a parte do site que o visitante vê e usa.
Prepare o ambiente
Você precisa de três coisas, todas gratuitas:
- Um editor de código. O VS Code é o mais usado por iniciantes.
- Um navegador. Chrome, Firefox ou Edge servem.
- Uma pasta para o projeto. Crie, por exemplo, a pasta meu-site no computador.
Dentro dela, crie dois arquivos de texto: index.html e style.css. O nome index.html é o padrão para a página inicial de um site.
Seu primeiro HTML
Um documento HTML tem uma estrutura básica. Ele começa declarando o tipo de documento, depois tem um bloco de informações para o navegador (chamado head) e um bloco com o conteúdo visível (chamado body). Dentro do head ficam o título da aba e a ligação com o arquivo de estilo. Dentro do body ficam os elementos da página.
As tags mais usadas no começo são estas:
- h1 até h6: títulos, do mais importante (h1) ao menos importante (h6). Use um h1 por página.
- p: parágrafo de texto.
- a: link para outra página ou site, com o endereço no atributo href.
- img: imagem, com o caminho no atributo src e uma descrição curta no atributo alt.
- ul e li: lista com marcadores e seus itens.
- div e section: caixas para agrupar partes da página.
- header, nav, main e footer: áreas com significado, como cabeçalho, menu, conteúdo principal e rodapé.
As tags normalmente abrem e fecham em volta do conteúdo. Os atributos dão informações extras ao elemento, como o endereço de um link.
Seu primeiro CSS
O CSS funciona com regras compostas por um seletor (quem será estilizado) e propriedades com valores (o que muda). Por exemplo, você pode selecionar todos os parágrafos e definir a cor do texto e o tamanho da fonte.
Propriedades que vale conhecer logo no início:
- color e background-color: cor do texto e do fundo.
- font-family e font-size: tipo e tamanho da letra.
- margin e padding: espaço de fora e de dentro de um elemento.
- border: borda.
- width e max-width: largura.
- text-align: alinhamento do texto.
Para o CSS valer, o HTML precisa apontar para o arquivo de estilo com uma tag link dentro do head, indicando o nome do arquivo style.css.
O modelo de caixa
Todo elemento é uma caixa com quatro camadas: conteúdo, padding (espaço interno), borda e margin (espaço externo). Entender isso resolve boa parte das dúvidas sobre por que um elemento não fica do tamanho esperado.
Flexbox para organizar em linha
Quando precisar colocar elementos lado a lado, use o Flexbox: basta aplicar display: flex ao elemento pai. Propriedades como justify-content e align-items controlam o alinhamento. É a ferramenta mais usada para menus, cartões e rodapés.
Um roteiro de estudo em quatro etapas
- Estrutura: monte uma página com título, parágrafos, lista, imagem e link.
- Estilo básico: mude cores, fontes e espaçamentos até a página ficar agradável.
- Layout: aprenda Flexbox e, depois, Grid para organizar colunas.
- Responsividade: faça a página se adaptar ao celular, assunto detalhado em site responsivo: como deixar bom no celular.
Como praticar de verdade
Ler sobre tags não basta. Faça pequenos projetos:
- uma página de apresentação pessoal;
- um cartão de visita digital com seus links;
- uma página de cardápio de restaurante fictício;
- uma réplica simplificada de uma página que você admira.
Quando algo não sair como esperado, abra o navegador, clique com o botão direito no elemento e escolha Inspecionar. As ferramentas do desenvolvedor mostram o HTML e o CSS aplicados, e você pode testar mudanças ali antes de alterar o arquivo. Esse hábito acelera muito o aprendizado.
Erros comuns de quem está começando
- Esquecer de fechar uma tag: o navegador tenta adivinhar o que você quis dizer e a página pode sair torta. Confira se cada tag aberta tem o seu fechamento.
- Salvar o arquivo e não atualizar o navegador: depois de editar, salve (Ctrl + S) e recarregue a página (F5) para ver a mudança.
- Errar o caminho de uma imagem ou do CSS: se a imagem não aparece ou o estilo não pega, quase sempre o nome ou a pasta está errado. Letras maiúsculas e minúsculas importam.
- Usar espaços e acentos nos nomes dos arquivos: prefira nomes em minúsculas, sem acento e com hífen, como foto-perfil.jpg.
- Estilizar tudo com o mesmo seletor: use classes, que são nomes que você dá aos elementos, para aplicar estilos só onde precisa. Isso mantém o CSS organizado conforme o projeto cresce.
- Copiar um modelo pronto sem ler: mexa nas partes, quebre de propósito e veja o que acontece. É assim que o entendimento aparece.
Para onde ir depois
Com HTML e CSS na mão, você já consegue publicar uma página simples. O próximo passo natural é aprender JavaScript, assunto de JavaScript para iniciantes: o que estudar primeiro. Se o objetivo for colocar o site no ar, o guia como criar um site do zero mostra o caminho de domínio e hospedagem.
Comece hoje: crie a pasta, os dois arquivos e uma página com um título e um parágrafo. A partir dali, cada pequena mudança é uma aula.