Vamos dar uma olhada na nossa página
Tem esses cabeçalhos
tem parágrafos descrevendo coelhos
e agora ela tem na verdade
vários parágrafos
com as letras das minhas músicas
favoritas sobre coelhos.
Da última vez, nós estilizamos
a primeira letra usando id.
Mas agora tenho vários
parágrafos de letras
Eu quero que todos eles tenham
aquele fundo amarelo.
Como poderíamos fazer
isso com o que sabemos até agora?
A primeira coisa que aprendemos a fazer
foi como selecionar todas as tags
de um tipo específico,
como o seletor "p".
Mas aquilo coloriu todos
os parágrafos, não somente das letras.
Precisamos fazer algo ainda
mais específico.
Então aprendemos como
selecionar tags com um id específico,
como selecionar o parágrafo
com o id "rabbit-song".
Mas aquilo selecionou só
o primeiro parágrafo.
Não podemos adicionar
aquele id a outros parágrafos,
porque não é possível usar
o mesmo id em mais de uma tag.
Se quisermos selecionar outro parágrafo
teremos que dar a cada um deles um novo ID
como "song-lyrics2", e "song-lyric3",
porque todo ID deve ser único.
E temos que adicionar regras
a cada um deles.
Poderíamos fazer isso.
Mas é muito trabalhoso!
E cada vez que adicionamos
uma nova música
temos que lembrar de
adicionar outro ID ao HTML
e outro ID para as regras de CSS,
e se nós adicionarmos centenas
de versos, seria exaustivo.
Então adivinha?
Há um jeito melhor, chamado "classes".
Uma classe é basicamente:
Um modo de associar um
elemento particular a um grupo.
E você pode associar quantos
elementos você quiser ao grupo.
Para adicionar uma classe, adicionamos o
atributo "class", como fizemos com os IDs.
Primeiro, deletamos esse ID,
já que irei substituí-lo.
Agora tenho meu cursor
no começo da tag '< p >'
Vou adicionar um espaço
e escrever: class = ''
Agora precisamos dar um nome
para a classe.
Um nome bom e descritivo.
Vamos chamar de "song-lyrics".
Vou digitar aqui.
Que outros elementos
devem ter esse mesmo nome?
Bem, todos os outros parágrafos letras.
Vamos ir até o final da página,
e adicionar o atributo a cada um dos
parágrafos classes.
("song-lyrics")
Agora estamos prontos para
adicionar a regra de CCS.
Vamos voltar ao nossa a tag "< style >"
e deletar o seletor id
que adicionamos antes
pois estamos o trocando.
Agora precisamos criar
nossa classe seletora.
Para criar a classe seletora,
usamos um ponto.
Então escrevemos o nome
da classe depois: song-lyrics,
E como sempre: chaves, propriedade,
dois pontos, valor.
Pronto!
Todas as letras agora têm fundo amarelo.
O que aconteceria se deixarmos
aqui maiúsculo?
Não funcionaria.
Porque o nome das classe não é maiúsculo.
Fará diferença se as letras
forem maiúsculas ou minúsculas.
Assim como os ID´s.
O que aconteceria se usássemos o sinal do
jogo da velha (#) ao invés de ponto?
Não funcionaria.
Porque o browser pensaria
que "song-lyrics" é um ID,
e quando não encontrasse
nada no atributo id da song-lyrics,
não faria nada.
O que aconteceria se colocássemos
espaços nos nomes das classes?
Bem, também não funcionaria,
porque classes não podem ter
espaços em branco.
Como descobriremos mais tarde
espaços tem um significado
bem especial no CSS.
Então, vamos arrumar novamente.
Então, mais uma vez:
Quando queremos adicionar uma classe,
temos que criar um nome,
e incluir as classes nos
atributos do HTML.
E então escrevemos nossa regra de estilo,
começando pelo ponto e nome da classe.
E agora seu CSS pode ser melhorado!
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]