L'ajustement et l'attribution de valeurs à ces propriétés permettront l'application d'une grande variété d'effets à la plupart des objets HTML rendant inutiles l'insertion de propriétés à l'intérieur d'instructions HTML.
Outre les éléments HTML connus, de nouvelles classes de styles peuvent être crées permettant d'ajouter ou de modifier des propriétés. On créé une nouvelle classe en précédant son nom d'un point:
L'écriture des propriétés utilise la même syntaxe que décrite précédemment pour les classes d'éléments HTML existants.
On appliquera ensuite cette classe en ajoutant l'argument class="nom_de_la_classe à une instruction HTML:
cette information est importante...
Ici le mot information a été traité de façon importante. Voici le code source:
Ajoutons pour terminer cette section la création de classes utilisables par un seul élément. Ces styles à usage unique ne peuvent être utilisés dans une page qu'une seule fois. Ils se distinguent du précédent par la présence du caractére # au lieu du point au moment de la définition dans la feuille de style.
Il sera utilisé pour limiter les effets d'un style. Voyez l'exemple suivant:
Toutefois, ID devrait être utilisé pour identifier un élément de style spécifique alors que class est responsable de l'affectation des attributs de style.
Pour étendre encore la portée de l'utilisation des styles, deux nouveaux objets HTML apparaissent avec les styles: les éléments DIV et SPAN. Ces éléments sont en quelque sorte de simples contenants, sans valeur HTML spécifique et destinés à permettre l'application des classes de styles.
On utilise l'instruction SPAN à l'intérieur d'un paragraphe, sa portée est plus limitée.
DIV est utile pour affecter une région couvrant plusieurs paragraphes. Dans l'exemple suivant on a créé une classe de style (bloc1) utilisant les propriétés de bloc définies plus haut:
... qui donne le résultat suivant:
et voici le code source:
Voici une variation sur le bloc1, appelée bloc2, permettant de voir les effets de la propriété padding en comparant avec la définition de la classe de style précédente. De plus, la suppression de la propriété border annule l'effet de contour rouge épais autour de la boîte:
à nouveau le code source:
