CSS: dar cor e estilo ao CRM

Até agora o CRM era só “paredes”. Hoje vais vesti-lo: com uma linha de código ele ganha cores e arrumação, e depois vais pô-lo com as cores da tua empresa.

🎯 No fim desta aula vais conseguir

Ligar uma folha de estilos CSS a uma página HTML.
Ler e escrever regras CSS: seletor { propriedade: valor; }.
Distinguir os seletores de etiqueta, de classe (.) e de id (#).
Mudar as cores do CRM através das variáveis e dos códigos de cor #RRGGBB.
Usar as ferramentas de programador do browser para experimentar estilos ao vivo.

🧰 Antes de começar

Abre a pasta meu-crm no VS Code (File → Open Folder…).
Abre o index.html com o Live Server (botão direito → Open with Live Server).
Confirma que vês o menu, o formulário e a tabela de clientes da aula 2 (ainda a preto e branco).

😕 Faltaste à aula 2 ou o teu projeto não funciona? Descarrega o ponto de controlo da aula 2, descompacta-o e trabalha a partir dele (não te esqueças de voltar a pôr o nome da tua empresa).

Parte A — Ligar o CSS e perceber como funciona (≈ 35 min)

1 Ligar a folha de estilos

O CSS é a linguagem do aspeto: cores, letras, espaços, tamanhos. Se o HTML são as paredes da casa, o CSS é a pintura e a decoração.

O ficheiro style.css já está na tua pasta desde a aula 1, prontinho… mas o index.html ainda não sabe que ele existe! A etiqueta <link>, posta no <head>, diz ao browser: «para mostrar esta página, usa a folha de estilos style.css».

🤔 Prevê antes de gravar: o que achas que vai mudar no CRM quando acrescentares esta única linha? Escreve no caderno.

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

Grava (Ctrl+S) e olha para o browser.

✅ Deves ver: o CRM transformado! Um topo azul com o título a branco, o menu com aspeto de botão, o formulário arrumado em colunas dentro de uma caixa branca de cantos redondos e a tabela com linhas separadoras. E não mudaste nada no HTML: só disseste qual era a “roupa”.

😕 Não mudou nada

A linha tem de ficar no index.html, dentro do <head>, por baixo do comentário AULA 3: COLAR AQUI A LIGAÇÃO AO CSS (e não no style.css!).
Confirma que escreveste exatamente href="style.css" e rel="stylesheet" (melhor: volta a copiar com o botão).
Gravaste? Experimenta recarregar com Ctrl+F5.

2 Como se escreve CSS

O CSS é feito de regras. Cada regra diz a quem se aplica (o seletor) e, entre chavetas { }, o que muda (a propriedade) e como fica (o valor). Cada linha acaba com ;.

Há três tipos de seletor que vais ver muitas vezes:

Seletor	Escreve-se	Aplica-se a…	Exemplo no teu CRM
De etiqueta	o nome da etiqueta	todas as etiquetas desse tipo	`body { … }` → a página inteira
De classe	um ponto + o nome da classe	todos os elementos com aquele `class="…"`	`.cartao { … }` → os elementos com `class="cartao"`
De id	um cardinal `#` + o id	o único elemento com aquele `id="…"`	`#mensagem { … }` → o `<p id="mensagem">`

Também se podem combinar: .topo h1 quer dizer «os h1 que estão dentro de um elemento com a classe topo». E :hover quer dizer «quando o rato está por cima».

Abre o style.css no VS Code e desce devagar: está organizado em secções numeradas (1. VARIÁVEIS, 2. BASE, 3. TOPO E MENU…). O texto entre /* e */ são comentários, como os  do HTML. Não precisas de perceber tudo: hoje vamos mexer só no princípio e no fim.

Agora vais escrever as tuas primeiras regras. Vai ao fim do style.css e cola este bloco por baixo do último comentário:

/* Seletor { propriedade: valor; } */
.topo h1 {
  letter-spacing: 1px;
}

.slogan {
  font-style: italic;
}

.cartao:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.topo h1 → afasta um pouco as letras do título do topo (letter-spacing).
.slogan → põe o slogan em itálico (font-style: italic).
.cartao:hover → quando o rato passa por cima de uma caixa branca, aparece uma sombra (box-shadow).

✅ Deves ver: o slogan em itálico, as letras do título um pouco mais afastadas e, ao passar o rato por cima da caixa dos clientes, uma sombra mais forte à volta.

😕 Não funciona?

O código CSS apareceu escrito na página → colaste-o no index.html em vez do style.css. Apaga-o de lá e cola-o no fim do style.css.
Não muda nada → confirma que colaste no fim do ficheiro, depois da última }, e que gravaste.

Parte B — As cores da tua empresa (≈ 30 min)

3 As variáveis de cor

No início do style.css, dentro de :root { }, há uma lista de variáveis: nomes que começam por -- e guardam um valor, como --cor-principal: #2563eb;. Depois, em vários sítios do ficheiro, aparece var(--cor-principal), que quer dizer «usa aqui o valor da variável --cor-principal».

É como no Excel: se pões a taxa de IVA na célula B1 e todas as fórmulas usam B1, basta mudar B1 para mudar tudo. Aqui é igual: mudas a cor num sítio e ela muda no CRM inteiro.

🤔 Prevê: procura no style.css (Ctrl+F) onde aparece var(--cor-principal). Que partes do CRM achas que vão mudar de cor?

No style.css, dentro de :root, encontra esta linha:

Muda só o código de cor (o que está entre os : e o ;) para, por exemplo, um vermelho-framboesa, e grava:

✅ Deves ver: o topo do CRM fica vermelho. Clica dentro de uma caixa do formulário: o contorno também mudou de cor.

Como funcionam os códigos de cor `#RRGGBB`

No ecrã, cada cor é uma mistura de vermelho (R, de red), verde (G, green) e azul (B, blue). O código #RRGGBB tem dois carateres para cada uma, de 00 (nada) a ff (o máximo). Usa os algarismos de 0 a 9 e as letras de a a f (é o sistema hexadecimal).

Código	Mistura	Resultado
`#ff0000`	vermelho no máximo, sem verde, sem azul	vermelho
`#00ff00`	só verde	verde
`#0000ff`	só azul	azul
`#000000`	nada de nada	preto
`#ffffff`	tudo no máximo	branco
`#808080`	tudo a meio	cinzento

💡 Não precisas de inventar códigos de cabeça. No VS Code, ao lado de cada cor do style.css aparece um quadradinho colorido: passa o rato por cima dele e abre-se um seletor de cores onde escolhes a cor com o rato.

4 Experimentar ao vivo com as ferramentas de programador

Todos os browsers têm ferramentas de programador (em inglês, DevTools). Servem para ver o HTML e o CSS de qualquer página e experimentar mudanças ao vivo, sem estragar nada.

No CRM, clica com o botão direito em cima do título do topo e escolhe Inspecionar (ou carrega F12).
Abre-se um painel. À esquerda (separador Elementos / Elements) está o HTML da página, com o elemento que escolheste realçado. À direita (separador Estilos / Styles) estão as regras CSS que se aplicam a esse elemento.
No painel dos Elementos, clica na primeira linha, <html lang="pt-PT">. Nos Estilos aparece a regra :root com as variáveis.
Clica no quadradinho colorido ao lado de --cor-principal. Abre-se o seletor de cores: arrasta o círculo e vê o CRM a mudar enquanto mexes!
Experimenta também: clica num valor (por exemplo, 10px do --raio) e escreve outro; ou tira o visto da caixinha à esquerda de uma propriedade para a desligar.

⚠️ Atenção: o que mudas nas ferramentas de programador não fica gravado! Se carregares F5, volta tudo ao que está no style.css. Quando encontrares uma cor de que gostes, copia o código (por exemplo #0f766e) e escreve-o no style.css.

✅ Deves ver: o CRM a mudar de cor enquanto arrastas no seletor. Depois de F5, volta à cor que está escrita no style.css.

😕 Não encontro as variáveis / os separadores estão em inglês

As variáveis só aparecem nos Estilos quando o elemento <html> está escolhido (ou um elemento que as use, como o <header>: procura var(--cor-principal)).
Se o painel estiver em inglês: Elements = Elementos, Styles = Estilos, Console = Consola.
Se o painel abrir em baixo e for pequeno, arrasta a margem para o aumentar.

🔎 Investiga

Nas ferramentas de programador, escolhe a caixa branca dos clientes (<section id="clientes" class="cartao">) e desliga a propriedade border-radius. O que muda? E se desligares o padding?
No style.css, muda o valor de --raio para 0px e depois para 24px. Para que serve esta variável?
Na tua regra .cartao:hover, apaga o :hover (fica só .cartao). Qual é a diferença? Volta a pô-lo.
Na regra .slogan, acrescenta a linha color: yellow sem o ; e, por baixo, font-size: 30px;. O que acontece? E se puseres o ;? O que concluis sobre o ;?

✍️ Exercícios (fazem parte do teu projeto)

Estes exercícios não têm o código pronto: usa o que aprendeste hoje.

E1 · O tema da tua empresa

Põe o CRM com as cores da tua empresa inventada, mudando pelo menos 4 variáveis do :root, entre elas a --cor-principal e a --cor-principal-escura. Pensa no teu setor: um ginásio pode ser verde ou laranja, uma clínica azul-clara, um restaurante cor de vinho…

💡 Dica: experimenta primeiro nas ferramentas de programador e só depois escreve os códigos no style.css. A --cor-principal-escura deve ser uma versão mais escura da principal. Confirma que o texto branco do topo se lê bem por cima da cor principal, e que o texto (--cor-texto) se lê bem por cima do fundo (--cor-fundo).

E2 · Uma letra do Google Fonts

Muda o tipo de letra do CRM para uma letra do Google Fonts (um catálogo gratuito de letras para sites).

💡 Dica: escolhe uma letra, carrega em Get font e depois em Get embed code. O Google dá-te umas linhas <link>: essas vão para o <head> do index.html (por cima da ligação ao style.css). Depois, no style.css, há uma variável que diz qual é a letra do CRM: muda o valor dela para o nome da letra, entre aspas, por exemplo "Poppins", sans-serif. Só funciona com Internet.

⭐ Desafio · Topo em gradiente

Faz com que o fundo do topo do CRM seja um gradiente: uma cor que se transforma suavemente noutra (por exemplo, da cor principal para a cor principal escura).

💡 Dica: no fim do style.css, escreve uma regra para o topo (qual é a classe do <header>?) com a propriedade background. O valor é uma função chamada linear-gradient: pesquisa como se usa (por exemplo, no site da MDN). Podes usar as tuas variáveis lá dentro: var(--cor-principal).

📦 O que mostrar ao professor

O index.html está ligado ao style.css: o CRM tem cores e o formulário está arrumado.
As minhas regras estão no fim do style.css (slogan em itálico, sombra ao passar o rato).
Sei explicar uma regra CSS (seletor, propriedade, valor) e a diferença entre .classe e #id.
Sei mudar uma cor ao vivo nas ferramentas de programador.
E1: o CRM tem as cores da minha empresa (pelo menos 4 variáveis mudadas).
E2: o CRM usa uma letra do Google Fonts.

⏱️ Se sobrar tempo

Faz o desafio ⭐.
Escreve uma regra para pôr o nome da empresa do título (o <span class="empresa">) com outra cor. Que seletor deves usar?
Liga também o style.css ao teu ola.html. O que muda? Porquê só algumas coisas?
Nas ferramentas de programador, carrega Ctrl+Shift+M para ver o CRM como num telemóvel. O formulário muda de forma?

🤖 Pedir ajuda à IA (opcional)

Não tens jeito para combinar cores? Podes pedir ideias a uma IA gratuita. Copia este pedido, troca o texto entre [ ] e cola-o na IA:

📖 Palavras novas

CSS: Linguagem que define o aspeto de uma página: cores, letras, espaços, tamanhos.
Folha de estilos: Ficheiro .css com as regras de aspeto, ligado ao HTML com <link rel="stylesheet">.
Regra: Seletor + chavetas com propriedades e valores: .slogan { font-style: italic; }.
Seletor: Diz a que elementos se aplica a regra: h1, .classe, #id.
Propriedade e valor: O que muda (color) e como fica (orange).
Variável CSS: Nome começado por -- que guarda um valor, usado com var(--nome).
Hexadecimal (#RRGGBB): Forma de escrever uma cor com as quantidades de vermelho, verde e azul.
:hover: Aplica a regra só quando o rato está por cima do elemento.
Ferramentas de programador (DevTools): Painel do browser (F12) para inspecionar e experimentar o HTML e o CSS ao vivo.
Gradiente: Passagem suave de uma cor para outra.