Classe vs ID
Cascading Style Sheets (CSS) é uma linguagem que descreve a aparência e a formatação de um documento escrito usando uma linguagem de marcação. CSS é amplamente usado para estilizar páginas da Web escritas em HTML. CSS permite especificar seus próprios seletores de estilo, além de aplicar estilos para elementos HTML. Isso é feito usando os seletores de ID e classe. Ao especificar um estilo para um único elemento exclusivo, o seletor de ID é usado. Ao especificar um estilo para um grupo de elementos, o seletor de classe é usado.
O que é uma classe?
Em CSS, o seletor de classe pode ser usado para aplicar seu próprio estilo a um grupo de elementos. O seletor de classe é usado para aplicar um estilo específico a um conjunto de elementos com a mesma classe. Em CSS, um seletor de classe é identificado por um ponto final (.). A seguir está um exemplo de um seletor de classe definido em CSS.
.my_class {
cor: azul;
font-weight: bold;
}
HTML pode se referir à classe definida em CSS usando a classe de atributo conforme mostrado abaixo.
Esta é minha formatação
Esta é minha formatação novamente
Como mostrado acima, a mesma classe pode ser usada para vários elementos e um único elemento pode usar várias classes. Quando várias classes são usadas no mesmo elemento, as classes são inseridas no atributo class delimitado por um espaço conforme mostrado abaixo.
Esta é minha formatação usando duas classes
O que é um ID?
Em CSS, o seletor de ID pode ser usado para aplicar seu próprio estilo a um único elemento único. Em CSS, um seletor de ID é identificado por um hash (). A seguir está um exemplo de um seletor de ID definido em CSS.
my_ID {
cor: vermelho;
text-align:right;
}
HTML pode se referir ao seletor de ID definido em CSS usando o atributo id conforme mostrado abaixo.
Esta é minha formatação de um seletor de ID
IDs são únicos. Portanto, cada elemento pode ter apenas um único ID e cada página pode ter apenas um único elemento com esse ID específico. Os IDs têm uma característica importante que pode ser usada com um navegador. Se o URL da página contiver um valor de hash (por exemplo, https://myweb.commy_id), o navegador tentará localizar automaticamente o elemento com o ID “my_id” e rolar a página da web para exibir esse elemento. Esta é uma razão pela qual a página deve ter um único elemento com esse ID específico, para que o navegador possa localizar esse elemento.
Qual é a diferença entre Classe e ID?
Mesmo que tanto o seletor de classe quanto o seletor de ID possam ser usados para aplicar seu próprio estilo a elementos em uma página web, eles têm algumas diferenças importantes. O seletor de classe pode ser usado para aplicar seu próprio estilo a um grupo de elementos, enquanto o seletor de ID é usado para aplicar um estilo a um elemento único e exclusivo. Ao usar IDs, cada elemento pode ter apenas um único ID e cada página pode ter apenas um único elemento com esse ID específico, mas Class pode ser usada para vários elementos e um único elemento pode usar várias Classes. Além disso, o ID pode ser usado para rolar uma página automaticamente para exibir o elemento com esse ID, mas isso não é possível com o seletor de classe.
