Olá!
Uma dúvida bem simples: quando devo usar classes e quando devo usar ids?
Agradeço pela ajuda.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá!
Uma dúvida bem simples: quando devo usar classes e quando devo usar ids?
Agradeço pela ajuda.
Oi, Igor, tudo bem?
Então, as classes trabalham de uma forma que identificam um grupo de elementos. Através delas, pode-se atribuir a estilização de vários elementos de uma vez só. E para identifica-la no css, usa-se o ponto (.), antes do nomeVê no exemplo:
<div class="container">
<h1> Seu trabalhos</h1>
</div>
<div class="container">
<h1> Seu texto de apresentação</h1>
</div>
<div class="container">
<h1> Seu currículo</h1>
</div> .container{
background-color: red;
}Acima vemos que consigmos fazer a mesma edição das três div igualmente com a classe container a partir do código CSS, ou seja, as três tags divs ficarão com o fundo vermelho
Já o ID, é o oposto da Classe, ele só se refere a um elemento. Ela é exclusiva. Não podendo haver mais de uma ID com o mesmo nome. E para identifica-la no css, usa-se o cerquilha (#)
<div id="wrap">
<h1> Seu trabalhos</h1>
</div>
<div class="container">
<h1> Seu texto de apresentação</h1>
</div>
<div class="container">
<h1> Seu currículo</h1>
</div> #wrap{
background-color: blue;
}No exemplo acima, somente o ID wrap irá estilizar o fundo com a cor azul.
Uma boa prática com desenvolvimento web é utilizar mais classes pelo seu poder de ser reutilizada várias vezes. Enquanto o ID é exclusivo, você não terá esse mesmo poder.
Espero ter te ajudado!
As duas tem a mesma funcionalidade. Mas o ID é usado para localizar um elemento mais especifico, portando, só podendo utilizá-lo apenas uma vez. Enquanto o class é mais reutilizável, podendo usá-lo em diversos elementos. Ex:
<div id="caixa-vermelha" class="container">
<p>Exemplo</p>
</div>
<div class="container">
<p>Exemplo2</p>
</div>
<div class="container">
<p>Exemplo3</p>
</div>
Obrigado pela ajuda Laís e Thales. Esclareceram minhas dúvidas.