1
00:00:00,326 --> 00:00:02,079
Vamos a echarle un vistazo a nuestra página web.

2
00:00:02,284 --> 00:00:04,540
Tiene estos encabezados,

3
00:00:04,540 --> 00:00:07,581
tiene estos párrafos que describen conejos,

4
00:00:07,581 --> 00:00:10,588
y aquí en realidad tienen muchos 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 vez anterior, estilizamos el primer párrafo de la canción usando el "Id".

7
00:00:17,857 --> 00:00:21,016
Pero ahora que tengo muchos párrafos con la letra de la canción,

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

9
00:00:24,613 --> 00:00:27,692
¿Cómo podemos hacer eso usando lo que sabemos hasta el momento?

10
00:00:28,221 --> 00:00:30,374
Lo primero que aprendimos a 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
como con el selector "p".

13
00:00:34,886 --> 00:00:39,120
Pero eso coloreaba todos los párrafos, no sólo los párrafos con las letras de las canciones.

14
00:00:39,226 --> 00:00:41,290
Necesitamos algo más específico.

15
00:00:41,507 --> 00:00:44,898
Luego aprendimos cómo seleccionar etiquetas con un "Id" particular,

16
00:00:44,898 --> 00:00:48,140
como cuando seleccionamos el párrafo con el "Id": "rabbits-song".

17
00:00:48,368 --> 00:00:50,920
Pero eso sólo selecciona el primer párrafo.

18
00:00:51,120 --> 00:00:53,725
No podemos añadir ese "Id" a los otros párrafos,

19
00:00:53,725 --> 00:00:57,657
porque no está permitido usar el mismo "Id" en múltiples etiquetas.

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

21
00:01:00,202 --> 00:01:02,881
le tendríamos que dar a cada uno de ellos nuevos "Id´s"

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 luego tendríamos que añadir reglas a cada uno de ellos.

25
00:01:09,808 --> 00:01:12,398
Podríamos hacer eso.
Pero, ¡es mucho trabajo!

26
00:01:12,398 --> 00:01:14,691
Y cada vez que añadimos un nuevo verso a la canción,

27
00:01:14,691 --> 00:01:17,279
tendríamos que recordar añadir otro "Id" al HTML,

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

29
00:01:19,018 --> 00:01:22,830
y si añadimos cientos de versos, eso sería abrumador.

30
00:01:22,980 --> 00:01:24,315
Bueno ¿adivina qué?

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

32
00:01:27,599 --> 00:01:29,009
Un clase básicamente es:

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

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

35
00:01:35,352 --> 00:01:39,928
Para añadir una clase, necesitamos añadir un atributo de clase, como lo hicimos con "Id´s".

36
00:01:40,362 --> 00:01:44,705
En primer lugar, voy a borrar este "Id", porque lo voy a reemplazar.

37
00:01:44,705 --> 00:01:47,915
Ahora he colocado mi cursor en el principio de la etiqueta ".

38
00:01:47,915 --> 00:01:51,675
Voy a añadir un espacio y a escribir: 'class = "'

39
00:01:53,183 --> 00:01:55,333
Ahora tengo que escribir un nombre de clase.

40
00:01:55,333 --> 00:01:56,792
Uno lindo y descriptivo.

41
00:01:56,927 --> 00:01:59,294
Llamémosle "song-lyrics".

42
00:01:59,658 --> 00:02:01,449
Lo he tecleado ahí.

43
00:02:01,665 --> 00:02:04,335
¿Qué otros elementos deberían tener este nombre de clase?

44
00:02:04,416 --> 00:02:06,420
Bueno, todos los otros párrafos de la letra de la canción.

45
00:02:06,510 --> 00:02:09,154
Así que vamos hacia abajo en la página,

46
00:02:09,154 --> 00:02:12,777
y añadimos los atributos de clase a cada uno de los párrafos.

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

48
00:02:14,836 --> 00:02:18,003
Ok, genial.
Ahora estamos listos para añadir la regla CSS.

49
00:02:18,217 --> 00:02:20,539
Entonces regresamos a nuestra etiqueta "",

50
00:02:20,539 --> 00:02:24,574
y borramos el selector "id" que pusimos antes,

51
00:02:24,574 --> 00:02:25,772
porque lo estamos reemplazando.

52
00:02:26,157 --> 00:02:28,594
Y ahora tenemos que llegar a nuestro selector de clase.

53
00:02:28,931 --> 00:02:34,039
Bueno, para iniciar un selector de clase usamos un punto.

54
00:02:34,426 --> 00:02:39,027
Luego escribimos el nombre de clase "song-lyrics",

55
00:02:39,027 --> 00:02:46,415
y luego como siempre:
una llave, la propiedad, dos puntos, el valor

56
00:02:46,633 --> 00:02:47,575
¡Tan tan!

57
00:02:47,821 --> 00:02:51,007
Toda la letra de la canción tiene un color de fondo amarillo.

58
00:02:51,343 --> 00:02:55,143
¿Qué pasaría si ponemos esta "s" en mayúsculas?

59
00:02:55,240 --> 00:02:56,398
No funciona.

60
00:02:56,491 --> 00:02:58,950
Porque los nombres de clases distinguen entre mayúsculas y minúsculas.

61
00:02:58,966 --> 00:03:01,771
Es importante cuáles letras están mayúsculas y cuáles en minúsculas,

62
00:03:01,771 --> 00:03:03,558
como con los "Id´s".

63
00:03:04,323 --> 00:03:08,295
¿Qué pasaría si usamos el signo # en lugar de un punto?

64
00:03:08,542 --> 00:03:09,666
No funciona.

65
00:03:09,774 --> 00:03:13,085
Porque entonces el navegador piensa que "song-lyrics" es un "Id",

66
00:03:13,085 --> 00:03:16,411
y cuando no lo encuentra en el atributo "Id" de "song-lyrics",

67
00:03:16,411 --> 00:03:17,584
falla.

68
00:03:18,102 --> 00:03:24,512
¿Qué pasaría si ponemos espacios en nuestros nombres de clases?

69
00:03:25,248 --> 00:03:27,477
Bueno, tampoco funciona,

70
00:03:27,477 --> 00:03:29,997
porque las clases no pueden tener espacios en blanco.

71
00:03:30,192 --> 00:03:31,649
Y como lo veremos después,

72
00:03:31,649 --> 00:03:34,972
un espacio significa algo muy específico en el mundo de CSS.

73
00:03:35,868 --> 00:03:38,776
Así que arreglemos esto como estaba.

74
00:03:39,523 --> 00:03:41,110
Entonces, una vez más:

75
00:03:41,110 --> 00:03:43,387
Cuando queremos añadir una clase,

76
00:03:43,387 --> 00:03:45,589
ideamos un nombre de clase,

77
00:03:45,589 --> 00:03:49,000
y lo añadimos al atributo clase en el HTML.

78
00:03:49,248 --> 00:03:51,317
Luego escribimos una regla de estilo,

79
00:03:51,317 --> 00:03:54,691
empezando con un punto y luego el nombre de clase.

80
00:03:55,216 --> 00:03:58,428
¡Y ahora tu CSS puede tener clase!