Médiaforma

Une classe sélective

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez vu qu’une classe pouvait être appliquée à plusieurs balises en affectant le nom de la classe à l’attribut class des balises concernées. Ici, je vais vous montrer comment restreindre le champ d’action d’une classe.

Le document HTML est des plus classiques. Il fait référence à la feuille de styles externe styles3.css. Le corps du document contient un titre de niveau 2 et de classe rouge, un paragraphe de classe rouge et un simple texte sans classe.

Maintenant, nous allons définir une classe rouge spécifique à la balise <h2> et une autre classe rouge spécifique à la balise <p>. Pour cela, il suffit de faire précéder le point décimal de la classe par le nom de la balise concernée.

C’est ainsi que nous définissons la classe p.rouge qui sera dédiée à la balise <p> et la classe h2.rouge qui sera dédiée à la balise <h2>. Pour bien montrer que les caractéristiques de ces deux classes sont différentes, la propriété font-family (c’est-à-dire la police) de la classe p.rouge est initialisée avec la valeur Courrier New et celle de la classe h2.rouge avec la valeur fantasy. Remarquez au passage les guillemets qui entourent le nom de la police dans la classe p.rouge. Ils sont nécessaires parce que le nom de la police contient un espace. Enfin, la taille des caractères de classe h2.rouge est fixée à 30 pixels avec la propriété font-size.

Affichons ce document dans un navigateur.  Comme vous pouvez le voir, la classe rouge est bien différente lorsqu’elle est appliquée aux balises <h2> et <p>.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply