Atributo class

O atributo class define uma ou mais classes para um elemento (por elemento entende-se a tag).

Isso é feito para posteriormente referenciar via CSS um grupo de elementos que possuem a mesma classe definida e aplicar a eles propriedades específicas (por exemplo, alterar a cor do texto, o tamanho da fonte e assim por diante).

Também existe o atributo id, que, assim como o atributo class, permite selecionar elementos em uma página HTML.

A diferença entre o atributo class e o atributo id é que o class seleciona um grupo de elementos (mesmo que seja atribuído a um único elemento - posteriormente ele pode ser atribuído a outro), enquanto o id seleciona um elemento único (não deve haver outro elemento com o mesmo id na página do site, caso contrário haverá conflito).

Como decidir o que dar a um elemento - classe ou id? A classe é dada aos elementos que se repetem nas páginas do site (para não escrever o mesmo código CSS várias vezes). Mesmo que atualmente este elemento seja único, mas você acha que elementos semelhantes podem aparecer no futuro - dê a este elemento uma classe. Se você tem certeza de que o elemento é único - então dê a ele um id. Embora atualmente haja uma tendência de dar classe a todos os elementos, e reservar o id para JavaScript, ela não é universalmente aceita.

É possível definir várias classes para um elemento; neste caso, elas devem ser listadas separadas por espaço.

Os nomes das classes devem ser compostos por letras inglesas, números, sem espaços (o espaço separa as classes umas das outras; em seu lugar, pode-se usar sublinhado ou hífen). As classes não devem começar com um número (no HTML5 já é permitido, mas não funcionará em navegadores antigos).

Os nomes das classes devem ser dados em inglês (e não em russo, simplesmente com letras inglesas!). Os nomes devem ser significativos, refletindo a essência da classe.

Exemplo

Vamos definir a cor do texto como vermelho para todos os parágrafos com a classe test:

<p class="test">Parágrafo com a classe test.</p>
<p>Parágrafo de controle sem classe.</p>

.test {
	color: red;
}

Exemplo . Várias classes para um elemento

Aqui, vamos definir várias classes para o primeiro parágrafo - test1 e test2 (listando-as separadas por espaço). A classe test1 define a cor do texto como vermelho, e a classe test2 define o tamanho da fonte como 20px. Ao segundo parágrafo foi dada apenas a classe test1 (este parágrafo ficará vermelho), e ao terceiro parágrafo - a classe test2 (este parágrafo terá o tamanho de fonte de 20px). O primeiro parágrafo, que possui duas classes, terá simultaneamente a cor vermelha e o tamanho de fonte de 20px:

<p class="test1 test2">Parágrafo com duas classes: test1 e test2.</p>
<p class="test1">Parágrafo com a classe test1.</p>
<p class="test2">Parágrafo com a classe test2.</p>
<p>Parágrafo de controle sem classes.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Veja também

o atributo id,
que define identificadores únicos para elementos