HTML e CSS com JSF e facelets

Basicamente podemos dizer que id é a identificação do elemento, quando você coloca uma id na div você está identificando e “unificando-a”, você só pode ter um id por página.
Uma utilização boa de id em div é quando você cria div de posicionamento, por exemplo: topo.
Então você coloca o id topo na div, isso quer dizer que não vai poder ter outro elemento chamado topo, ou seja, isso é muito bom para demarcar sua página.
Você pode colocar id em vários elementos que existem na página, depois pode acessá-los via javascript.

A classe em CSS define um “grupo”, uma caracteristica que você define.
Por exemplo, você cria uma classe com esse código:

.titulo {
  color: #333333;
  font-size: 18px;
}

Agora, sempre que você quiser usar algum elemento que usa texto, você já pode usar a classe “titulo” que você criou. O elemento vai ter essa formatação.
Basicamente, a classe é um conjunto de caracteristica, você define, dá um nome e depois pode usar em diversos elementos.
Diferente do id, você pode ter mais de uma classe na mesma página.

Dica: Sempre que tiver trabalhando com CSS, procure não escrever códigos inline, crie classes e aplique-as em seus elementos.

Excelente resposta do colega charlesbraw.

Para contribuir mais um pouco, comparando com programação orientação a objetos (POO), é como se o ID fosse único para cada DIV, assim como é único para cada objeto.

Já a class é um conjunto de características que são compartilhadas por todas as DIV’s, assim como com todos os objetos instanciados da mesma classe.

Até +!

Entendi,
O conceito é bem simples e explicado desta forma ficou melhor ainda.

Valeu mesmo galera!

Blz Danilo, se tiver finalizado, coloca um [RESOLVIDO] antes do assunto editando o primeiro post!

Até +!