1
00:00:00,326 --> 00:00:02,079
Miremos nuestra página

2
00:00:02,284 --> 00:00:04,540
tiene estos títulos principales

3
00:00:04,540 --> 00:00:07,581
tiene este párrafo que describe a los conejos

4
00:00:07,581 --> 00:00:10,588
y ahora de hecho tiene múltiples párrafos,

5
00:00:10,588 --> 00:00:13,416
con la letra de mi canción favorita sobre conejos

6
00:00:13,543 --> 00:00:17,554
La última vez, nosotros dimos estilo al primer párrafo usando el id

7
00:00:17,857 --> 00:00:21,016
Pero ahora que yo tengo múltiples párrafos con letras de canciones,

8
00:00:21,016 --> 00:00:24,083
yo quiero que todos tengan ese fondo de color amarillo

9
00:00:24,613 --> 00:00:27,692
¿Como podriamos hacer eso usando lo que sabemos hasta el momento?

10
00:00:28,221 --> 00:00:30,374
La primera cosa que aprendimos como hacer

11
00:00:30,374 --> 00:00:33,002
fue seleccionar todas las etiquetas de un tipo particular,

12
00:00:33,002 --> 00:00:34,659
tal como con el selector 'p'

13
00:00:34,886 --> 00:00:39,120
pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones

14
00:00:39,226 --> 00:00:41,290
Nosotros necesitamos algo mas específico.

15
00:00:41,507 --> 00:00:44,898
Despues nosotros aprendimos como seleccionar etiquetas con un id particular,

16
00:00:44,898 --> 00:00:48,140
como seleccionando el párrafo con el id 
"rabbit-song".

17
00:00:48,368 --> 00:00:50,920
pero eso solo seleccionó el primer párrafo

18
00:00:51,120 --> 00:00:53,725
Nosotros no podemos adicionar ese id a los otros párrafos

19
00:00:53,725 --> 00:00:57,657
porque no nos es permitido usar el mismo id en múltiples etiquetas

20
00:00:57,867 --> 00:01:00,202
si nosotros queremos seleccionar los otros párrafos

21
00:01:00,202 --> 00:01:02,881
nosotros tendriamos que dar nuevos IDs a cada uno de ellos

22
00:01:02,881 --> 00:01:05,717
(como "song-lyrics2",
y "song-lyrics3"),

23
00:01:05,717 --> 00:01:07,358
porque cada id debe ser único

24
00:01:07,358 --> 00:01:09,808
y entonces nosotros tendriamos que adicionar reglas para cada uno de ellos

25
00:01:09,808 --> 00:01:12,398
Podriamos hacer eso, pero, eso es mucho trabajo

26
00:01:12,398 --> 00:01:14,691
y cada vez que nosotros adicionaramos un nuevo verso a la canción,

27
00:01:14,691 --> 00:01:17,279
tendríamos que recordar adicionar otro ID al HTML

28
00:01:17,279 --> 00:01:19,018
y otro ID a las reglas de CSS

29
00:01:19,018 --> 00:01:22,830
y si nosostros adicionaramos cientos de versos, eso solo sería agotador

30
00:01:22,980 --> 00:01:24,315
bueno, adivina que?

31
00:01:24,492 --> 00:01:27,383
Hay una mejor manera, y esta es llamada "clases".

32
00:01:27,599 --> 00:01:29,009
una clase es basicamente:

33
00:01:29,009 --> 00:01:32,067
un modo de asignar un elemento particular a un grupo

34
00:01:32,162 --> 00:01:35,150
y tu puedes asignar tantos elementos como tu quieras a un grupo.

35
00:01:35,352 --> 00:01:39,928
Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs

36
00:01:40,362 --> 00:01:44,705
Primero, borraré este ID, dado que voy a reemplazarlo

37
00:01:44,705 --> 00:01:47,915
Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '',

38
00:01:47,915 --> 00:01:53,185
yo agregaré un espacio, y escribiré: class ="

39
00:01:53,185 --> 00:01:55,448
Ahora necesitamos inventarnos un nombre para la clase

40
00:01:55,448 --> 00:01:56,917
uno que sea descriptivo

41
00:01:56,917 --> 00:01:59,664
llamemoslo "song-lyrics".

42
00:01:59,664 --> 00:02:01,678
yo he tecleado eso allí dentro

43
00:02:01,678 --> 00:02:04,423
¿ que otros elementos deberian tener este nombre de clase?

44
00:02:04,423 --> 00:02:06,498
bien, todos los otros párrafos con letras de canciones,

45
00:02:06,498 --> 00:02:09,153
asi que, iremos hacia abajo en la página

46
00:02:09,153 --> 00:02:13,057
y adicionaremos el atributo a cada una de las clases de párrafos

47
00:02:13,057 --> 00:02:14,833
("song-lyrics")

48
00:02:14,833 --> 00:02:18,223
Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS

49
00:02:18,223 --> 00:02:20,540
asi que volvemos a arriba a nuestra etiqueta ''

50
00:02:20,540 --> 00:02:24,581
y borramos el selector de id que teniamos antes,

51
00:02:24,581 --> 00:02:26,157
porque estamos reemplazandolo.

52
00:02:26,157 --> 00:02:28,925
y ahora necesitamos dar con nuestro selector de clase

53
00:02:28,925 --> 00:02:34,442
bien, para comenzar un selector de clase, usamos un periodo, un punto.

54
00:02:34,442 --> 00:02:39,030
luego, escribimos el nombre de la clase adelante: song-lyrics,

55
00:02:39,030 --> 00:02:46,631
y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor.

56
00:02:46,631 --> 00:02:47,819
Ta-da!

57
00:02:47,819 --> 00:02:51,341
Todas las letras de canciones ahora tienen fondos amarillos.

58
00:02:51,341 --> 00:02:55,231
¿Que pasaría si nosotros escribimos está s en mayúscula?

59
00:02:55,231 --> 00:02:56,491
No funciona,

60
00:02:56,491 --> 00:02:58,969
porque los nombre de clases distinguen entre mayúsculas y minúsculas

61
00:02:58,969 --> 00:03:01,768
es importante cuales letras están en mayúsculas y cuales en minúsculas

62
00:03:01,768 --> 00:03:04,323
tal como con los IDs.

63
00:03:04,323 --> 00:03:08,520
¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)?

64
00:03:08,520 --> 00:03:09,772
No funciona,

65
00:03:09,772 --> 00:03:13,086
porque entonces el buscador piensa que "song-lyrics" es un ID,

66
00:03:13,086 --> 00:03:16,407
y cuando este no puede encontrar algo en el atributo ID de "song-lyrics"

67
00:03:16,407 --> 00:03:18,113
este se rinde.

68
00:03:18,113 --> 00:03:25,246
¿Que pasaría si ponemos espacios en nuestros nombres de clases?

69
00:03:25,246 --> 00:03:27,466
bien, eso tampoco funciona

70
00:03:27,466 --> 00:03:30,185
porque las clases no pueden tener espacios

71
00:03:30,185 --> 00:03:31,635
y como encontraremos mas adelante

72
00:03:31,635 --> 00:03:35,872
un espacio significa algo muy especifico en el mundo de CSS

73
00:03:35,872 --> 00:03:39,485
Asi que, simplemente lo compondremos como estaba.

74
00:03:39,485 --> 00:03:41,113
Una vez mas:

75
00:03:41,113 --> 00:03:43,390
cuando queremos adicionar una clase,

76
00:03:43,390 --> 00:03:45,547
nosotros ideamos un nombre para la clases,

77
00:03:45,547 --> 00:03:49,270
y lo adicionamos a nuestro atributo en HTML

78
00:03:49,679 --> 00:03:51,300
luego escribimos una regla de estilo

79
00:03:51,491 --> 00:03:54,664
comenzando con un periodo(.) y luego escribiendo el nombre de clase

80
00:03:55,629 --> 00:03:58,610
y ahora tu CSS puede tener clase!