-
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!
