Cambiar el color del elemento H2

En la codificación, a menudo hay muchas soluciones diferentes para un problema dado. Esto es especialmente cierto cuando se trata de diseñar un elemento HTML.

Una de las cosas más fáciles de cambiar es el color del texto. Pero a veces parece que nada de lo que intentas está funcionando:

 h2 .red-text { color: red; }  

CatPhotoApp

Entonces, ¿cómo se puede cambiar el color del elemento H2 a rojo?

Opción n. ° 1: CSS en línea

Una forma sería usar CSS en línea para diseñar el elemento directamente.

Al igual que con los otros métodos, el formato es importante. Eche un vistazo nuevamente al código de arriba:

CatPhotoApp

Para usar el estilo en línea, asegúrese de usar el styleatributo y envolver las propiedades y los valores entre comillas dobles ("):

CatPhotoApp

Opción # 2: Usa selectores CSS

En lugar de utilizar el estilo en línea, puede separar su HTML, o la estructura y el contenido de la página, del estilo o CSS.

Primero, deshazte del CSS en línea:

 h2 .red-text { color: red; }  

CatPhotoApp

Pero debe tener cuidado con el selector de CSS que usa. Eche un vistazo al elemento:

h2 .red-text { color: red; }

Cuando hay un espacio, el selector h2 .red-textle dice al navegador que apunte al elemento con la clase red-textque es hija h2. Sin embargo, el elemento H2 no tiene un hijo: está tratando de diseñar el elemento H2 en sí.

Para solucionar esto, elimine el espacio:

h2.red-text { color: red; }

O simplemente apunte a la red-textclase directamente:

.red-text { color: red; }