1
00:00:00,326 --> 00:00:02,079
Vamos dar uma olhada na nossa página

2
00:00:02,284 --> 00:00:04,540
Tem esses cabeçalhos

3
00:00:04,540 --> 00:00:07,581
tem parágrafos descrevendo coelhos

4
00:00:07,581 --> 00:00:10,588
e agora ela tem na verdade
vários parágrafos

5
00:00:10,588 --> 00:00:13,416
com as letras das minhas músicas
favoritas sobre coelhos.

6
00:00:13,543 --> 00:00:17,554
Da última vez, nós estilizamos
a primeira letra usando id.

7
00:00:17,857 --> 00:00:21,016
Mas agora tenho vários
parágrafos de letras

8
00:00:21,016 --> 00:00:24,083
Eu quero que todos eles tenham
aquele fundo amarelo.

9
00:00:24,613 --> 00:00:27,692
Como poderíamos fazer 
isso com o que sabemos até agora?

10
00:00:28,221 --> 00:00:30,374
A primeira coisa que aprendemos a fazer

11
00:00:30,374 --> 00:00:33,232
foi como selecionar todas as tags
de um tipo específico,

12
00:00:33,232 --> 00:00:34,659
como o seletor "p".

13
00:00:34,886 --> 00:00:39,120
Mas aquilo coloriu todos 
os parágrafos, não somente das letras.

14
00:00:39,226 --> 00:00:41,290
Precisamos fazer algo ainda
mais específico.

15
00:00:41,507 --> 00:00:44,898
Então aprendemos como 
selecionar tags com um id específico,

16
00:00:44,898 --> 00:00:48,145
como selecionar o parágrafo
com o id "rabbit-song".

17
00:00:48,732 --> 00:00:50,920
Mas aquilo selecionou só
o primeiro parágrafo.

18
00:00:51,120 --> 00:00:53,725
Não podemos adicionar 
aquele id a outros parágrafos,

19
00:00:53,725 --> 00:00:57,657
porque não é possível usar 
o mesmo id em mais de uma tag.

20
00:00:57,867 --> 00:01:00,142
Se quisermos selecionar outro parágrafo

21
00:01:00,142 --> 00:01:02,551
teremos que dar a cada um deles um novo ID

22
00:01:02,701 --> 00:01:05,717
como "song-lyrics2", e "song-lyric3",

23
00:01:05,717 --> 00:01:07,358
porque todo ID deve ser único.

24
00:01:07,358 --> 00:01:09,558
E temos que adicionar regras
a cada um deles.

25
00:01:09,808 --> 00:01:12,398
Poderíamos fazer isso.
Mas é muito trabalhoso!

26
00:01:12,398 --> 00:01:14,531
E cada vez que adicionamos
uma nova música

27
00:01:14,531 --> 00:01:17,109
temos que lembrar de 
adicionar outro ID ao HTML

28
00:01:17,109 --> 00:01:19,018
e outro ID para as regras de CSS,

29
00:01:19,018 --> 00:01:22,400
e se nós adicionarmos centenas 
de versos, seria exaustivo.

30
00:01:22,980 --> 00:01:24,315
Então adivinha?

31
00:01:24,492 --> 00:01:27,137
Há um jeito melhor, chamado "classes".

32
00:01:27,502 --> 00:01:29,009
Uma classe é basicamente:

33
00:01:29,009 --> 00:01:32,067
Um modo de associar um 
elemento particular a um grupo.

34
00:01:32,162 --> 00:01:35,150
E você pode associar quantos
elementos você quiser ao grupo.

35
00:01:35,352 --> 00:01:39,928
Para adicionar uma classe, adicionamos o
atributo "class", como fizemos com os IDs.

36
00:01:40,362 --> 00:01:44,705
Primeiro, deletamos esse ID,
já que irei substituí-lo.

37
00:01:44,705 --> 00:01:47,915
Agora tenho meu cursor
no começo da tag '< p >'

38
00:01:47,915 --> 00:01:51,675
Vou adicionar um espaço
e escrever: class = ''

39
00:01:53,183 --> 00:01:55,333
Agora precisamos dar um nome
para a classe.

40
00:01:55,333 --> 00:01:56,792
Um nome bom e descritivo.

41
00:01:56,927 --> 00:01:59,294
Vamos chamar de "song-lyrics".

42
00:01:59,658 --> 00:02:01,449
Vou digitar aqui.

43
00:02:01,665 --> 00:02:04,335
Que outros elementos 
devem ter esse mesmo nome?

44
00:02:04,416 --> 00:02:06,420
Bem, todos os outros parágrafos letras.

45
00:02:06,510 --> 00:02:09,154
Vamos ir até o final da página,

46
00:02:09,154 --> 00:02:12,777
e adicionar o atributo a cada um dos
parágrafos classes.

47
00:02:13,061 --> 00:02:14,540
("song-lyrics")

48
00:02:14,836 --> 00:02:18,003
Agora estamos prontos para
adicionar a regra de CCS.

49
00:02:18,217 --> 00:02:20,539
Vamos voltar ao nossa a tag "< style >"

50
00:02:20,539 --> 00:02:24,574
e deletar o seletor id
que adicionamos antes

51
00:02:24,574 --> 00:02:26,102
pois estamos o trocando.

52
00:02:26,157 --> 00:02:28,784
Agora precisamos criar
nossa classe seletora.

53
00:02:28,901 --> 00:02:34,039
Para criar a classe seletora,
usamos um ponto.

54
00:02:34,426 --> 00:02:39,027
Então escrevemos o nome 
da classe depois: song-lyrics,

55
00:02:39,027 --> 00:02:46,415
E como sempre: chaves, propriedade,
dois pontos, valor.

56
00:02:46,633 --> 00:02:47,575
Pronto!

57
00:02:47,821 --> 00:02:51,007
Todas as letras agora têm fundo amarelo.

58
00:02:51,343 --> 00:02:55,143
O que aconteceria se deixarmos
aqui maiúsculo?

59
00:02:55,240 --> 00:02:56,398
Não funcionaria.

60
00:02:56,491 --> 00:02:58,830
Porque o nome das classe não é maiúsculo.

61
00:02:58,876 --> 00:03:01,771
Fará diferença se as letras 
forem maiúsculas ou minúsculas.

62
00:03:01,771 --> 00:03:03,488
Assim como os ID´s.

63
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?

64
00:03:08,542 --> 00:03:09,666
Não funcionaria.

65
00:03:09,774 --> 00:03:12,805
Porque o browser pensaria
que "song-lyrics" é um ID,

66
00:03:12,895 --> 00:03:16,311
e quando não encontrasse 
nada no atributo id da song-lyrics,

67
00:03:16,311 --> 00:03:17,584
não faria nada.

68
00:03:18,102 --> 00:03:24,512
O que aconteceria se colocássemos
espaços nos nomes das classes?

69
00:03:25,248 --> 00:03:27,477
Bem, também não funcionaria,

70
00:03:27,477 --> 00:03:29,997
porque classes não podem ter
espaços em branco.

71
00:03:30,192 --> 00:03:31,649
Como descobriremos mais tarde

72
00:03:31,649 --> 00:03:34,972
espaços tem um significado 
bem especial no CSS.

73
00:03:35,868 --> 00:03:38,776
Então, vamos arrumar novamente.

74
00:03:39,523 --> 00:03:41,110
Então, mais uma vez:

75
00:03:41,110 --> 00:03:43,387
Quando queremos adicionar uma classe,

76
00:03:43,387 --> 00:03:45,589
temos que criar um nome,

77
00:03:45,589 --> 00:03:49,000
e incluir as classes nos
atributos do HTML.

78
00:03:49,248 --> 00:03:51,317
E então escrevemos nossa regra de estilo,

79
00:03:51,317 --> 00:03:54,691
começando pelo ponto e nome da classe.

80
00:03:55,216 --> 00:03:58,021
E agora seu CSS pode ser melhorado!

81
00:03:58,021 --> 00:04:00,000
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]