CSS para iniciantes: como estilizar uma página web

Se o HTML é o esqueleto de uma página, o CSS é a roupa: define cores, tipos de letra, espaços e a forma como os elementos se organizam. Aprender CSS é o que transforma uma página "crua" num site com aspeto cuidado. Este guia leva-te dos primeiros estilos até ao Flexbox.

O que é o CSS

CSS significa Cascading Style Sheets. É uma linguagem de estilos que diz ao navegador como mostrar os elementos que escreveste em HTML. Por exemplo: "os títulos a verde-escuro", "os parágrafos com letra maior", "os botões com cantos arredondados".

Se ainda não sabes HTML, começa pelo nosso guia de HTML para iniciantes.

Como ligar o CSS ao HTML

A forma mais organizada é um ficheiro separado. No <head> da página:

<link rel="stylesheet" href="estilo.css">

E no ficheiro estilo.css escreves as regras.

A estrutura de uma regra

h1 {
  color: #142720;
  font-size: 2.5rem;
}

• h1 é o seletor: diz a que elementos se aplica.
• color e font-size são propriedades.
• #142720 e 2.5rem são valores.

Seletores essenciais

• Por elemento: p { ... } aplica-se a todos os parágrafos.
• Por classe: .cartao { ... } aplica-se aos elementos com class="cartao". É o mais usado.
• Por identificador: #topo { ... } aplica-se ao elemento com id="topo" (único na página).
• Descendentes: nav a { ... } aplica-se às ligações dentro do menu.
• Estados: a:hover { ... } aplica-se quando passas o rato por cima.

Cores, texto e fundos

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #f7f7f2;
}

Escolhe poucas cores (duas ou três) e usa-as de forma consistente. Garante também contraste suficiente entre o texto e o fundo, para que se leia bem, sobretudo ao telemóvel e ao sol.

O modelo de caixa

Todo o elemento é uma caixa com quatro camadas: conteúdo, padding (espaço interior), border (borda) e margin (espaço exterior). Perceber isto resolve metade dos problemas de espaçamento.

.cartao {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
}

Uma boa prática é incluir no início do CSS:

* { box-sizing: border-box; }

Assim, o tamanho que defines inclui o padding e a borda, e as contas fazem sentido.

Organizar elementos com Flexbox

O Flexbox é a maneira mais simples de alinhar elementos em linha ou coluna:

.menu {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

Com estas quatro linhas, os itens do menu ficam em linha, com espaço entre eles e alinhados ao centro na vertical.

Grelhas com CSS Grid

Para colocar vários cartões em colunas:

.lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Três colunas iguais, com espaço entre elas. Com uma media query podes passar para uma coluna em ecrãs pequenos, tema do nosso artigo sobre design responsivo.

Unidades: px, rem, %, vw

• px são pixels, tamanhos fixos.
• rem depende do tamanho de letra base e é ótimo para texto e espaços.
• % é relativo ao elemento pai.
• vw e vh são relativos ao ecrã.

Para começar, usa rem para texto e espaços e % ou fr para larguras.

Erros comuns

• Usar !important para tudo. Resolve na hora e causa problemas depois.
• Copiar CSS sem perceber o que faz.
• Escrever estilos diretamente em cada etiqueta HTML em vez de usar classes.
• Não testar no telemóvel.

Como praticar

Pega numa página HTML simples que já fizeste e estiliza-a de três maneiras diferentes. Tenta depois reproduzir o aspeto de um site de que gostes, sem copiar o código. Se quiseres um site pronto e profissional, a equipa pode ajudar com design gráfico e criação de sites.