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!