O seletor de classe é um dos recursos mais utilizados no CSS para aplicar estilos a elementos HTML.
Ele permite criar regras que podem ser reutilizadas em diversos elementos da página.
Uma classe é um identificador criado pelo desenvolvedor para agrupar elementos que possuem características semelhantes.
.nome-classe {
propriedade: valor;
}
.titulo {
color: blue;
font-size: 30px;
}
O ponto indica que estamos criando um seletor de classe.
<h1 class="titulo">
Curso Web
</h1>
O atributo class conecta o HTML ao CSS.
CSS
.card {
background:#f2f2f2;
padding:20px;
}
HTML
<div class="card">
Conteúdo
</div>
A mesma classe pode ser utilizada em vários elementos.
<p class="texto">
Primeiro texto
</p>
<p class="texto">
Segundo texto
</p>
.texto {
color:#333;
}
<h1 class="destaque">
Título
</h1>
<p class="destaque">
Texto
</p>
Uma classe pode ser aplicada em diferentes tags HTML.
Um elemento pode possuir mais de uma classe.
<button
class="botao principal">
Enviar
</button>
.botao {
padding:10px;
}
.principal {
background:blue;
}
Os nomes das classes devem representar sua função.
| Evitar | Melhor |
|---|---|
| .vermelho | .erro-validacao |
| .caixa1 | .card-produto |
| .grande | .titulo-principal |
| Classe | ID |
|---|---|
| Pode repetir. | Único na página. |
| Usada para estilos. | Usado para elementos específicos. |
| Prioridade menor. | Prioridade maior. |
Este texto utiliza uma classe CSS.
| Erro | Problema |
|---|---|
| Esquecer o ponto | Classe não funciona. |
| Nome com espaço | Cria classes diferentes. |
| Classe sem significado | Dificulta manutenção. |
| Elemento | Descrição |
|---|---|
| . | Define uma classe CSS. |
| class | Relaciona HTML e CSS. |
| Reutilização | Evita repetição de código. |