0:00:00.326,0:00:02.079
Vamos dar uma olhada na nossa página

0:00:02.284,0:00:04.540
Tem esses cabeçalhos

0:00:04.540,0:00:07.581
tem parágrafos descrevendo coelhos

0:00:07.581,0:00:10.588
e agora ela tem na verdade[br]vários parágrafos

0:00:10.588,0:00:13.416
com as letras das minhas músicas[br]favoritas sobre coelhos.

0:00:13.543,0:00:17.554
Da última vez, nós estilizamos[br]a primeira letra usando id.

0:00:17.857,0:00:21.016
Mas agora tenho vários[br]parágrafos de letras

0:00:21.016,0:00:24.083
Eu quero que todos eles tenham[br]aquele fundo amarelo.

0:00:24.613,0:00:27.692
Como poderíamos fazer [br]isso com o que sabemos até agora?

0:00:28.221,0:00:30.374
A primeira coisa que aprendemos a fazer

0:00:30.374,0:00:33.232
foi como selecionar todas as tags[br]de um tipo específico,

0:00:33.232,0:00:34.659
como o seletor "p".

0:00:34.886,0:00:39.120
Mas aquilo coloriu todos [br]os parágrafos, não somente das letras.

0:00:39.226,0:00:41.290
Precisamos fazer algo ainda[br]mais específico.

0:00:41.507,0:00:44.898
Então aprendemos como [br]selecionar tags com um id específico,

0:00:44.898,0:00:48.145
como selecionar o parágrafo[br]com o id "rabbit-song".

0:00:48.732,0:00:50.920
Mas aquilo selecionou só[br]o primeiro parágrafo.

0:00:51.120,0:00:53.725
Não podemos adicionar [br]aquele id a outros parágrafos,

0:00:53.725,0:00:57.657
porque não é possível usar [br]o mesmo id em mais de uma tag.

0:00:57.867,0:01:00.142
Se quisermos selecionar outro parágrafo

0:01:00.142,0:01:02.551
teremos que dar a cada um deles um novo ID

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

0:01:05.717,0:01:07.358
porque todo ID deve ser único.

0:01:07.358,0:01:09.558
E temos que adicionar regras[br]a cada um deles.

0:01:09.808,0:01:12.398
Poderíamos fazer isso.[br]Mas é muito trabalhoso!

0:01:12.398,0:01:14.531
E cada vez que adicionamos[br]uma nova música

0:01:14.531,0:01:17.109
temos que lembrar de [br]adicionar outro ID ao HTML

0:01:17.109,0:01:19.018
e outro ID para as regras de CSS,

0:01:19.018,0:01:22.400
e se nós adicionarmos centenas [br]de versos, seria exaustivo.

0:01:22.980,0:01:24.315
Então adivinha?

0:01:24.492,0:01:27.137
Há um jeito melhor, chamado "classes".

0:01:27.502,0:01:29.009
Uma classe é basicamente:

0:01:29.009,0:01:32.067
Um modo de associar um [br]elemento particular a um grupo.

0:01:32.162,0:01:35.150
E você pode associar quantos[br]elementos você quiser ao grupo.

0:01:35.352,0:01:39.928
Para adicionar uma classe, adicionamos o[br]atributo "class", como fizemos com os IDs.

0:01:40.362,0:01:44.705
Primeiro, deletamos esse ID,[br]já que irei substituí-lo.

0:01:44.705,0:01:47.915
Agora tenho meu cursor[br]no começo da tag '< p >'

0:01:47.915,0:01:51.675
Vou adicionar um espaço[br]e escrever: class = ''

0:01:53.183,0:01:55.333
Agora precisamos dar um nome[br]para a classe.

0:01:55.333,0:01:56.792
Um nome bom e descritivo.

0:01:56.927,0:01:59.294
Vamos chamar de "song-lyrics".

0:01:59.658,0:02:01.449
Vou digitar aqui.

0:02:01.665,0:02:04.335
Que outros elementos [br]devem ter esse mesmo nome?

0:02:04.416,0:02:06.420
Bem, todos os outros parágrafos letras.

0:02:06.510,0:02:09.154
Vamos ir até o final da página,

0:02:09.154,0:02:12.777
e adicionar o atributo a cada um dos[br]parágrafos classes.

0:02:13.061,0:02:14.540
("song-lyrics")

0:02:14.836,0:02:18.003
Agora estamos prontos para[br]adicionar a regra de CCS.

0:02:18.217,0:02:20.539
Vamos voltar ao nossa a tag "< style >"

0:02:20.539,0:02:24.574
e deletar o seletor id[br]que adicionamos antes

0:02:24.574,0:02:26.102
pois estamos o trocando.

0:02:26.157,0:02:28.784
Agora precisamos criar[br]nossa classe seletora.

0:02:28.901,0:02:34.039
Para criar a classe seletora,[br]usamos um ponto.

0:02:34.426,0:02:39.027
Então escrevemos o nome [br]da classe depois: song-lyrics,

0:02:39.027,0:02:46.415
E como sempre: chaves, propriedade,[br]dois pontos, valor.

0:02:46.633,0:02:47.575
Pronto!

0:02:47.821,0:02:51.007
Todas as letras agora têm fundo amarelo.

0:02:51.343,0:02:55.143
O que aconteceria se deixarmos[br]aqui maiúsculo?

0:02:55.240,0:02:56.398
Não funcionaria.

0:02:56.491,0:02:58.830
Porque o nome das classe não é maiúsculo.

0:02:58.876,0:03:01.771
Fará diferença se as letras [br]forem maiúsculas ou minúsculas.

0:03:01.771,0:03:03.488
Assim como os ID´s.

0:03:04.243,0:03:08.295
O que aconteceria se usássemos o sinal do[br]jogo da velha (#) ao invés de ponto?

0:03:08.542,0:03:09.666
Não funcionaria.

0:03:09.774,0:03:12.805
Porque o browser pensaria[br]que "song-lyrics" é um ID,

0:03:12.895,0:03:16.311
e quando não encontrasse [br]nada no atributo id da song-lyrics,

0:03:16.311,0:03:17.584
não faria nada.

0:03:18.102,0:03:24.512
O que aconteceria se colocássemos[br]espaços nos nomes das classes?

0:03:25.248,0:03:27.477
Bem, também não funcionaria,

0:03:27.477,0:03:29.997
porque classes não podem ter[br]espaços em branco.

0:03:30.192,0:03:31.649
Como descobriremos mais tarde

0:03:31.649,0:03:34.972
espaços tem um significado [br]bem especial no CSS.

0:03:35.868,0:03:38.776
Então, vamos arrumar novamente.

0:03:39.523,0:03:41.110
Então, mais uma vez:

0:03:41.110,0:03:43.387
Quando queremos adicionar uma classe,

0:03:43.387,0:03:45.589
temos que criar um nome,

0:03:45.589,0:03:49.000
e incluir as classes nos[br]atributos do HTML.

0:03:49.248,0:03:51.317
E então escrevemos nossa regra de estilo,

0:03:51.317,0:03:54.691
começando pelo ponto e nome da classe.

0:03:55.216,0:03:58.021
E agora seu CSS pode ser melhorado!

0:03:58.021,0:04:00.000
Legendado por [Valter Bigeli][br]Revisado por [Fernando dos Reis]