Seletor de Tipo (Elemento): Estilizando todos os 'iguais'

Você já sabe que o CSS usa seletores para encontrar os elementos HTML que precisam ser estilizados. O seletor de tipo, também conhecido como seletor de elemento, é o mais básico e direto de todos.

Pense nele como um comando que diz: "Encontre todos os elementos que são do mesmo tipo e aplique este estilo a eles."

Como funciona o Seletor de Tipo

O seletor de tipo simplesmente usa o nome da tag HTML como seletor.

Sintaxe:

nome-da-tag-html {
  propriedade: valor;
}

Exemplos:

Se você tem um HTML como este:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Seletor de Tipo</title>
</head>
<body>
  <h1>Meu Título Principal</h1>
  <p>Este é o primeiro parágrafo.</p>
  <p>Este é o segundo parágrafo.</p>
  <h2>Um Subtítulo</h2>
  <p>E este é o terceiro parágrafo.</p>
</body>
</html>

E você quer que todos os parágrafos (<p>) tenham a cor azul, você usaria o seletor de tipo p:

p {
  color: blue;
}

Resultado: Todos os três parágrafos (Este é o primeiro parágrafo., Este é o segundo parágrafo., E este é o terceiro parágrafo.) ficarão com o texto azul.

Se você quiser que todos os títulos de nível 1 (<h1>) tenham a cor vermelha e estejam centralizados, você usaria o seletor de tipo h1:

h1 {
  color: red;
  text-align: center;
}

Resultado: O título Meu Título Principal ficará vermelho e centralizado.

Selecionando Múltiplos Tipos de Elementos

E se você quiser aplicar o mesmo estilo a diferentes tipos de elementos ao mesmo tempo? Por exemplo, você quer que todos os títulos (<h1>, <h2>) e todos os parágrafos (<p>) tenham uma fonte específica.

Você pode fazer isso separando os seletores com uma vírgula (,).

Sintaxe:

seletor1, seletor2, seletor3 {
  propriedade: valor;
}

Exemplo:

h1, h2, p {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Resultado: Todos os <h1>, <h2> e <p> da sua página usarão a fonte 'Segoe UI' (ou uma das alternativas, caso a primeira não esteja disponível).

Quando usar o Seletor de Tipo?

O seletor de tipo é ideal quando você quer aplicar um estilo geral a todos os elementos de um determinado tipo em sua página.

• Estilos padrão para o corpo da página: body { font-family: Arial; line-height: 1.6; }
• Estilos padrão para todos os links: a { text-decoration: none; color: #007bff; }
• Estilos padrão para todos os títulos: h1, h2, h3 { margin-bottom: 10px; }
• Estilos padrão para todas as imagens: img { max-width: 100%; height: auto; }

Vantagens:

• Simplicidade: É muito fácil de escrever e entender.
• Eficiência: Aplica estilos a muitos elementos com uma única regra.
• Consistência: Garante que todos os elementos do mesmo tipo tenham uma aparência uniforme.

Desvantagens:

• Pouca especificidade: Se você precisar estilizar apenas alguns parágrafos de forma diferente, o seletor de tipo não será suficiente. Ele estiliza todos os parágrafos. Para isso, precisaremos de seletores mais específicos, que veremos nas próximas lições.

O seletor de tipo é a base para começar a estilizar suas páginas. Ele é perfeito para definir os estilos "padrão" ou "globais" para os elementos HTML, garantindo uma base consistente para o seu design.