HTML5 Para Crianças - Classes e Ids

O que são Classes e Ids?

As classes e os ids são atributos ou parâmetros que podemos colocar em quase todos os elementos de HTML e que facilitam a referenciação desses elementos em ficheiros de estilos (CSS) e em scripts escritos em JavaScript. Quer isto dizer que, atribuindo uma classe ou um id a um elemento, estamos a diferenciá-lo dos outros.

A grande diferença entre uma classe e um id, é que podemos ter vários elementos com a mesma classe na mesma página, mas só podemos ter 1 elemento com um determinado id. Embora se possam usar ids para referenciar elementos em CSS, eles são mais indicados para serem referenciados em JavaScript ou, como já vimos antes, para criar links internos, e o seu uso em CSS é desencorajado por questões de performance.

O valor destes atributos pode ter letras maiúsculas e minúsculas, e até números (desde que não comecem por um número), mas não pode ter espaços nem pode estar vazio. Podes usar _ (underscores) e - (o traço ou sinal de menos) se quiseres juntar duas ou mais palavras. Por exemplo
<p class="texto-grande">Parágrafo com letra grande</p>
ou
<h1 id="nome_do_site">HTML5 para Crianças</h1>.

De seguida, vamos ver como e quando usar cada um deles.

Classes

Classes são identificadores para os elementos aos quais foram atribuídas. Ou seja, são usadas para identificar elementos HTML de modo a distingui-los dos outros iguais.

Para referenciarmos uma classe em CSS, colocamos um . (ponto) seguido do nome da classe. E elementos diferentes podem ter a mesma classe. Por exemplo, se eu criar uma classe com o nome "maior", para aumentar o tamanho da letra de alguns elementos em 120%, posso atribuí-la a alguns <p> e a alguns <h3> do meu documento, e todos eles vão aparecer com o tamanho da letra 120% superior ao dos outros <p> e <h3> que não têm essa classe. Assim:

Código HTML

<h3>Este título tem o tamanho da letra definido pelo navegador</h3>
<p>Este parágrafo também tem o tamanho da letra definido pelo navegador.</p>
<h3 class="maior">Este título tem o tamanho da letra 20% maior do que o título anterior</h3>
<p class="maior">Este parágrafo tem o tamanho de letra 20% maior do que o parágrafo que não tem classe atribuída.</p>
<p class="maior">E este também!</p>

Código CSS

.maior {
  font-size:120%;
}

Também podes associar várias classes ao mesmo elemento. Por exemplo se escreveres um parágrafo a que queres dar muita importência, e já tiveres no teu CSS duas classes. Uma que coloca o tamanho da letra maior e outra que coloca a cor do texto a vermelho, podes usar as duas no mesmo elemento, separadas por um espaço.

Código HTML

Parágrafo com letra maior e cor vermelha.

Código CSS

.maior {
  font-size: 120%;
}

.red {
 color:red;
}

IDs

O atributo id é usado para especificar o identificador único de um elemento do documento HTML.

Para referenciarmos um ID em CSS, colocamos um # seguido do nome do ID. Podes ter vários elementos com IDs diferentes na tua página, mas esses IDs têm que ser únicos. Não podes ter mais do que 1 elemento com o mesmo ID, mesmo que seja um elemento igual.

Como viste no capítulo das hiperligações em HTML, os Ids podem ser usados para criar links dentro da mesma página.

<ul>
    <li><a href="#titulo1">Título 1</a></li>
    <li><a href="#titulo2">Título 2</a></li>
    <li><a href="#titulo3">Título 3</a></li>
  </ul>

Mas, tal como as classes, também podem ser usados para dares estilos diferentes aos elementos do teu HTML.

Código HTML

HTML5 para Crianças

Código CSS

#nome_do_site {
  color:black;
  font-size:32px;
}

Revisão

Vamos então fazer uma pequena revisão de algumas coisas que aprendemos neste capítulo.

Podemos fazer isto:

<p class="sublinhado">Parágrafo sublinhado</p>
<p class="sublinhado">Outro parágrafo sublinhado</p>

Não podemos fazer isto:

<p id="sublinhado">Parágrafo sublinhado</p>
<p id="sublinhado">Outro parágrafo sublinhado</p>

Porque, como sabes, não podemos repetir Ids no mesmo documento.

Podemos fazer isto:

<h1 class="titulo"></h1>
<h1 class="_titulo"></h1>
<h1 class="Titulo34"></h1>
<h1 class="titulo_do_site"></h1>
<h1 class="titulo-do-site"></h1>

Não podemos fazer isto:

<h1 class=""></h1>
<h1 class=" "></h1>
<h1 class="34titulo"></h1>

Porque as classes e Ids não podem estar vazias nem começar por um número.

Este capítulo terminou. Foi mais pequenino dos que os outros mas tratou de temas igualmente importantes. Vamos agora aprender o que são comentários, como e quando usá-los. Clica aí em baixo para seguirmos para o Capítulo 8 - Comentários.