Diferenças entre Classes e IDs

Rafael Vergani — Thu, 10 Dec 2009 00:39:51 +0000

Quando escrevemos nossos primeiros códigos na carreira surge a dúvida “Devo usar ID ou Class?“.

A partir dessa pergunta cria-se bastante confusão e muitos acabam utilizando qualquer uma das duas opções sem saber qual a mais adequada.

Inicialmente ambos parecem “fazer a mesma coisa”, mas vamos ver algumas diferenças importantes:

1 – Classes não são únicas

- É possível utilizar a mesma classe para muitos elementos;

- Um elemento pode possuir diversas classes.

2 – IDs são únicos

- Cada elemento só pode ter um ID;
- Cada página só pode ter um elemento com aquele ID.
Importante: seu código não vai ser válido se você usar o mesmo ID para dois elementos.

2.1 – IDs possuem funcionalidades específicas

Ao contrário das classes que não possuem funcionalidades especiais nos browser, os IDs têm o que chamamos de “valor de hash” para URL’s.
Ex: se você digitar www.rafaelvergani.com/#contato, o navegador vai localizar o elemento com ID=”contato” e automaticamente vai exibir essa parte do conteúdo na tela.

3 – Elementos podem ter classes e IDs simultaneamente

Você pode declarar classes e IDs em um elemento desde que você respeite a regra número 2 citada acima.

Espero ter esclarecido algumas dúvidas com este artigo.

Rafael Vergani

Centralizar site via CSS

Rafael Vergani — Wed, 09 Dec 2009 20:45:47 +0000

“Como faço pra deixar o meu site centralizado na tela?”

Essa dúvida é comum principalmente entre desenvolvedores iniciantes.
Pois bem, centralizar a página através de CSS é muito simples!
O código abáixo é CrossBrowser (suporta todos os navegadores).

O arquivo HTML deve estar assim:

Conteúdo do site

No arquivo CSS:

body { text-align:center; } /* centraliza no IE */
#centro {
margin:0px auto; /*centraliza em outros navegadores*/
width:770px; border: 0;
vertical-align:top;
position:relative;
background-color:#ffffff;
}

Obs.: não esqueça de chamar o seu arquivo CSS no HTML.
Basta colocar a seguinte linha entre as tags :

Testei no Opera, IE6, IE7, IE8, Firefox, Safari e Chrome.