Médiaforma

Les classes CSS

Print Friendly

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

Une classe CSS permet de modifier les caractéristiques d’une balise en fonction de son attribut class.

Pour mieux comprendre de quoi il est question, nous allons raisonner sur un exemple. Trois balises <h2> sont ajoutées au document HTML. La première a un attribut class initialisé à rouge, la deuxième a un attribut class initialisé à noir et la troisième a un attribut class initialisé à vert. Plus simplement, on dira que la première balise <h2> est de classe rouge, la deuxième de classe noir et la troisième de classe vert.

Affichons le document dans un navigateur. Les trois titres H2 apparaissent en noir. Si vous trouvez cela étrange, interrogez-vous : est-ce qu’il ne manque pas un peu de code CSS pour obtenir les couleurs demandées ? Bien sûr que si : il faut définir les classes rouge, noir et vert dans le fichier styles2.css (puisque c’est ce fichier qui est spécifié dans la balise <link>).

Voici la feuille de styles à utiliser :

Comme vous le voyez, la définition d’une classe n’a rien d’insurmontable. Pour cela, il suffit de faire précéder le nom de la classe d’un point décimal, de le faire suivre d’un espace et d’accolades ouvrante et fermante et de préciser la ou les propriétés à modifier entre les accolades.

Ici :

  • la classe noir affecte la valeur black à la propriété color ;
  • la classe rouge affecte la valeur red à la propriété color ;
  • la classe vert affecte la valeur green à la propriété color.

Affichons à nouveau le document dans le navigateur. Cette fois-ci l’effet recherché est bien obtenu :

Là où les classes deviennent vraiment magiques, c’est quand vous les utilisez dans plusieurs balises. Ainsi par exemple, vous pouvez très bien utiliser les classes noir, rouge et vert dans des balises <p>, <td> ou n’importe quelle autre balise qui concerne des éléments textuels.

Ici par exemple, nous définissons un tableau constitué de deux cellules. La première contient un texte affiché en vert via la balise <td> de classe vert et la deuxième un texte affiché en rouge via la balise <td> de classe rouge :

Affichons ce document dans un navigateur. Intéressant non ?

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

No comments yet.

Leave a Reply