WEBVTT 00:00:00.326 --> 00:00:02.079 Vamos a echarle un vistazo a nuestra página web. 00:00:02.284 --> 00:00:04.540 Tiene estos encabezados, 00:00:04.540 --> 00:00:07.581 tiene estos párrafos que describen conejos, 00:00:07.581 --> 00:00:10.588 y aquí en realidad tienen muchos 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 vez anterior, estilizamos el primer párrafo de la canción usando el "Id". 00:00:17.857 --> 00:00:21.016 Pero ahora que tengo muchos párrafos con la letra de la canción, 00:00:21.016 --> 00:00:24.083 quiero que todos tengan el color de fondo amarillo. 00:00:24.613 --> 00:00:27.692 ¿Cómo podemos hacer eso usando lo que sabemos hasta el momento? 00:00:28.221 --> 00:00:30.374 Lo primero que aprendimos a 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 como con el selector "p". 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. 00:00:39.226 --> 00:00:41.290 Necesitamos algo más específico. 00:00:41.507 --> 00:00:44.898 Luego aprendimos cómo seleccionar etiquetas con un "Id" particular, 00:00:44.898 --> 00:00:48.140 como cuando seleccionamos el párrafo con el "Id": "rabbits-song". 00:00:48.368 --> 00:00:50.920 Pero eso sólo selecciona el primer párrafo. 00:00:51.120 --> 00:00:53.725 No podemos añadir ese "Id" a los otros párrafos, 00:00:53.725 --> 00:00:57.657 porque no está permitido usar el mismo "Id" en múltiples etiquetas. 00:00:57.867 --> 00:01:00.202 Si queremos seleccionar los otros párrafos, 00:01:00.202 --> 00:01:02.881 le tendríamos que dar a cada uno de ellos nuevos "Id´s" 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 luego tendríamos que añadir reglas a cada uno de ellos. 00:01:09.808 --> 00:01:12.398 Podríamos hacer eso. Pero, ¡es mucho trabajo! 00:01:12.398 --> 00:01:14.691 Y cada vez que añadimos un nuevo verso a la canción, 00:01:14.691 --> 00:01:17.279 tendríamos que recordar añadir otro "Id" al HTML, 00:01:17.279 --> 00:01:19.018 y otro "Id" a las reglas CSS, 00:01:19.018 --> 00:01:22.830 y si añadimos cientos de versos, eso sería abrumador. 00:01:22.980 --> 00:01:24.315 Bueno ¿adivina qué? 00:01:24.492 --> 00:01:27.383 Hay una mejor manera, llamada "clases". 00:01:27.599 --> 00:01:29.009 Un clase básicamente es: 00:01:29.009 --> 00:01:32.067 una manera de asignar un elemento particular a un grupo. 00:01:32.162 --> 00:01:35.150 Y puedes asignar tantos elementos como quieras a un grupo. 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". 00:01:40.362 --> 00:01:44.705 En primer lugar, voy a borrar este "Id", porque lo voy a reemplazar. 00:01:44.705 --> 00:01:47.915 Ahora he colocado mi cursor en el principio de la etiqueta ". 00:01:47.915 --> 00:01:51.675 Voy a añadir un espacio y a escribir: 'class = "' 00:01:53.183 --> 00:01:55.333 Ahora tengo que escribir un nombre de clase. 00:01:55.333 --> 00:01:56.792 Uno lindo y descriptivo. 00:01:56.927 --> 00:01:59.294 Llamémosle "song-lyrics". 00:01:59.658 --> 00:02:01.449 Lo he tecleado ahí. 00:02:01.665 --> 00:02:04.335 ¿Qué otros elementos deberían tener este nombre de clase? 00:02:04.416 --> 00:02:06.420 Bueno, todos los otros párrafos de la letra de la canción. 00:02:06.510 --> 00:02:09.154 Así que vamos hacia abajo en la página, 00:02:09.154 --> 00:02:12.777 y añadimos los atributos de clase a cada uno de los párrafos. 00:02:13.061 --> 00:02:14.540 ("song-lyrics") 00:02:14.836 --> 00:02:18.003 Ok, genial. Ahora estamos listos para añadir la regla CSS. 00:02:18.217 --> 00:02:20.539 Entonces regresamos a nuestra etiqueta "", 00:02:20.539 --> 00:02:24.574 y borramos el selector "id" que pusimos antes, 00:02:24.574 --> 00:02:25.772 porque lo estamos reemplazando. 00:02:26.157 --> 00:02:28.594 Y ahora tenemos que llegar a nuestro selector de clase. 00:02:28.931 --> 00:02:34.039 Bueno, para iniciar un selector de clase usamos un punto. 00:02:34.426 --> 00:02:39.027 Luego escribimos el nombre de clase "song-lyrics", 00:02:39.027 --> 00:02:46.415 y luego como siempre: una llave, la propiedad, dos puntos, el valor 00:02:46.633 --> 00:02:47.575 ¡Tan tan! 00:02:47.821 --> 00:02:51.007 Toda la letra de la canción tiene un color de fondo amarillo. 00:02:51.343 --> 00:02:55.143 ¿Qué pasaría si ponemos esta "s" en mayúsculas? 00:02:55.240 --> 00:02:56.398 No funciona. 00:02:56.491 --> 00:02:58.950 Porque los nombres de clases distinguen entre mayúsculas y minúsculas. 00:02:58.966 --> 00:03:01.771 Es importante cuáles letras están mayúsculas y cuáles en minúsculas, 00:03:01.771 --> 00:03:03.558 como con los "Id´s". 00:03:04.323 --> 00:03:08.295 ¿Qué pasaría si usamos el signo # en lugar de un punto? 00:03:08.542 --> 00:03:09.666 No funciona. 00:03:09.774 --> 00:03:13.085 Porque entonces el navegador piensa que "song-lyrics" es un "Id", 00:03:13.085 --> 00:03:16.411 y cuando no lo encuentra en el atributo "Id" de "song-lyrics", 00:03:16.411 --> 00:03:17.584 falla. 00:03:18.102 --> 00:03:24.512 ¿Qué pasaría si ponemos espacios en nuestros nombres de clases? 00:03:25.248 --> 00:03:27.477 Bueno, tampoco funciona, 00:03:27.477 --> 00:03:29.997 porque las clases no pueden tener espacios en blanco. 00:03:30.192 --> 00:03:31.649 Y como lo veremos después, 00:03:31.649 --> 00:03:34.972 un espacio significa algo muy específico en el mundo de CSS. 00:03:35.868 --> 00:03:38.776 Así que arreglemos esto como estaba. 00:03:39.523 --> 00:03:41.110 Entonces, una vez más: 00:03:41.110 --> 00:03:43.387 Cuando queremos añadir una clase, 00:03:43.387 --> 00:03:45.589 ideamos un nombre de clase, 00:03:45.589 --> 00:03:49.000 y lo añadimos al atributo clase en el HTML. 00:03:49.248 --> 00:03:51.317 Luego escribimos una regla de estilo, 00:03:51.317 --> 00:03:54.691 empezando con un punto y luego el nombre de clase. 00:03:55.216 --> 00:03:58.428 ¡Y ahora tu CSS puede tener clase!