Quando estamos construindo páginas da web, frequentemente nos deparamos com duas propriedades importantes: class e id. Mas qual é a diferença entre elas? Vamos descobrir de uma forma fácil de entender. Pois, neste post, vamos explorar qual a diferença entre class e id.
Conteúdo
Se você ainda não sabe muito, descubra aqui a base essencial para criar um site eficiente! Aprendendo mais sobre a base de uma estrutura HTML5.
O que são CLASS e ID?
CLASS
Definição: A propriedade class é usada para agrupar elementos HTML que compartilham estilos semelhantes. De uma forma simples imagine que você tem um grupo de amigos que usam bonés vermelhos. Você pode chamá-los de “grupo boné vermelho”.
Exemplo: <div class=”grupo-bone-vermelho”> define um elemento HTML <div> com a classe “grupo-bone-vermelho”, que pode ser estilizado de acordo com as regras CSS associadas a essa classe. Você pode estilizá-lo para que todos os elementos desse grupo tenham o mesmo visual.
ID
Definição: A propriedade id é usada para identificar exclusivamente um elemento HTML em uma página. Pense em algo único.
Exemplo: <p id=”paragraph1″> define um parágrafo com o identificador “paragraph1”, permitindo que seja estilizado ou manipulado de forma exclusiva através de CSS ou JavaScript.
Qual a diferença entre CLASS e ID
Unicidade:
Class: Pode ser atribuída a múltiplos elementos na mesma página.
ID: Deve ser único em toda a página. Não é permitido repetir o mesmo ID em diferentes elementos.
Aplicação de estilos:
Class: Utilizada para aplicar estilos em vários elementos que compartilham características semelhantes.
ID: Útil quando é necessário aplicar estilos ou manipulações específicas a um único elemento.
Seletores CSS:
Class: Você seleciona elementos com uma classe usando um ponto (.) seguido do nome da classe (ex: .grupo-bone-vermelho).
ID: Selecionada com um hashtag (#) seguido do nome do ID (ex: #paragraph1).
Quando usar CLASS e ID?
Class: Utilize quando desejar aplicar estilos ou funcionalidades compartilhadas por múltiplos elementos.
ID: Reserve para situações em que precisar identificar de forma exclusiva um elemento específico, Por exemplo, se você tem um botão de “Comprar Agora” em seu site, você pode dar a ele um ID e estilizá-lo de forma única para chamar a atenção do usuário.
Exemplos de uso
Aqui está um exemplo de uso real de class e id em um código HTML comentado:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de CLASS e ID</title>
<style>
/* Estilo para o botão com a classe 'primary-button' */
.primary-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Estilo para o parágrafo com o ID 'unique-paragraph' */
#unique-paragraph {
font-size: 18px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<!-- Um botão com a classe 'primary-button' -->
<button class="primary-button">Clique aqui</button>
<!-- Um parágrafo com o ID 'unique-paragraph' -->
<p id="unique-paragraph">Este é um parágrafo com um estilo único.</p>
<!-- Outro parágrafo com a mesma classe 'primary-button', mas não terá o mesmo estilo que o botão -->
<p class="primary-button">Este é outro parágrafo.</p>
</body>
</html>
Neste exemplo:
- O botão possui a classe primary-button. Ele terá o estilo definido para essa classe, que inclui uma cor de fundo azul e texto branco.
- O primeiro parágrafo possui o ID unique-paragraph. Ele terá um estilo específico definido para esse ID, como tamanho de fonte maior e negrito.
- O segundo parágrafo também possui a classe primary-button, mas não terá o mesmo estilo que o botão, porque não é um botão. Ele não terá fundo azul ou texto branco, pois os estilos de primary-button foram projetados especificamente para botões.
Conclusão
Em resumo, class e id são propriedades importantes em HTML e CSS que desempenham papéis distintos na construção de páginas da web. Enquanto class é utilizada para agrupar elementos com características semelhantes, id é empregada para identificar exclusivamente um elemento. É essencial entender suas diferenças e aplicar cada uma conforme necessário para garantir uma estrutura HTML eficiente e estilização CSS adequada.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
