O que é CSS? Seletores e regras — CSS: aplicar estilo

CSS: onde a web fica bonita

Você já tem o esqueleto (HTML). Agora é hora de vesti-lo. O CSS (Cascading Style Sheets) é o design: cores, tamanhos, espaçamento, posição. E o melhor: tudo que você escreve aparece na hora na pré-visualização. É escrito em regras.

Anatomia de uma regra

h1 {
  color: red;
  font-size: 32px;
}

h1 é o seletor: quais elementos a regra mira.
Entre as chaves ficam as declarações, em pares propriedade: valor;.

Tipos de seletor

p            { }   /* por tag: todos os elementos <p> */
.aviso       { }   /* por classe: elementos com class="aviso" */
#cabecalho   { }   /* por id: o elemento com id="cabecalho" */

As classes (.) são as queridinhas: são reutilizadas em muitos elementos. ⚠️ Pegadinha clássica: esquecer o ponto em .aviso ou a cerquilha em #cabecalho. Sem esse símbolo, o seletor aponta para outra coisa (ou para nada).

Nestes exercícios você escreve o CSS e vê o HTML estilizado na pré-visualização. Muda uma cor e pumba, muda na tela.