Qual a diferença do 'id' e do 'class'?

HTML:
<img id="banner" src="banner.jpg">

<img src="beneficios.jpg" class="imagembeneficios">

<img src="teste.jpg" class="imagembeneficios">


CSS:
#banner {
    width:100%;
}

.imagembeneficios {
    width: 50%;
}

O id só pode ser usado por um e apenas um elemento dentro do HTML, enquanto o class pode se repetir. O CSS irá alterar os elementos HTML marcados com a mesma classe de maneira igual. Logo nesse exemplo a imagem beneficios e teste, terão width de 50%.

Olá Leandro tudo bem?

Segue abaixo algumas referências e explicações de definições que acredito que vão te ajudar:

Documentação de pesquisa:

• ID - Documentação developer mozilla
• Classe - Documentação developer mozilla

CLASSE "." = usada para o momento que o mesmo estilo se repete em outra parte do código. Você pode colocar vários elementos com a mesma classe para todos terem o mesmo estilo

ID "#" = usado quando você quer que um estilo se aplique somente naquele elemento e em nenhum outro. Um identificador é único e não pode ter repetições

Uma explicação mais prática com alguns exemplos de quando o código faz referência à *classe e id * seria:

Neste caso quando utilizamos o " . " ou seja, .paciente a query busca pela classe paciente lá no HTML

JS

 var pacientes = document.querySelectorAll(".paciente");

HTML

<tr class="paciente">

E neste outro caso com a # em #tabela-pacientes o query busca lá no arquivo HTML pelo id tabela-pacientes.

JS

var tabela = document.querySelector("#tabela-pacientes");

HTML

<tbody id="tabela-pacientes">

Espero ter ajudado,

Até mais