Usando múltiples clases en CSS

Hemos logrado hacer muchas cosas, con los selectores que hemos visto en CSS:

seleccionando elementos por nombre de etiqueta, por Id, por nombre de clase.

Vamos a revisarlos por un momento en esta página web.

Esta página web es sobre donas.

Y tiene un encabezado, párrafos,

y algunos de los párrafos son cortos, de una sóla línea.

El CSS empieza con una regla sobre seleccionar todas las etiquetas "" de la página web,

y asignarles un tipo de letra "sans-serif".

La voy a cambiar a "monospace" para que puedan ver todo lo que está seleccionado.

¿Lo vieron?

La siguiente regla selecciona el elemento que tiene un "Id" igual a "donut-header".

Y sabemos que es un "Id" porque la regla inicia con el símbolo numeral "#".

Como el "Id" es muy descriptivo,

me suena a que se ha seleccionado el encabezado grande de arriba,

y se ha cambiado la fuente.

Pero voy a desplazarme hacia abajo para confirmar que "" tiene ese "Id".

Sí, aquí está.

La última regla selecciona todos los elementos que tienen "fact" como nombre de clase.

Y sabemos que estamos buscando una clase porque esta regla empieza con un punto.

Para descubrir cuáles elementos tienen ese nombre de clase,

puedo ver lo que la regla está haciendo,

añadiendo un borde en la parte de arriba y de abajo y algo de relleno "padding",

o puedo buscar dentro de mi HTML el nombre de la clase.

Puedo ver el nombre de la clase en este párrafo,

y en este párrafo,

los dos párrafos que contienen información de una línea,

y es por eso que tienen el borde.

Los nombres de clases son geniales,

porque nos permiten usar los mismos estilos en múltiples elementos.

Pero hay más que podemos hacer con los nombres de clases,

y es lo que les voy a mostrar ahora.

Entonces, tenemos una página web sobre donas,

pero las donas en realidad no son saludables para ti.

Puede que sean una de las cosas menos sanas para ti.

Y también son adictivas, por toda esa azúcar que contienen.

Así que si vamos a tener una página que hable de ellas,

probablemente deberíamos advertir a la gente sobre lo poco saludable que son.

¿Qué tal si hacemos roja esta clase "fact", para realmente mostrar que es una advertencia?

¿Cómo hacemos eso?

Bueno, podríamos empezar añadiendo la propiedad "color" a la regla "fact" de CSS,

y ver qué pasa.

Pero esto hace que las dos "fact" sean rojas, y la segunda "fact" no es una advertencia,

es sólo una aclaración de ortografía.

Así que no queremos que sea roja.

Podríamos añadir un "Id",

pero entonces si quisiéramos colorear otras cosas más tarde que son advertencias

y añadir más advertencias,

tendríamos que añadir más y más "Id´s", y reglas para esos "Id´s".

En un caso como éste, lo mejor es añadir otra clase a la etiqueta "".

Los navegadores en realidad nos permiten añadir las clases que queramos a una etiqueta.

Para hacer eso, simplemente ponemos el cursor después del último nombre de clase,

ponemos un espacio, y luego escribimos un nombre nuevo de clase, como "warning".

Ahora podemos hacer una regla para "warning",

y mover esta propiedad de color a esta regla.

Y ahora la clase "fact" de arriba es roja, y la segunda no.

Hermoso.

Podemos poner el nombre de clase en más elementos, como antes.

Tal vez queremos colorear el texto "deep fried",

lo queremos colorear de rojo porque "deep fried" (fritas) es algo

a menudo asociado con cosas que no son saludables.

Así que podemos añadir la clase "warning",

también roja.

Ahora, fíjate que esta advertencia de aquí está de color rojo,

y también tiene un borde arriba y un borde abajo.

Y eso es lo que pasa cuando usamos muchas clases,

los navegadores van a revisar todas las reglas que se aplican a ellas,

y van a aplicar todos los estilos.

Debemos ser cuidadosos cuando usamos colores para transmitir significados,

porque algunas personas no distinguen los colores.

Hay algunas personas que difícilmente pueden notar la diferencia

entre rojo y negro, tal vez tú seas una de ellas.

Así que déjenme cambiar nuestra clase para hacerla más evidente para todas las personas.

Cambiaremos este color y el color de fondo,

porque cualquier persona podría identificar que un elemento tiene un color de fondo.

El rojo y negro tienen un contraste muy bajo.

Y el contraste también es importante para hacer que nuestra página sea legible para todos.

Así que voy a cambiar el color a blanco.

Ok, ahora tenemos más contraste,

y un fondo rojo para las personas que pueden ver el rojo.

Y como estamos usando clases las dos etiquetas "warning" tienen los mismos estilos.

Ahora, gracias a la flexibilidad de las clases de CSS,

podemos salvar al mundo entero de las donas.