CSS: ID e Class, o que são e quando usar
Como muita coisa no
temido CSS, muitas pessoas tem dúvidas em relação ao ID e Class, o
que é normal. Então vamos ver de forma simples o que é cada um
deles e quando usar.
ID é um identificador
ou seletor para um elemento no HTML, e este deve ser único em todo o
corpo do documento, e assim o CSS será aplicado para este elemento
em específico. É algo que funciona como o número do documento de
identidade, ou seja, é como devemos identificar os elementos como
imagens, divs, parágrafos em nossa página. É também a forma mais
correta para este fim, mas muitos usam classes – e funciona – mas
não é indicado, e podem ter alguns problemas ao usar Javascript por
exemplo, pois classe pode ser usada em vários elementos HTML da
página, e o ID dever ser usado em apenas um. No CSS ele é
identificado pelo sinal # (sharp) e no HTML o nome do ID fica no
parâmetro id=”” sem o sinal #.
Exemplo:
CSS
#meuelemento{
color: #000;
}
#meuOutroElemento{
color: #333;
margin: auto;
}
HTML
<div
id=”meuelemento”>
Aqui é uma div com um
ID único
</div>
<div
id=”meuOutroElemento”>
Aqui é outra div com
uma ID diferente, pois o ID não pode ser repetido
</div>
Class é um
identificador ou seletor para uma classe de elementos no HTML, e pode
ser usada para identificar vários elementos. Este tipo de
identificador aplica as mesma características para todos os
elementos que a usam. É algo como a cor dos cabelos, quando temos
uma classe Loiro, todos dessa classe terão os cabelos amarelos. Ele
pode ser usado em quase todos os elementos do HTML, incluindo
imagens, divs, parágrafos e muitos outros. Ele é reconhecido no CSS
por um ponto (.) e no HTML pelo parâmetro class=””, sem o sinal
do ponto.
Exemplo:
CSS
.meuselementos{
color: #333;
background-color:#f1f1f1;
}
HTML
<div
class=”meuselementos”>
Aqui é uma div com seu
conteúdo
</div>
<div
class=”meuselementos”>
Aqui é outra div
diferente, mas com a mesa classe da div anterior, logo elas terão as
mesmas características definidas na Class “meuselementos”
</div>
Conclusão
Podemos observar nos
exemplos que o ID deve ser único em uma página HTML e assim as
característica desse ID serão únicas para aquele elemento. E a
Class pode ser usada para aplicar as mesmas características em
vários elementos que a tenham declarado.
Espero que tenha
entendido. Qualquer dúvida é só postar um comentário. Fique na
Paz!
Comentários
Postar um comentário