Diferença entre class e id

Este tutorial está obsoleto. Veja o novo:
Introdução ao CSS – Seletores [ricardoveloso.com.br]

Em HTML e CSS, há a possibilidade de aplicar estilos através de classes e ids e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre class e id?

O que são classes?

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a vários elementos de uma vez, em páginas HTML. Exemplo:

Código CSS:

.classe1 {
  color: red;
  text-transform: uppercase;
}

.classe2 {
  color: green;
  text-transform: lowercase;
}

Código HTML:

<p class="classe1">Texto 1; classe 1.</p>
<p class="classe1">Texto 2; classe 1.</p>
<p class="classe2">Texto 3; classe 2.</p>
<p class="classe2">Texto 4; classe 2.</p>

Resultado:

Texto 1; classe 1.

Texto 2; classe 1.

Texto 3; classe 2.

Texto 4; classe 2.

O que são ids?

As ids são uma forma de identificar um elemento, e devem ser únicas para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial, em páginas HTML. Exemplo:

Código CSS:

#id1 {
  color: red;
  text-transform: uppercase;
}

#id2 {
  color: green;
  text-transform: lowercase;
}

#id3 {
  color: blue;
  text-decoration: underline;
}

#id4 {
  color: black;
  text-decoration: overline;
}

Código HTML:

<p id="id1">Texto 1; id1.</p>
<p id="id2">Texto 2; id2.</p>
<p id="id3">Texto 3; id3.</p>
<p id="id4">Texto 4; id4.</p>

Resultado:

Texto 1; id1.

Texto 2; id2.

Texto 3; id3.

Texto 4; id4.

Se não tiver ficado clara a diferença, você pode perguntar, usando o formulário de comentários abaixo.

Postagens relacionadas

• Como incluir e aplicar CSS em uma página