Selecionando Elementos de Forma Simples

Para aplicar estilos, é necessário informar ao CSS quais elementos HTML devem ser alvo. Isso é feito utilizando seletores. Neste capítulo, o foco está nos três seletores mais importantes: o seletor de tag, o seletor de classe e o seletor de id.

Seletor de Tag

Um seletor de tag seleciona todos os elementos de uma tag HTML específica.
Exemplo de HTML:

<p>It was all in my head.</p>

Exemplo de CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Esta regra se aplica a todo elemento <p> na página.

Utilize seletores de tag quando desejar uma estilização consistente para todos os elementos desse tipo.

Seletor de Classe

Um seletor de classe seleciona elementos que compartilham o mesmo nome de classe.
HTML:

<p class="text">This song is another hit.</p>

No CSS, referencie o nome da classe com um ponto (.) para definir os estilos:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Apenas elementos com class="text" recebem esses estilos.

Seletores de classe são o tipo de seletor mais utilizado em projetos reais, pois permitem uma estilização flexível e reutilizável.

Múltiplas Classes

Um elemento pode ter mais de uma classe.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Se um elemento possui ambas as classes, ele recebe estilos de ambos os seletores.

Isso torna a estilização baseada em classes poderosa.

O elemento <p> com as classes text e font recebe estilos de ambos os seletores. A classe text define a cor como navy, e a classe font define o tamanho da fonte como 24px.

Seletor de ID

Um seletor de ID direciona um elemento único.

No HTML, adicione um atributo id a um elemento:

<p id="title">Choose from different themes.</p>

No CSS, referencie o ID com uma hashtag (#) para definir os estilos:

#title {
  font-weight: 500;
  font-size: 20px;
}

IDs devem ser únicos em uma página.

Embora IDs possam ser usados para estilização, classes geralmente são preferidas por consistência e reutilização.