DevTools: Inspecionar e Testar Estilos ao Vivo

Você pode editar o CSS de qualquer página na internet e ver o resultado na hora, sem salvar nada, sem recarregar, sem medo de quebrar. Isso é o que as DevTools (ferramentas de desenvolvedor) do navegador fazem. E, sem exagero, é a ferramenta nº 1 de quem mexe com CSS.

Como abrir

Chrome / Edge / Firefox / Safari: F12 ou Ctrl+Shift+I (Windows/ Linux) / Cmd+Option+I (Mac). Ou clique direito em qualquer elemento → "Inspecionar".
Safari vem com DevTools desabilitado por padrão. Ative em Preferências → Avançado → "Mostrar menu Desenvolvedor".

O painel "Elements" / "Elements"

Você vai ver o HTML da página à esquerda e o CSS do elemento selecionado à direita. Clicar num elemento do HTML mostra as regras aplicadas a ele.

A parte direita tem:

Styles: todas as regras CSS que se aplicam àquele elemento, na ordem de cascata. Regras riscadas são sobrescritas por outra mais específica ou posterior.
Computed: o valor final de cada propriedade depois de cascata, herança e defaults. Se você escreveu font-size: 1.5rem e o root é 16px, o Computed mostra 24px. Esse painel é a verdade absoluta - é o que o navegador realmente está usando.
Box Model: a representação visual do box model (content, padding, border, margin) com os valores exatos em pixels.

Editando ao vivo

Você pode:

Clicar num valor de qualquer propriedade e digitar outro. A página atualiza na hora.
Marcar/desmarcar uma regra (checkbox do lado da regra) para desativar temporariamente.
Adicionar uma propriedade nova clicando no espaço em branco.
Adicionar color: red como teste e ver o efeito.

Isso não altera o arquivo original. Recarregou a página, perdeu. Por isso, use para experimentar e depurar. Quando achar o valor certo, copia pro seu arquivo CSS de verdade.

"Por que essa regra não está pegando?"

A pergunta mais comum de quem está começando. A resposta está quase sempre no painel Styles:

A regra aparece riscada? Outra mais específica (ou posterior) está ganhando. Veja a regra que não está riscada.
A regra simplesmente não aparece? O seletor não está batendo naquele elemento. Pode ser erro de digitação, classe faltando, tag errada, especificidade baixa.
A regra está lá, sem risco, mas o efeito não acontece? A propriedade pode estar sendo sobrescrita inline (no atributo style="...") - inline ganha de quase tudo. Ou pode ser !important em outro lugar.

Outros painéis úteis

Console: erros de CSS, JavaScript, requisições falhando. Abra sempre que algo "não funciona" sem explicação.
Network: vê o que está sendo baixado. Útil pra ver se o CSS carregou, e quanto tempo levou.
Responsive Design Mode (Firefox) / Device Toolbar (Chrome): simula celular, tablet, desktop. Muda tamanho, vê media queries atuando.
DevTools é o bisturi do CSS - abre com F12 ou "Inspecionar".
Styles mostra as regras e cascata. Computed mostra o valor final aplicado.
Editar ao vivo é o melhor lugar para testar - sem medo, sem risco, recarregou e volta.
Quando algo "não funciona", começa pela pergunta "qual regra está ganhando?".

Dica: acostume-se a usar DevTools todo dia. É a diferença entre quem fica chutando valores no escuro e quem sabe exatamente o que está acontecendo. A trilha toda vale ainda mais se você abrir o navegador enquanto lê e fuçar em cada propriedade.

Você fechou o nível iniciante. Sabe o que é CSS, como incluir, como selecionar elementos, como colorir, tipografia, box model, display, unidades, pseudo-classes e como investigar. Daqui pra frente é refinar. No próximo tópico, CSS Intermediário: regras de quem ganha, layouts de verdade e responsividade.