0:00:00.326,0:00:02.079
Vamos a echarle un vistazo a nuestra página web.

0:00:02.284,0:00:04.540
Tiene estos encabezados,

0:00:04.540,0:00:07.581
tiene estos párrafos que describen conejos,

0:00:07.581,0:00:10.588
y aquí en realidad tienen muchos párrafos,

0:00:10.588,0:00:13.416
con la letra de mi canción favorita sobre conejos.

0:00:13.543,0:00:17.554
La vez anterior, estilizamos el primer párrafo de la canción usando el "Id".

0:00:17.857,0:00:21.016
Pero ahora que tengo muchos párrafos con la letra de la canción,

0:00:21.016,0:00:24.083
quiero que todos tengan el color de fondo amarillo.

0:00:24.613,0:00:27.692
¿Cómo podemos hacer eso usando lo que sabemos hasta el momento?

0:00:28.221,0:00:30.374
Lo primero que aprendimos a hacer

0:00:30.374,0:00:33.002
fue seleccionar todas las etiquetas de un tipo particular,

0:00:33.002,0:00:34.659
como con el selector "p".

0:00:34.886,0:00:39.120
Pero eso coloreaba todos los párrafos, no sólo los párrafos con las letras de las canciones.

0:00:39.226,0:00:41.290
Necesitamos algo más específico.

0:00:41.507,0:00:44.898
Luego aprendimos cómo seleccionar etiquetas con un "Id" particular,

0:00:44.898,0:00:48.140
como cuando seleccionamos el párrafo con el "Id": "rabbits-song".

0:00:48.368,0:00:50.920
Pero eso sólo selecciona el primer párrafo.

0:00:51.120,0:00:53.725
No podemos añadir ese "Id" a los otros párrafos,

0:00:53.725,0:00:57.657
porque no está permitido usar el mismo "Id" en múltiples etiquetas.

0:00:57.867,0:01:00.202
Si queremos seleccionar los otros párrafos,

0:01:00.202,0:01:02.881
le tendríamos que dar a cada uno de ellos nuevos "Id´s"

0:01:02.881,0:01:05.717
(como "song-lyrics2" y "song-lyrics3"),

0:01:05.717,0:01:07.358
porque cada "Id" debe ser único.

0:01:07.358,0:01:09.808
Y luego tendríamos que añadir reglas a cada uno de ellos.

0:01:09.808,0:01:12.398
Podríamos hacer eso.[br]Pero, ¡es mucho trabajo!

0:01:12.398,0:01:14.691
Y cada vez que añadimos un nuevo verso a la canción,

0:01:14.691,0:01:17.279
tendríamos que recordar añadir otro "Id" al HTML,

0:01:17.279,0:01:19.018
y otro "Id" a las reglas CSS,

0:01:19.018,0:01:22.830
y si añadimos cientos de versos, eso sería abrumador.

0:01:22.980,0:01:24.315
Bueno ¿adivina qué?

0:01:24.492,0:01:27.383
Hay una mejor manera, llamada "clases".

0:01:27.599,0:01:29.009
Un clase básicamente es:

0:01:29.009,0:01:32.067
una manera de asignar un elemento particular a un grupo.

0:01:32.162,0:01:35.150
Y puedes asignar tantos elementos como quieras a un grupo.

0:01:35.352,0:01:39.928
Para añadir una clase, necesitamos añadir un atributo de clase, como lo hicimos con "Id´s".

0:01:40.362,0:01:44.705
En primer lugar, voy a borrar este "Id", porque lo voy a reemplazar.

0:01:44.705,0:01:47.915
Ahora he colocado mi cursor en el principio de la etiqueta ".

0:01:47.915,0:01:51.675
Voy a añadir un espacio y a escribir: 'class = "'

0:01:53.183,0:01:55.333
Ahora tengo que escribir un nombre de clase.

0:01:55.333,0:01:56.792
Uno lindo y descriptivo.

0:01:56.927,0:01:59.294
Llamémosle "song-lyrics".

0:01:59.658,0:02:01.449
Lo he tecleado ahí.

0:02:01.665,0:02:04.335
¿Qué otros elementos deberían tener este nombre de clase?

0:02:04.416,0:02:06.420
Bueno, todos los otros párrafos de la letra de la canción.

0:02:06.510,0:02:09.154
Así que vamos hacia abajo en la página,

0:02:09.154,0:02:12.777
y añadimos los atributos de clase a cada uno de los párrafos.

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

0:02:14.836,0:02:18.003
Ok, genial.[br]Ahora estamos listos para añadir la regla CSS.

0:02:18.217,0:02:20.539
Entonces regresamos a nuestra etiqueta "",

0:02:20.539,0:02:24.574
y borramos el selector "id" que pusimos antes,

0:02:24.574,0:02:25.772
porque lo estamos reemplazando.

0:02:26.157,0:02:28.594
Y ahora tenemos que llegar a nuestro selector de clase.

0:02:28.931,0:02:34.039
Bueno, para iniciar un selector de clase usamos un punto.

0:02:34.426,0:02:39.027
Luego escribimos el nombre de clase "song-lyrics",

0:02:39.027,0:02:46.415
y luego como siempre:[br]una llave, la propiedad, dos puntos, el valor

0:02:46.633,0:02:47.575
¡Tan tan!

0:02:47.821,0:02:51.007
Toda la letra de la canción tiene un color de fondo amarillo.

0:02:51.343,0:02:55.143
¿Qué pasaría si ponemos esta "s" en mayúsculas?

0:02:55.240,0:02:56.398
No funciona.

0:02:56.491,0:02:58.950
Porque los nombres de clases distinguen entre mayúsculas y minúsculas.

0:02:58.966,0:03:01.771
Es importante cuáles letras están mayúsculas y cuáles en minúsculas,

0:03:01.771,0:03:03.558
como con los "Id´s".

0:03:04.323,0:03:08.295
¿Qué pasaría si usamos el signo # en lugar de un punto?

0:03:08.542,0:03:09.666
No funciona.

0:03:09.774,0:03:13.085
Porque entonces el navegador piensa que "song-lyrics" es un "Id",

0:03:13.085,0:03:16.411
y cuando no lo encuentra en el atributo "Id" de "song-lyrics",

0:03:16.411,0:03:17.584
falla.

0:03:18.102,0:03:24.512
¿Qué pasaría si ponemos espacios en nuestros nombres de clases?

0:03:25.248,0:03:27.477
Bueno, tampoco funciona,

0:03:27.477,0:03:29.997
porque las clases no pueden tener espacios en blanco.

0:03:30.192,0:03:31.649
Y como lo veremos después,

0:03:31.649,0:03:34.972
un espacio significa algo muy específico en el mundo de CSS.

0:03:35.868,0:03:38.776
Así que arreglemos esto como estaba.

0:03:39.523,0:03:41.110
Entonces, una vez más:

0:03:41.110,0:03:43.387
Cuando queremos añadir una clase,

0:03:43.387,0:03:45.589
ideamos un nombre de clase,

0:03:45.589,0:03:49.000
y lo añadimos al atributo clase en el HTML.

0:03:49.248,0:03:51.317
Luego escribimos una regla de estilo,

0:03:51.317,0:03:54.691
empezando con un punto y luego el nombre de clase.

0:03:55.216,0:03:58.428
¡Y ahora tu CSS puede tener clase!