WEBVTT

00:00:00.326 --> 00:00:02.079
Miremos nuestra página

00:00:02.284 --> 00:00:04.540
tiene estos títulos principales

00:00:04.540 --> 00:00:07.581
tiene este párrafo que describe a los conejos

00:00:07.581 --> 00:00:10.588
y ahora de hecho tiene múltiples párrafos,

00:00:10.588 --> 00:00:13.416
con la letra de mi canción favorita sobre conejos

00:00:13.543 --> 00:00:17.554
La última vez, nosotros dimos estilo al primer párrafo usando el id

00:00:17.857 --> 00:00:21.016
Pero ahora que yo tengo múltiples párrafos con letras de canciones,

00:00:21.016 --> 00:00:24.083
yo quiero que todos tengan ese fondo de color amarillo

00:00:24.613 --> 00:00:27.692
¿Como podriamos hacer eso usando lo que sabemos hasta el momento?

00:00:28.221 --> 00:00:30.374
La primera cosa que aprendimos como hacer

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

00:00:33.002 --> 00:00:34.659
tal como con el selector 'p'

00:00:34.886 --> 00:00:39.120
pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones

00:00:39.226 --> 00:00:41.290
Nosotros necesitamos algo mas específico.

00:00:41.507 --> 00:00:44.898
Despues nosotros aprendimos como seleccionar etiquetas con un id particular,

00:00:44.898 --> 00:00:48.140
como seleccionando el párrafo con el id 
"rabbit-song".

00:00:48.368 --> 00:00:50.920
pero eso solo seleccionó el primer párrafo

00:00:51.120 --> 00:00:53.725
Nosotros no podemos adicionar ese id a los otros párrafos

00:00:53.725 --> 00:00:57.657
porque no nos es permitido usar el mismo id en múltiples etiquetas

00:00:57.867 --> 00:01:00.202
si nosotros queremos seleccionar los otros párrafos

00:01:00.202 --> 00:01:02.881
nosotros tendriamos que dar nuevos IDs a cada uno de ellos

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

00:01:05.717 --> 00:01:07.358
porque cada id debe ser único

00:01:07.358 --> 00:01:09.808
y entonces nosotros tendriamos que adicionar reglas para cada uno de ellos

00:01:09.808 --> 00:01:12.398
Podriamos hacer eso, pero, eso es mucho trabajo

00:01:12.398 --> 00:01:14.691
y cada vez que nosotros adicionaramos un nuevo verso a la canción,

00:01:14.691 --> 00:01:17.279
tendríamos que recordar adicionar otro ID al HTML

00:01:17.279 --> 00:01:19.018
y otro ID a las reglas de CSS

00:01:19.018 --> 00:01:22.830
y si nosostros adicionaramos cientos de versos, eso solo sería agotador

00:01:22.980 --> 00:01:24.315
bueno, adivina que?

00:01:24.492 --> 00:01:27.383
Hay una mejor manera, y esta es llamada "clases".

00:01:27.599 --> 00:01:29.009
una clase es basicamente:

00:01:29.009 --> 00:01:32.067
un modo de asignar un elemento particular a un grupo

00:01:32.162 --> 00:01:35.150
y tu puedes asignar tantos elementos como tu quieras a un grupo.

00:01:35.352 --> 00:01:39.928
Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs

00:01:40.362 --> 00:01:44.705
Primero, borraré este ID, dado que voy a reemplazarlo

00:01:44.705 --> 00:01:47.915
Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '',

00:01:47.915 --> 00:01:53.185
yo agregaré un espacio, y escribiré: class ="

00:01:53.185 --> 00:01:55.448
Ahora necesitamos inventarnos un nombre para la clase

00:01:55.448 --> 00:01:56.917
uno que sea descriptivo

00:01:56.917 --> 00:01:59.664
llamemoslo "song-lyrics".

00:01:59.664 --> 00:02:01.678
yo he tecleado eso allí dentro

00:02:01.678 --> 00:02:04.423
¿ que otros elementos deberian tener este nombre de clase?

00:02:04.423 --> 00:02:06.498
bien, todos los otros párrafos con letras de canciones,

00:02:06.498 --> 00:02:09.153
asi que, iremos hacia abajo en la página

00:02:09.153 --> 00:02:13.057
y adicionaremos el atributo a cada una de las clases de párrafos

00:02:13.057 --> 00:02:14.833
("song-lyrics")

00:02:14.833 --> 00:02:18.223
Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS

00:02:18.223 --> 00:02:20.540
asi que volvemos a arriba a nuestra etiqueta ''

00:02:20.540 --> 00:02:24.581
y borramos el selector de id que teniamos antes,

00:02:24.581 --> 00:02:26.157
porque estamos reemplazandolo.

00:02:26.157 --> 00:02:28.925
y ahora necesitamos dar con nuestro selector de clase

00:02:28.925 --> 00:02:34.442
bien, para comenzar un selector de clase, usamos un periodo, un punto.

00:02:34.442 --> 00:02:39.030
luego, escribimos el nombre de la clase adelante: song-lyrics,

00:02:39.030 --> 00:02:46.631
y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor.

00:02:46.631 --> 00:02:47.819
Ta-da!

00:02:47.819 --> 00:02:51.341
Todas las letras de canciones ahora tienen fondos amarillos.

00:02:51.341 --> 00:02:55.231
¿Que pasaría si nosotros escribimos está s en mayúscula?

00:02:55.231 --> 00:02:56.491
No funciona,

00:02:56.491 --> 00:02:58.969
porque los nombre de clases distinguen entre mayúsculas y minúsculas

00:02:58.969 --> 00:03:01.768
es importante cuales letras están en mayúsculas y cuales en minúsculas

00:03:01.768 --> 00:03:04.323
tal como con los IDs.

00:03:04.323 --> 00:03:08.520
¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)?

00:03:08.520 --> 00:03:09.772
No funciona,

00:03:09.772 --> 00:03:13.086
porque entonces el buscador piensa que "song-lyrics" es un ID,

00:03:13.086 --> 00:03:16.407
y cuando este no puede encontrar algo en el atributo ID de "song-lyrics"

00:03:16.407 --> 00:03:18.113
este se rinde.

00:03:18.113 --> 00:03:25.246
¿Que pasaría si ponemos espacios en nuestros nombres de clases?

00:03:25.246 --> 00:03:27.466
bien, eso tampoco funciona

00:03:27.466 --> 00:03:30.185
porque las clases no pueden tener espacios

00:03:30.185 --> 00:03:31.635
y como encontraremos mas adelante

00:03:31.635 --> 00:03:35.872
un espacio significa algo muy especifico en el mundo de CSS

00:03:35.872 --> 00:03:39.485
Asi que, simplemente lo compondremos como estaba.

00:03:39.485 --> 00:03:41.113
Una vez mas:

00:03:41.113 --> 00:03:43.390
cuando queremos adicionar una clase,

00:03:43.390 --> 00:03:45.547
nosotros ideamos un nombre para la clases,

00:03:45.547 --> 00:03:49.270
y lo adicionamos a nuestro atributo en HTML

00:03:49.679 --> 00:03:51.300
luego escribimos una regla de estilo

00:03:51.491 --> 00:03:54.664
comenzando con un periodo(.) y luego escribiendo el nombre de clase

00:03:55.629 --> 00:03:58.610
y ahora tu CSS puede tener clase!