Atributo Class
O atributo class define uma ou mais classes para um elemento HTML. Uma classe é uma maneira de identificar um grupo de elementos.
Nota
Assim como os IDs, as classes também seguem algumas convenções de nomenclatura.
- Apenas letras minúsculas
- Não pode ter caracteres especiais, acentuações e espaços
- Palavras compostas devem ser separados por hífen (por exemplo
elemento-1)
Por exemplo, suponha que você deseja alterar o fundo para vermelho de todos os elementos que contenham a classe red-background.
<!DOCTYPE html>
<html>
<head>
<style>
.red-background {
background: red;
}
</style>
</head>
<body>
<h1 id="my-header" class="red-background">Hello World</h1>
<p class="red-background">This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>O atributo class é útil quando é preciso modificar o estilo de um elemento e esses estilos também serão utilizados para outros elementos, sem necessariamente modificar os estilos de forma global, aplicando a todos.
Observação
No CSS existe um conceito de especificidade ao aplicar os estilos em elementos no documento. No caso dos IDs, eles possuem a prioridade mais alta ao aplicar um estilo, ou seja, a única forma de sobrescrever o estilo é com a flag
!important. Em seguida vem as classes e tags.
#my-header {
background: blue
}
.red-background {
background: red !important
}No exemplo acima, o elemento <h1> terá como cor de fundo azul pelo fato de o ID ter a maior prioridade em cima da classe.