Vamos a echarle un vistazo a nuestra página web.
Tiene estos encabezados,
tiene estos párrafos que describen conejos,
y aquí en realidad tienen muchos párrafos,
con la letra de mi canción favorita sobre conejos.
La vez anterior, estilizamos el primer párrafo de la canción usando el "Id".
Pero ahora que tengo muchos párrafos con la letra de la canción,
quiero que todos tengan el color de fondo amarillo.
¿Cómo podemos hacer eso usando lo que sabemos hasta el momento?
Lo primero que aprendimos a hacer
fue seleccionar todas las etiquetas de un tipo particular,
como con el selector "p".
Pero eso coloreaba todos los párrafos, no sólo los párrafos con las letras de las canciones.
Necesitamos algo más específico.
Luego aprendimos cómo seleccionar etiquetas con un "Id" particular,
como cuando seleccionamos el párrafo con el "Id": "rabbits-song".
Pero eso sólo selecciona el primer párrafo.
No podemos añadir ese "Id" a los otros párrafos,
porque no está permitido usar el mismo "Id" en múltiples etiquetas.
Si queremos seleccionar los otros párrafos,
le tendríamos que dar a cada uno de ellos nuevos "Id´s"
(como "song-lyrics2" y "song-lyrics3"),
porque cada "Id" debe ser único.
Y luego tendríamos que añadir reglas a cada uno de ellos.
Podríamos hacer eso. Pero, ¡es mucho trabajo!
Y cada vez que añadimos un nuevo verso a la canción,
tendríamos que recordar añadir otro "Id" al HTML,
y otro "Id" a las reglas CSS,
y si añadimos cientos de versos, eso sería abrumador.
Bueno ¿adivina qué?
Hay una mejor manera, llamada "clases".
Un clase básicamente es:
una manera de asignar un elemento particular a un grupo.
Y puedes asignar tantos elementos como quieras a un grupo.
Para añadir una clase, necesitamos añadir un atributo de clase, como lo hicimos con "Id´s".
En primer lugar, voy a borrar este "Id", porque lo voy a reemplazar.
Ahora he colocado mi cursor en el principio de la etiqueta ".
Voy a añadir un espacio y a escribir: 'class = "'
Ahora tengo que escribir un nombre de clase.
Uno lindo y descriptivo.
Llamémosle "song-lyrics".
Lo he tecleado ahí.
¿Qué otros elementos deberían tener este nombre de clase?
Bueno, todos los otros párrafos de la letra de la canción.
Así que vamos hacia abajo en la página,
y añadimos los atributos de clase a cada uno de los párrafos.
("song-lyrics")
Ok, genial. Ahora estamos listos para añadir la regla CSS.
Entonces regresamos a nuestra etiqueta "",
y borramos el selector "id" que pusimos antes,
porque lo estamos reemplazando.
Y ahora tenemos que llegar a nuestro selector de clase.
Bueno, para iniciar un selector de clase usamos un punto.
Luego escribimos el nombre de clase "song-lyrics",
y luego como siempre: una llave, la propiedad, dos puntos, el valor
¡Tan tan!
Toda la letra de la canción tiene un color de fondo amarillo.
¿Qué pasaría si ponemos esta "s" en mayúsculas?
No funciona.
Porque los nombres de clases distinguen entre mayúsculas y minúsculas.
Es importante cuáles letras están mayúsculas y cuáles en minúsculas,
como con los "Id´s".
¿Qué pasaría si usamos el signo # en lugar de un punto?
No funciona.
Porque entonces el navegador piensa que "song-lyrics" es un "Id",
y cuando no lo encuentra en el atributo "Id" de "song-lyrics",
falla.
¿Qué pasaría si ponemos espacios en nuestros nombres de clases?
Bueno, tampoco funciona,
porque las clases no pueden tener espacios en blanco.
Y como lo veremos después,
un espacio significa algo muy específico en el mundo de CSS.
Así que arreglemos esto como estaba.
Entonces, una vez más:
Cuando queremos añadir una clase,
ideamos un nombre de clase,
y lo añadimos al atributo clase en el HTML.
Luego escribimos una regla de estilo,
empezando con un punto y luego el nombre de clase.
¡Y ahora tu CSS puede tener clase!