O teu primeiro CSS: a página ganha cores

Vou mostrar-te: o que é o CSS

O HTML é o esqueleto da página. O CSS é a roupa: cores, tipos de letra, tamanhos, espaçamentos. Escreve-se num ficheiro separado e parece-se com isto:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Lê em voz alta assim: «Cada título h1, pinta-o de azul escuro. Cada parágrafo p, faz-o de 18 píxeis e cinzento escuro.»

Cada regra tem três partes:

um seletor (h1) – a que se aplica a regra,
uma propriedade (color) – o quê estamos a mudar,
um valor (darkblue) – para quê o estamos a mudar.

Dois pontos separam a propriedade e o valor, e cada linha acaba com ponto e vírgula. Cuidado com esses pontos e vírgulas – um esquecido é o erro CSS mais comum do mundo.

Ligar tudo: diz à tua página onde está o CSS

Dentro da tua pasta my-website, cria um novo ficheiro chamado style.css.
Adiciona esta linha dentro do <head> de cada uma das tuas páginas HTML:
```
<link rel="stylesheet" href="style.css">
```
Isto diz: «O aspeto desta página está no ficheiro style.css.»
Testa que funciona – põe algo impossível de não ver em style.css:
```
body {
  background-color: yellow;
}
```
Guarda, atualiza a página. Está tudo amarelo? Funciona! (Podes apagar o amarelo agora.)

Cores em CSS

Podes escrever cores como palavras em inglês (red, darkblue, lightgray, tomato, gold…) ou mais precisamente como um código que começa com cardinal: #1d4ed8 é azul, #16a34a é verde. Mistura qualquer código de cor que gostes em htmlcolorcodes.com.

Agora és tu 💪

Veste o teu site com as primeiras cores. Em style.css, define:

a cor de fundo de toda a página (body),
a cor dos teus títulos (h1, h2),
o tamanho e a cor dos teus parágrafos (p).

Soluções – claro, podes ajustar as cores:

🏫 Site da escola – solução

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

O azul combina bem com um site de escola – transmite confiança (é por isso que os bancos também o usam!).

🙋 Site pessoal – solução

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Um site pessoal pode ser mais ousado – o laranja quente diz «este sítio está vivo».

🌍 Diário de viagens – solução

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Verde como florestas e prados – perfeito para um diário de viagens.

⚽ Site de clube – solução

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

A melhor escolha são as cores do teu clube – jogas de vermelho? Então vermelho é!

⚠️

Regra de legibilidade: texto escuro sobre fundo claro (ou o contrário). Amarelo claro sobre branco é ilegível. Quando não tens a certeza, pergunta a alguém: «Consegues ler isto confortavelmente?»

✅

Verifica tu: O teu site tem as suas próprias cores – e como o teu CSS vive num ficheiro ligado a cada página, todas as páginas ficaram coloridas de uma vez. Bastante inteligente, não é?

O que ficas a saber desta lição

CSS = o aspeto. Escreve-se num ficheiro style.css, ligado com uma etiqueta <link> no <head>.
A regra: seletor { propriedade: valor; } – e não te esqueças dos pontos e vírgulas.
Um ficheiro CSS veste o teu site inteiro de uma vez.