Conecte o CSS e entenda seletores e cascata

CSS é a linguagem que descreve a apresentação de um documento. Nesta aula, você vai ligar um arquivo CSS ao HTML, mudar o visual por meio de seletores e entender por que uma regra vence quando duas tentam alterar a mesma coisa.

O termo técnico seletor indica quais elementos receberão uma regra. Pense na etiqueta de uma caixa de correspondência: “todos os moradores” alcança mais pessoas, enquanto “apartamento 32” aponta para um grupo específico. No CSS, o seletor p alcança todos os parágrafos e .aviso alcança os elementos que têm essa classe. A analogia termina aí: o navegador não entrega mensagens; ele compara seletores com a árvore HTML e aplica declarações às correspondências.

Conecte uma folha externa

Crie index.html e, dentro de head, conecte styles.css:

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

O atributo rel="stylesheet" informa a relação entre os arquivos. href guarda o caminho. Se ambos estiverem na mesma pasta, o nome basta. No arquivo styles.css, escreva:

body {
  font-family: Arial, sans-serif;
  background: #f8fafc;
}

h1 {
  color: #1e3a8a;
}

.aviso {
  padding: 16px;
  background: #dbeafe;
}

Cada regra tem um seletor e um bloco de declarações. Em color: #1e3a8a, color é a propriedade e #1e3a8a é o valor. Se o título não mudar, confira o caminho, o nome do arquivo e se a tag link está dentro de head. Essa verificação separa um erro de conexão de um erro na regra.

Use classes para expressar um papel

Um seletor de tipo como h1 é útil quando todos os elementos daquele tipo devem compartilhar a apresentação. Uma classe começa com ponto no CSS e aparece sem ponto no atributo HTML:

<p class="aviso">Prazo de inscrição: sexta-feira.</p>

.aviso {
  border-left: 4px solid #2563eb;
}

Prefira nomes que indiquem o papel, como aviso ou botao-principal, em vez de nomes presos ao visual, como texto-azul. Assim, a classe continua fazendo sentido se a identidade visual mudar.

A cascata é uma decisão, não um acaso

Cascata é o algoritmo usado para resolver declarações concorrentes. Ele considera origem, importância, especificidade e ordem. Para começar, observe um caso controlado:

.aviso { color: navy; }
.aviso { color: darkred; }

Os seletores têm a mesma especificidade. Como a segunda declaração aparece depois, o texto fica vermelho-escuro. Agora compare p com .aviso: uma classe é mais específica que um seletor de tipo, então pode vencer mesmo aparecendo antes. Isso não significa que classes sempre vencem tudo; é apenas o conflito que estamos isolando.

Herança é outro mecanismo relacionado: algumas propriedades, como color, podem passar do elemento pai para os descendentes. Uma regra aplicada diretamente ao filho ainda pode substituir o valor herdado. Nas ferramentas do navegador, procure a indicação de onde cada valor veio; isso evita confundir herança com empate entre dois seletores.

No laboratório, remova e recoloque destaque pelo botão. Abra também as ferramentas do navegador e inspecione o parágrafo: a declaração riscada perdeu o conflito. Sua microprática é trocar a ordem das regras, prever o resultado antes de executar e só então confirmar. Quando previsão e tela concordam, você não está decorando CSS; está lendo a cascata.

Na próxima aula, vamos usar essa base para trabalhar cores, tipografia e unidades sem misturar escolha visual com medida técnica.