F2 — CSS (o estilo)

Objectivo: dar aparência à estrutura HTML — cores, tipografia, espaçamento e layout responsivo. Resultado final: a página de perfil do módulo anterior, estilizada e adaptável ao telemóvel.

1. O que é CSS e como se liga ao HTML

CSS (Cascading Style Sheets) controla como as coisas aparecem. O mais comum é um ficheiro .css separado, ligado no <head>:

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

2. A regra base: seletor + propriedades

h1 {                  /* seletor: a quem se aplica */
  color: #FF7A00;     /* propriedade: valor */
  font-size: 2rem;
}

3. Seletores: elemento, classe e id

p        { color: gray; }     /* todos os <p> */
.destaque{ color: red; }      /* elementos com class="destaque" */
#topo    { height: 60px; }    /* o elemento com id="topo" (único) */

<p class="destaque">Texto importante</p>

Classe (.) — reutilizável, podes pô-la em vários elementos. É a que mais usas.
Id (#) — único na página.

4. Cores e tipografia

body {
  color: #14181E;                 /* cor do texto */
  background: #F5F6F8;            /* cor de fundo */
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;              /* espaço entre linhas */
}

Cores: nome (red), hex (#FF7A00) ou rgb(255,122,0).

5. O Box Model (a caixa de cada elemento)

Todo o elemento é uma caixa com 4 camadas, de dentro para fora:

┌───────────── margin (espaço por fora) ─────────────┐
│  ┌──────────  border (a borda)  ──────────────┐    │
│  │   ┌─────  padding (espaço por dentro) ──┐   │    │
│  │   │            conteúdo                 │   │    │
│  │   └─────────────────────────────────────┘   │    │
│  └─────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────┘

.card {
  padding: 20px;                 /* espaço interno */
  margin: 16px;                  /* espaço externo */
  border: 1px solid #E4E7EC;
  border-radius: 12px;           /* cantos arredondados */
}

6. `display` — como os elementos se organizam

block — ocupa a linha toda (ex.: div, p).
inline — só o necessário, lado a lado (ex.: span, a).
flex — alinhar itens numa linha/coluna (o mais usado hoje).
grid — organizar em grelha de linhas e colunas.

.linha {
  display: flex;
  gap: 16px;            /* espaço entre os filhos */
  justify-content: space-between;  /* distribui na horizontal */
  align-items: center;             /* alinha na vertical */
}

7. Unidades

Unidade	O que é	Quando usar
`px`	pixéis fixos	bordas, detalhes finos
`rem`	relativa ao texto base	tamanhos de fonte e espaços (escala bem)
`%`	percentagem do pai	larguras flexíveis
`vw`/`vh`	% da janela	secções de ecrã inteiro

8. Responsividade (media queries)

Adaptar ao tamanho do ecrã. Em Angola, testar a 375px (telemóvel).

.grelha { display: grid; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {     /* em ecrãs pequenos... */
  .grelha { grid-template-columns: 1fr; }   /* ...uma coluna */
}

Regras de ouro mobile: texto ≥ 12px · botões/links ≥ 44×44px · sem barra de scroll horizontal.

✅ Exercícios

Estiliza o perfil — liga um estilo.css à página do módulo F1: muda cor de fundo, cor e tamanho do título, e a fonte.
Um card — transforma a tua secção num card: fundo branco, padding, border-radius e uma sombra (box-shadow).
Flex — põe o nome e a foto lado a lado com display:flex e gap.
Responsivo — com uma media query a 760px, faz o card passar a ocupar a largura toda no telemóvel.

Dica: com Live Server aberto, cada vez que gravas o .css a página actualiza sozinha.

⚠️ Erros comuns

Lutar contra a especificidade — um #id ganha sempre a uma .classe. Prefere classes.
Esquecer box-sizing: border-box — sem isto, padding aumenta a largura e parte o layout. Põe no topo: *{box-sizing:border-box;}.
Usar só px — para fontes e espaços, rem escala melhor.
Esquecer a media query — fica bom no PC e partido no telemóvel.
Texto pequeno demais em mobile — mínimo 0.75rem (12px).

✅ Soluções dos exercícios

Tenta sozinho primeiro.

1–4 (card responsivo com flex):

* { box-sizing: border-box; }
body { background: #F5F6F8; font-family: "Segoe UI", sans-serif; }

.card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  display: flex;
  gap: 16px;
  align-items: center;
}
.card img { width: 80px; border-radius: 50%; }

@media (max-width: 760px) {
  .card { flex-direction: column; text-align: center; }
}