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]