Seletores Básicos de CSS
Neste artigo, vamos explorar os seletores básicos de CSS, incluindo seletor de tipo (tag), seletor de classe (.classe), seletor de ID (#id), e seletores universais (*). Aprenda como usar esses seletores para estilizar suas páginas web com exemplos práticos e fáceis de entender.
Introdução
Seletores são uma parte essencial do CSS, permitindo que você aplique estilos a elementos específicos em suas páginas web. Existem vários tipos de seletores, mas vamos focar nos básicos, que são os mais comuns e úteis para iniciantes.
Seletor de Tipo (Tag)
O seletor de tipo, também conhecido como seletor de tag, aplica estilos a todos os elementos de um tipo específico. Por exemplo, você pode estilizar todos os parágrafos <p> ou cabeçalhos <h1> de uma só vez.
Exemplo:
p {
color: #333;
line-height: 1.5;
}
Neste exemplo, todos os parágrafos terão a cor do texto definida para #333 e a altura da linha definida para 1.5.
Seletor de Classe
O seletor de classe permite que você aplique estilos a elementos específicos que possuem uma classe atribuída. Você define uma classe no HTML usando o atributo class e a referência no CSS com um ponto (.).
Exemplo:
HTML:
<p class="highlight">Este parágrafo será destacado.</p>
CSS:
.highlight {
background-color: yellow;
font-weight: bold;
}
Aqui, qualquer elemento com a classe highlight terá um fundo amarelo e texto em negrito.
Seletor de ID
O seletor de ID é usado para estilizar um único elemento único com um ID específico. IDs são definidos no HTML usando o atributo id e referenciados no CSS com um símbolo de hash (#).
Exemplo:
HTML:
<p id="intro">Este parágrafo é uma introdução.</p>
CSS:
#intro {
font-size: 20px;
color: blue;
}
Neste exemplo, apenas o parágrafo com o ID intro terá um tamanho de fonte de 20px e cor azul.
Seletor Universal
O seletor universal aplica estilos a todos os elementos de uma página. Ele é representado por um asterisco (*).
Exemplo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Aqui, todos os elementos terão margens e preenchimentos zerados e a propriedade box-sizing definida como border-box.
Conclusão
Entender e usar seletores básicos de CSS é fundamental para aplicar estilos eficazes e organizados em suas páginas web. Seletor de tipo, classe, ID e universal são ferramentas poderosas que permitem controlar a aparência dos elementos de maneira precisa e flexível.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com o WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
