Changer la couleur de l'élément H2

Dans le codage, il existe souvent de nombreuses solutions différentes à un problème donné. Cela est particulièrement vrai lorsqu'il s'agit de styliser un élément HTML.

L'une des choses les plus faciles à changer est la couleur du texte. Mais parfois, il semble que rien de ce que vous essayez ne fonctionne:

 h2 .red-text { color: red; }  

CatPhotoApp

Alors, comment pouvez-vous changer la couleur de l'élément H2 en rouge?

Option n ° 1: CSS en ligne

Une façon serait d'utiliser le CSS en ligne pour styliser l'élément directement.

Comme avec les autres méthodes, le formatage est important. Regardez à nouveau le code ci-dessus:

CatPhotoApp

Pour utiliser le style en ligne, assurez-vous d'utiliser l' styleattribut et de placer les propriétés et les valeurs entre guillemets ("):

CatPhotoApp

Option n ° 2: utiliser les sélecteurs CSS

Plutôt que d'utiliser le style en ligne, vous pouvez séparer votre HTML, ou la structure et le contenu de la page, du style ou du CSS.

Tout d'abord, débarrassez-vous du CSS en ligne:

 h2 .red-text { color: red; }  

CatPhotoApp

Mais vous devez faire attention au sélecteur CSS que vous utilisez. Jetez un œil à l' élément:

h2 .red-text { color: red; }

Lorsqu'il y a un espace, le sélecteur h2 .red-textindique au navigateur de cibler l'élément avec la classe red-textenfant de h2. Cependant, l'élément H2 n'a pas d'enfant - vous essayez de styliser l'élément H2 lui-même.

Pour résoudre ce problème, supprimez l'espace:

h2.red-text { color: red; }

Ou ciblez simplement la red-textclasse directement:

.red-text { color: red; }