Uma dúvida infernal que surge em muita gente, e que também aconteceu comigo, é sobre o uso dos seletores do HTML, as tais das “classes” e “IDs”. O que é, como utilizar e quando utilizar.
Class, ID? Ahn?
Antes de mais nada é bom explicar a vocês o quê que é isso, para não ficarem confusos daqui para frente. Então, as Classes (class) e IDs são seletores que marcam seu conteúdo no HTML, que por sinal, como o nome já diz, é uma linguagem de marcação. “Mas, por que eu iria querer marcar meu HTML?”, simples, você marcaria seu conteúdo para estilizá-lo e organizá-lo em sua página com o dito cujo CSS, se você não sabe o que é CSS convido-lhe a ler.
Mas… Qual a diferença entre estes dois tipos de seletores?
Aí que está o pulo do gato, pois, se existem dois tipos de seletores, eles também devem ter distinções, para uso diferente. E sim, tem.
Como funciona o seletor de classe, o class?
Funciona da seguinte maneira, o seletor class, pode ser utilizado e repetido diversas vezes no corpo do seu site, desta maneira:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html><head> <title>Título do seu site</title></head><body> <div class="thumb"> </div> <div class="thumb"> </div> <div class="thumb"> </div></body></html> |
Deste modo, você pode aplicar estilos em elementos que se repetem no site, como, por exemplo, os thumbnails, que se repetem de monte na index de seu site.
Como funciona o seletor de identificação, o ID?
O ID, por outro lado, só pode ser aplicado uma vez na página, ele é mais utilizado para definir seções de um site, como, por exemplo um cabeçalho, que por sinal, não se repete no layout, ou se repete? Pelo menos não aqui no blog. Deste modo:
|
1
2
3
4
5
6
7
8
9
10
|
<html><head> <title>Título do seu site</title></head><body> <header id="cabecalho"> <h1>Título do seu site</h1> </header></body></html> |
Viram como defini uma seção com o seletor ID? O cabeçalho do site não se irá se repetir, por isso, eu posso utilizar o ID nesta seção do site.
E… Como eu aplico esses seletores no CSS?
Como eu já expliquei no artigo “O que é CSS?”, a sintaxe do CSS trabalha com três elementos que se complementam, o seletor, a propriedade e o valor. Para aplicar propriedades e valores nos seletores marcados no HTML é bem simples, pois, a classe é definida como um ponto (.) no CSS e o ID, como um jogo da velha (#), a hashtag do desenvolvimento.
Se você marcou, em seu HTML, o classe como thumb, no seu CSS ficaria assim:
|
1
|
.thumb { propriedade: valor; } |
Mas, se você aplicou, em seu HTML, a ID como cabecalho, em seu CSS ficaria assim:
|
1
|
#cabecalho { propriedade: valor; } |
Agora basta estilizar suas classes e IDs alterando as propriedades e valores, vamos abordar isso em outros posts. Por isso, se ficou com alguma dúvida, deixe-a no comentário, terei o prazer de lhe ajudar (ou não). Abraços! 😉
