HTML/CSS - Class x ID

Se você tem dúvidas de quando usar a tag class e a tag ID, você verá as principais diferenças e utilização de cada uma com exemplos e definições.

Class

Com a tag class você pode definir diferentes estilos para o mesmo tipo de elemento HTML.

Exemplo:

Digamos que você gostaria de ter dois tipos de parágrafos na sua página: Um parágrafo alinhado a direita, e outro alinhado ao centro.

Aqui está como você pode fazer isso com CSS:

p.right {text-align: right}

p.center {text-align: center}

Você tem que usar o atributo class na sua página HTML:

Obs: Para aplicar mais de uma class por elemento, use a seguinte sintaxe:

O parágrafo acima será estilizado pela class "center" e a class "bold".

Você também pode omitir o nome da tag para definir um estilo que será usado por todos elementos HTML que possuirem esta class.

No exemplo abaixo, todos elementos HTML com class="center" será alinhado ao centro.

.center {text-align: center}

No código abaixo, ambos os elementos h1 e p tem a class="center". Isso significa que ambos elementos seguirão as regras so seletor ".center".

Id

Você também pode definir estilos para elementos HTML usando o seletor Id. O seletor Id é definido com um "#" (famoso jogo da velha).

Obs: O atributo Id somente terá um único valor para uma página HTML.

A regra de estilo abaixo irá trocar o elemento que possui um atributo Id com o valor de "green":

#green {color: green}

A regra de estilo abaixo irá trocar o elemento p que tem um Id com o valor de "para1":

RESUMINDO

Usamos a tag class quando:

O estilo é usado em vários locais através da página.

O estilo é bem genérico.

Usamos a tag id quando:

O estilo é usado apenas uma vez na página.

O estilo é específico para uma certa área da página.