Attribuer plusieurs style sur un même éléments avec les CLASS

Imaginons que votre page se sépare en deux parties, l'une sur fond sombre et l'autre sur fond clair, bien entendu vous ne pourrez pas utiliser la même couleur pour les deux textes, cela rendrait l'un des deux textes difficile, voir impossible a lire.

Pour régler le problème il vous suffit d'attribuer des "class" à vos élément. Pour ce faire vous devrez d'abord nommer l'élément, ensuite ajouter un point et nommer une class(le nom de la class n'a pas d'importance, vous pouvez mettre le mot qui vous convient).

Mais tout de suite un petit exemple pour rendre tout ça un peu plus clair :

p.clair {color: #000000;}

p.sombre {color: #FFFFFF;}

Ensuite il vous suffira d'appeler le style dans votre balise à l'aide de l'attribut class="nom_de_la_class".

<p class="clair">mon texte sur fond clair</p>

<p class="sombre">mon texte sur fond sombre</p>

Ce qui nous donnera donc un texte noire pour le fond clair et un texte blanc pour le fond sombre.

Vous pouvez également utiliser les "class" avec l'élément universel (*), l'avantage dans ce cas est qu'on peut utiliser le style sur tout type de balise. ex:

*.class1 {color: red;}

Mais il est aussi possible d'omettre l'élément universel pour spécifier la class uniquement :

.class2 {color: blue;}

Note: Il est possible de donner plusieurs class à une même balise, pour cela il suffit de les séparer par un espace (ex: <p class="class1 class2 class3">..</p>

Note 2: Même chose que pour les "id", n'utiliser par de chiffre pour commencer le nom de vos "id", car ça ne fonctionne pas sur certains navigateurs. (ex : 1class = mauvais; par contre class1 = ok)