Ando agora a aprender CSS e surgiu-me uma dúvida. Qual a diferença entre uma classe e um ID?

Isto é, qual a diferença entre os dois "bocados" de código seguintes?

.menu
{
font-family: arial
}

[...]

<div class="menu">código</div>

e

#menu
{
font-family: arial
}

[...]

<div id="menu">código</div>

E já agora, vejo muitos selectores como "div#menu" ou "p.centro". Assim, o ID e a classe só podem ser utilizados com a tag div e p respectivamente, certo?

uma class pode ser usada em muitas coisas como <table class=.... ou <font... ou <p ou <span ou <div... etc etc etc... NO exemplo, tens p.centro, ou seja, podes ter mais variações do p.
exemplo
p { font-size: 13px }

p.big { font-size: 25px }

p.small { font-size: 6px }

ou seja, podes definir as tuas caracteriesticas diferentes para o p., a vantagem principal é a organização de código. Mas podes ver mais informações em:

http://www.w3schools.com/css/css_pseudo_elements.asp
http://www.tizag.com/cssT/cssid.php (selector, class & id)

Um abraço.

Com class, podes usar a mesma classe nas vários tags que bem te apetecer, com id só podes usar numa, pois o id é único.

abraços, HecKel

Sim, estou a perceber. Mas na prática, quando são utilizados os IDs? Parece-me ser mais fácil utilizar só classes.
E em relação à minha segunda pergunta? :P

A tua segunda pergunta foi respondida implicitamente tanto por mim como pelo msdevweb (http://www.techzonept.com/member.php?u=49811), podes usar em todas as tags.

Sobre o ID e a class..., é pá, depende sempre de muita coisa. Se tens muitas divs e sabes que vão ter todas o mesmo aspecto, usa classes (IDs não dá mesmo), se queres garantir unicidade então IDs é o mais adequado, apesar de também dar com class..., mas assim podes enganar-te e repetires o que não queres que seja repetido (entre outras coisas).

abraços, HecKel

http://www.tizag.com/cssT/cssid.php
Answer: Classes vs Id's:
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

Vou dar-te um exemplo, queres separer o estilo da tua pagina em 3styles.
Tipo, main_style.
div#main_style_topo { background-color: blue; ... }
div#main_style_meio { text-transform: lowercase; ... }
div#main_style_fundo {text-transform: uppercase; font-size: 6px; }

Alem de atribuires, e saberes que essas são os estilos fixos para o style das devidas secções, acabas também por ao olhares para o código e veres as div's que imediatamente identificam as diferentes secções da pagina. Uma mais facil localização e identificação.

Eu pessoalmente não uso ID's.
Mas vê um exemplo, que em alguns casos pode simplificar:
a pagina: http://www.tizag.com/cssT/liveExampleCss
e o css: http://www.tizag.com/cssT/liveExampleCss/1style.css
:]

Um abraço.

A tua segunda pergunta foi respondida implicitamente tanto por mim como pelo msdevweb (http://www.techzonept.com/member.php?u=49811), podes usar em todas as tags.
Acho que vocês não perceberam o que eu quis dizer. :P Se eu tiver um selector "p.center" só posso atribuir a classe "center" à tag <p>, ou não? Se não, porque se põe "p.center" e não só ".center"?

msdevweb, na página que me indicaste, o bloco de código seguinte só afecta as tags <h3> dentro das tags <div> com ID "content", certo?

div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
padding: 2px;
border-bottom: 1px solid black;
}

Posso atribuir um ID e uma classe a uma tag, não posso? Por exemplo:

<div id="menu" class="esquerdo">...</div>

Se fazes p.center, é somente para a tag <p>, se fizeres apenas .center é para qualquer tag.

Sobre o ID e a classe numa tag sinceramente não sei responder a isso..., mas provavelmente vais ter conflitos :S

abraços, HecKel

Sobre o ID e a classe numa tag sinceramente não sei responder a isso..., mas provavelmente vais ter conflitos :S
Nope, pelo menos em XHTML é válido.
Em css definia-se, para um div, div.foo#bar ou div#foo.bar como desse mais jeito.

Acho que vocês não perceberam o que eu quis dizer. :P Se eu tiver um selector "p.center" só posso atribuir a classe "center" à tag <p>, ou não? Se não, porque se põe "p.center" e não só ".center"?

msdevweb, na página que me indicaste, o bloco de código seguinte só afecta as tags <h3> dentro das tags <div> com ID "content", certo?

div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
padding: 2px;
border-bottom: 1px solid black;
}

Posso atribuir um ID e uma classe a uma tag, não posso? Por exemplo:

<div id="menu" class="esquerdo">...</div>

Por passos, quanto ao p.center só o "deves" atribuir à tag <p>. Não se costuma usar só .center, porque é uma maneira de simplificar os css. imagina que queres centrar 20 tag's. Terias que fazer 20x .centerX e cada vez que o usavas andar à procura do centerX correcto.
Ao usar p.center ou a.fontBig ou a.centerSmall ou p.etc.... Simplificas o teu código, embora possas sempre usar da maneira que quiseres. como p.xxx ou .xxx1 .xxx2 .... etc....

Quanto ao div#content h3 { } é obvio que se está a usar um identificador, mas atribuindo também caracteristicas especificas a um tag(id) h3 {}. Sim, pode-se dizer que só afecta o h3 dentro da div com id="content".
Como deves ter visto também: div#content a:link, a:visited{ } ou até div#content a:hover{}.

Se podes atribuir um id e uma class a uma tag? sim, penso que sim, embora eu acho estranho usar isso se podes ter tudo numa .class, só acho que seria razoavel isso se quisesses identificar a tag, por exemplo como <div id="menu"> unicamente por questões de poderes usar subdefinições de tag's nesse id. : div#menu h3 {} e div#menu h4 {} e até mesmo para isso usavas só Id's e não precisavas de .class's. Não acho grande vantagem usar as duas definições numa só <tag>.

Mas se eu tiver um selector p.center{text-align: center;} vou ter na mesma que fazer <p class="center">.
Porque não ter um selector .center{text-align: center;} que posso usar em todas as tags (<p>, <div>, etc)?

Mas se eu tiver um selector p.center{text-align: center;} vou ter na mesma que fazer <p class="center">.
Porque não ter um selector .center{text-align: center;} que posso usar em todas as tags (<p>, <div>, etc)?

Dude, claro que tens que fazer o <p class=center>, para chamar o style ... ele não adivinha.

Mas se fizeres como dizes na segunda hipótese, vais ter na mesma que chamar a class, só que podes usar a nível geral, como disses-te ... Podes fazer isso, perfeitamente. Só não deves usar o nome "center" para a class, porque "center" é um atributo html/css e não se devem usar nomes de atributos para outras coisas, porque vai dar merda. Chama-lhe outra coisa qualquer, tipo ... meio ... ;)

Para clarificar ainda mais quando deves usar um div ou um class, divs usam-se para estruturar blocos grandes, regra geral (por ex. header, corpo, footer) ou sub blocos importantes. Os classes usam-se mais para estruturar partes individuais e específicas, como parágrafos e coisas assim.

Exemplo:

Tens um bloco chamado sidebar (tipo um bloco com os menus e links e assim). Para definir o bloco em si, usas #sidebar, onde defines width e tudo o resto. Depois por exemplo para definires o estilo de uma lista dentro do sidebar já usas class, como por exemplo #sidebar .list {list-style: none;}. São métodos de organização de código ...

Mas se eu tiver um selector p.center{text-align: center;} vou ter na mesma que fazer <p class="center">.
Porque não ter um selector .center{text-align: center;} que posso usar em todas as tags (<p>, <div>, etc)?

Tens sempre que identificar o style que vais usar, seja class ou id, mas por exemplo se queres um p.center somente para centrar os paragrafos e definir a font-size em todos os paragrafos como 9px, e imagina que usas o .center para centrares as tuas tabelas ou textos em geral, e com a font-size em 12px?? é mais facil definires p.center e .center, e basta olhares para o código e percebes/encontras facilmente o que queres, agora se tivesses que fazer .centerMAIN e depois .centerP ou ainda .centerText, .centerAlink...
Trata-se apenas de uma questao de organizaçao... para mim claro.
Mas para ver se termino com as minhas reply's a este post, uma observaçao final:

A maior diferença entre as classes e os id's é a liberdade! Liberdade de escolheres o que queres usar,
ID's = UTILIZAÇAO UNICA. (vantagem de definir sub-atributos a varias <tag's> dentro desse id.)
CLASSES = MULTI-UTILIZAÇAO. (com enorme variedade de utilizaçoes e com alguns sub-atributos a tag's)
Agora tu é que decides o que usar. Eu pessoalmente uso quase sempre .classes e nem me chateio muito com definiçoes ID's...
Agora tu é que sabes!
It's in your hands! (code)

Abraço.

o "id" nas tags indentifica determinada tag ou seja fica com um nome, no meu caso uso bastante por causa do dhtml ou seja se precisar de alterar o bgcolor em javascript chamo pelo ID se preciso de alterar o conteudo da mesma chamo pelo id

Agora claro que as CLASS tanto pode afectar uma so tag como podes afectar todas as tags, como uso os 2 "ID" e "CLASS" mas com propositos distintos, o ID para identificar uma table ou td ou p ou div e usa as class para defenir a fonte cor etc...

espero ter ajudado

Obrigado pelas repostas, já estou esclarecido.

De resto, o melhor é eu continuar a praticar. Só assim é que percebo realmente como funcionam as coisas e o que é ou não melhor. :)

(...)
De resto, o melhor é eu continuar a praticar. Só assim é que percebo realmente como funcionam as coisas e o que é ou não melhor. :)

Ora aí está uma boa "noção".
Keep coding... :)

um abraço.