Olá, bem-vindo de volta ao Aprenda enquanto codifica: HTML e CSS! Hoje, estamos mergulhando mais fundo no mundo do estilo. Até agora, estilizamos os elementos diretamente. Mas e se você tiver dois elementos

e quiser que cada um tenha uma aparência diferente? Insira os seletores CSS!

Seletores de elementos

Você já está familiarizado com eles, mas vamos recapitular:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

Este conjunto de regras tem como alvo todos os elementos

, definindo seu tamanho, família e peso da fonte. Os seletores de elementos são ótimos para traços amplos, como definir um guia de estilo para toda a página. Mas sejamos realistas, nem todas as tags

devem ser iguais. Para um estilo mais específico, precisamos melhorar nosso jogo!

Seletores de Classe

Aulas para o resgate! Quer que duas tags

tenham uma aparência diferente? Adicionar aulas:

This text is BIG and red.
This text is small and blue.

Cada tag

possui duas classes. Em seu CSS, direcione essas classes com um .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

Bum! Estilos aplicados. Você pode perguntar: “Por que não combinar estilos em menos classes?” Boa pergunta! Gosto de manter as aulas flexíveis. Você nunca sabe quando pode querer reutilizar pequenos sem azul.

Seletores de ID

Para elementos exclusivos, use IDs. Confira isso:

My Name is Nolan!

Use IDs com moderação, apenas uma vez por página. Direcione-os em CSS com #:

#name {
  text-decoration: underline;
}

Simples, certo?

Estilos conflitantes

Agora, e se um elemento tiver uma classe e um ID? Assim:

Will I be red or blue?

Vai ser vermelho! Por que? Porque os IDs são mais específicos que as classes. Aqui está um exemplo rápido:

I’m styled by three rulesets!

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

O texto fica vermelho e sublinhado, com tamanho de fonte de 12px. Os IDs superam as classes, que por sua vez substituem os seletores de elementos. Essa cascata de estilos faz com que sua página pareça elegante sem código repetido.

Desafio

É hora de aumentar o nível da sua página Sobre mim! Esta é sua missão:

• Defina estilos padrão para

  ,

  e

  usando seletores de elemento.

• Adicione um slogan abaixo do seu nome com uma tag

  e estilize-o usando um ID.

• Aprimore outro texto usando seletores de classe.

Brinque com estilos conflitantes e veja quais regras vencem. Você consegue descobrir por quê?

Obrigado pela leitura! Deixe-me saber se há algum outro tópico que você gostaria que eu explorasse nesta série nos comentários, ou apenas deixe-me saber se você está gostando da série!