La révolution CSS

La feuille de style (hello3.css) ressemble à ça :


On y retrouve les éléments qui reçoivent une mise en forme spécifique ("background" et "h1") avec les déclarations de style correspondantes. Je pense que la syntaxe est assez explicite...

Vous pouvez vérifier que le résultat est bien celui attendu : hello.3.html

Mais le CSS permet d'aller beaucoup plus loin, avec la notion de classe. Supposons qu'on désire avoir à disposition plusieurs versions de la balise h1, avec des mises en forme différentes. Pour cela, il suffit de définir plusieurs classes de la balise, comme dans l'exemple ci-dessous (hello4.css).
p1.red, p1.green, p1.blue définissent trois classes pour p1 qui spécifient les différentes mises en forme. Dans la déclaration p1 "tout court", on place ce qui s'appliquera à toutes les balises p1, quelle que soit la classe utilisée !


Pour utiliser ces classes de h1 il suffit, côté HTML, de les "invoquer" de la façon suivante : p1 class="red" ou p1 class="green" ou bien encore p1 class="blue" :


Vous pouvez observer le résultat : hello4.html

Pour terminer ce premier survol du tandem HTML / CSS, et avant de passer à des choses plus fondamentales, voici une petite démo des différents niveaux de titre, au nombre de six (balises h1 à h6), avec leur apparence par défaut (à part la couleur) : hello5.html

Ci-dessous le code HTML et CSS :