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]