WEBVTT

00:00:00.326 --> 00:00:02.079
Vamos dar uma olhada na nossa página

00:00:02.284 --> 00:00:04.540
Tem esses cabeçalhos

00:00:04.540 --> 00:00:07.581
tem parágrafos descrevendo coelhos

00:00:07.581 --> 00:00:10.588
e agora ela tem na verdade
vários parágrafos

00:00:10.588 --> 00:00:13.416
com as letras das minhas músicas
favoritas sobre coelhos.

00:00:13.543 --> 00:00:17.554
Da última vez, nós estilizamos
a primeira letra usando id.

00:00:17.857 --> 00:00:21.016
Mas agora tenho vários
parágrafos de letras

00:00:21.016 --> 00:00:24.083
Eu quero que todos eles tenham
aquele fundo amarelo.

00:00:24.613 --> 00:00:27.692
Como poderíamos fazer 
isso com o que sabemos até agora?

00:00:28.221 --> 00:00:30.374
A primeira coisa que aprendemos a fazer

00:00:30.374 --> 00:00:33.232
foi como selecionar todas as tags
de um tipo específico,

00:00:33.232 --> 00:00:34.659
como o seletor "p".

00:00:34.886 --> 00:00:39.120
Mas aquilo coloriu todos 
os parágrafos, não somente das letras.

00:00:39.226 --> 00:00:41.290
Precisamos fazer algo ainda
mais específico.

00:00:41.507 --> 00:00:44.898
Então aprendemos como 
selecionar tags com um id específico,

00:00:44.898 --> 00:00:48.145
como selecionar o parágrafo
com o id "rabbit-song".

00:00:48.732 --> 00:00:50.920
Mas aquilo selecionou só
o primeiro parágrafo.

00:00:51.120 --> 00:00:53.725
Não podemos adicionar 
aquele id a outros parágrafos,

00:00:53.725 --> 00:00:57.657
porque não é possível usar 
o mesmo id em mais de uma tag.

00:00:57.867 --> 00:01:00.142
Se quisermos selecionar outro parágrafo

00:01:00.142 --> 00:01:02.551
teremos que dar a cada um deles um novo ID

00:01:02.701 --> 00:01:05.717
como "song-lyrics2", e "song-lyric3",

00:01:05.717 --> 00:01:07.358
porque todo ID deve ser único.

00:01:07.358 --> 00:01:09.558
E temos que adicionar regras
a cada um deles.

00:01:09.808 --> 00:01:12.398
Poderíamos fazer isso.
Mas é muito trabalhoso!

00:01:12.398 --> 00:01:14.531
E cada vez que adicionamos
uma nova música

00:01:14.531 --> 00:01:17.109
temos que lembrar de 
adicionar outro ID ao HTML

00:01:17.109 --> 00:01:19.018
e outro ID para as regras de CSS,

00:01:19.018 --> 00:01:22.400
e se nós adicionarmos centenas 
de versos, seria exaustivo.

00:01:22.980 --> 00:01:24.315
Então adivinha?

00:01:24.492 --> 00:01:27.137
Há um jeito melhor, chamado "classes".

00:01:27.502 --> 00:01:29.009
Uma classe é basicamente:

00:01:29.009 --> 00:01:32.067
Um modo de associar um 
elemento particular a um grupo.

00:01:32.162 --> 00:01:35.150
E você pode associar quantos
elementos você quiser ao grupo.

00:01:35.352 --> 00:01:39.928
Para adicionar uma classe, adicionamos o
atributo "class", como fizemos com os IDs.

00:01:40.362 --> 00:01:44.705
Primeiro, deletamos esse ID,
já que irei substituí-lo.

00:01:44.705 --> 00:01:47.915
Agora tenho meu cursor
no começo da tag '< p >'

00:01:47.915 --> 00:01:51.675
Vou adicionar um espaço
e escrever: class = ''

00:01:53.183 --> 00:01:55.333
Agora precisamos dar um nome
para a classe.

00:01:55.333 --> 00:01:56.792
Um nome bom e descritivo.

00:01:56.927 --> 00:01:59.294
Vamos chamar de "song-lyrics".

00:01:59.658 --> 00:02:01.449
Vou digitar aqui.

00:02:01.665 --> 00:02:04.335
Que outros elementos 
devem ter esse mesmo nome?

00:02:04.416 --> 00:02:06.420
Bem, todos os outros parágrafos letras.

00:02:06.510 --> 00:02:09.154
Vamos ir até o final da página,

00:02:09.154 --> 00:02:12.777
e adicionar o atributo a cada um dos
parágrafos classes.

00:02:13.061 --> 00:02:14.540
("song-lyrics")

00:02:14.836 --> 00:02:18.003
Agora estamos prontos para
adicionar a regra de CCS.

00:02:18.217 --> 00:02:20.539
Vamos voltar ao nossa a tag "< style >"

00:02:20.539 --> 00:02:24.574
e deletar o seletor id
que adicionamos antes

00:02:24.574 --> 00:02:26.102
pois estamos o trocando.

00:02:26.157 --> 00:02:28.784
Agora precisamos criar
nossa classe seletora.

00:02:28.901 --> 00:02:34.039
Para criar a classe seletora,
usamos um ponto.

00:02:34.426 --> 00:02:39.027
Então escrevemos o nome 
da classe depois: song-lyrics,

00:02:39.027 --> 00:02:46.415
E como sempre: chaves, propriedade,
dois pontos, valor.

00:02:46.633 --> 00:02:47.575
Pronto!

00:02:47.821 --> 00:02:51.007
Todas as letras agora têm fundo amarelo.

00:02:51.343 --> 00:02:55.143
O que aconteceria se deixarmos
aqui maiúsculo?

00:02:55.240 --> 00:02:56.398
Não funcionaria.

00:02:56.491 --> 00:02:58.830
Porque o nome das classe não é maiúsculo.

00:02:58.876 --> 00:03:01.771
Fará diferença se as letras 
forem maiúsculas ou minúsculas.

00:03:01.771 --> 00:03:03.488
Assim como os ID´s.

00:03:04.243 --> 00:03:08.295
O que aconteceria se usássemos o sinal do
jogo da velha (#) ao invés de ponto?

00:03:08.542 --> 00:03:09.666
Não funcionaria.

00:03:09.774 --> 00:03:12.805
Porque o browser pensaria
que "song-lyrics" é um ID,

00:03:12.895 --> 00:03:16.311
e quando não encontrasse 
nada no atributo id da song-lyrics,

00:03:16.311 --> 00:03:17.584
não faria nada.

00:03:18.102 --> 00:03:24.512
O que aconteceria se colocássemos
espaços nos nomes das classes?

00:03:25.248 --> 00:03:27.477
Bem, também não funcionaria,

00:03:27.477 --> 00:03:29.997
porque classes não podem ter
espaços em branco.

00:03:30.192 --> 00:03:31.649
Como descobriremos mais tarde

00:03:31.649 --> 00:03:34.972
espaços tem um significado 
bem especial no CSS.

00:03:35.868 --> 00:03:38.776
Então, vamos arrumar novamente.

00:03:39.523 --> 00:03:41.110
Então, mais uma vez:

00:03:41.110 --> 00:03:43.387
Quando queremos adicionar uma classe,

00:03:43.387 --> 00:03:45.589
temos que criar um nome,

00:03:45.589 --> 00:03:49.000
e incluir as classes nos
atributos do HTML.

00:03:49.248 --> 00:03:51.317
E então escrevemos nossa regra de estilo,

00:03:51.317 --> 00:03:54.691
começando pelo ponto e nome da classe.

00:03:55.216 --> 00:03:58.021
E agora seu CSS pode ser melhorado!

00:03:58.021 --> 00:04:00.000
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]