Qual a diferença entre CLASS e ID?

Imagem para exemplificar a diferença entre CLASS e ID

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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.