Miremos nuestra página tiene estos títulos principales tiene este párrafo que describe a los conejos y ahora de hecho tiene múltiples párrafos, con la letra de mi canción favorita sobre conejos La última vez, nosotros dimos estilo al primer párrafo usando el id Pero ahora que yo tengo múltiples párrafos con letras de canciones, yo quiero que todos tengan ese fondo de color amarillo ¿Como podriamos hacer eso usando lo que sabemos hasta el momento? La primera cosa que aprendimos como hacer fue seleccionar todas las etiquetas de un tipo particular, tal como con el selector 'p' pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones Nosotros necesitamos algo mas específico. Despues nosotros aprendimos como seleccionar etiquetas con un id particular, como seleccionando el párrafo con el id "rabbit-song". pero eso solo seleccionó el primer párrafo Nosotros no podemos adicionar ese id a los otros párrafos porque no nos es permitido usar el mismo id en múltiples etiquetas si nosotros queremos seleccionar los otros párrafos nosotros tendriamos que dar nuevos IDs a cada uno de ellos (como "song-lyrics2", y "song-lyrics3"), porque cada id debe ser único y entonces nosotros tendriamos que adicionar reglas para cada uno de ellos Podriamos hacer eso, pero, eso es mucho trabajo y cada vez que nosotros adicionaramos un nuevo verso a la canción, tendríamos que recordar adicionar otro ID al HTML y otro ID a las reglas de CSS y si nosostros adicionaramos cientos de versos, eso solo sería agotador bueno, adivina que? Hay una mejor manera, y esta es llamada "clases". una clase es basicamente: un modo de asignar un elemento particular a un grupo y tu puedes asignar tantos elementos como tu quieras a un grupo. Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs Primero, borraré este ID, dado que voy a reemplazarlo Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '', yo agregaré un espacio, y escribiré: class =" Ahora necesitamos inventarnos un nombre para la clase uno que sea descriptivo llamemoslo "song-lyrics". yo he tecleado eso allí dentro ¿ que otros elementos deberian tener este nombre de clase? bien, todos los otros párrafos con letras de canciones, asi que, iremos hacia abajo en la página y adicionaremos el atributo a cada una de las clases de párrafos ("song-lyrics") Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS asi que volvemos a arriba a nuestra etiqueta '' y borramos el selector de id que teniamos antes, porque estamos reemplazandolo. y ahora necesitamos dar con nuestro selector de clase bien, para comenzar un selector de clase, usamos un periodo, un punto. luego, escribimos el nombre de la clase adelante: song-lyrics, y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor. Ta-da! Todas las letras de canciones ahora tienen fondos amarillos. ¿Que pasaría si nosotros escribimos está s en mayúscula? No funciona, porque los nombre de clases distinguen entre mayúsculas y minúsculas es importante cuales letras están en mayúsculas y cuales en minúsculas tal como con los IDs. ¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)? No funciona, porque entonces el buscador piensa que "song-lyrics" es un ID, y cuando este no puede encontrar algo en el atributo ID de "song-lyrics" este se rinde. ¿Que pasaría si ponemos espacios en nuestros nombres de clases? bien, eso tampoco funciona porque las clases no pueden tener espacios y como encontraremos mas adelante un espacio significa algo muy especifico en el mundo de CSS Asi que, simplemente lo compondremos como estaba. Una vez mas: cuando queremos adicionar una clase, nosotros ideamos un nombre para la clases, y lo adicionamos a nuestro atributo en HTML luego escribimos una regla de estilo comenzando con un periodo(.) y luego escribiendo el nombre de clase y ahora tu CSS puede tener clase!