Fork me on GitHub

Getting Started

Um guia para iniciantes na área de web.

Qual a diferença entre CLASS e ID?

Em HTML e CSS, há a possibilidade de aplicar estilos através de 'class' e 'id' e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre 'class' e 'id'?

O que são classes?

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:

Código CSS:

.classe1 {
  background: blue;
}

Código HTML:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="classe1">Div1</div>
    <div class="classe1">Div2</div>
    <div class="classe1">Div3</div>
    <div class="classe1">Div4</div>
    <div class="classe1">Div5</div>
  </body>
</html>

Então, todas as 'divs' que estiverem com a classe "classe1" estarão com um background azul(blue).

O que são ids?

As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:

Código CSS:

#idUm {
  background: blue;
}
#idDois {
  background: yellow;
}
#idTres {
  background: lightblue;
}
#idQuatro {
  background: lightgreen;
}

Código HTML:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="idUm">Div1</div>
    <div id="idDois">Div2</div>
    <div id="idTres">Div3</div>
    <div id="idQuatro">Div4</div>
  </body>
</html>

Então, como mostra o código acima, não podemos repetir uma 'id'. Deve ser especialmente única para cada elemento.