4-4 Classes

On n’a pas forcément envie que tous les textes des paragraphes aient le même style.

Les classes permettent de définir un style particulier.
Il en existe trois types.

Régulière

Le style sera appliqué aux balises spécifiées par le nom de la classe uniquement. Ex: p.toto où la classe toto est associée uniquement à la balise p. La ligne plus haut en bleu et soulignée est mise en forme avec la classe régulière p.toto .

Générique ou universelle

Le style est appliqué à toutes les balises spécifiées par le nom de la classe uniquement, il n’est pas attaché à une balise uniquement, mais peut s’appliquer à plusieurs.

Pseudo

Les pseudo classes se distinguent des autres classes par l’usage d’un double point à la place du point. Ces pseudo classes permettent de définir un style à un état particulier. L’exemple le plus simple est le lien hypertexte qui comporte 4 états différents, cf la partie style du code source de cette page.

Les règles de mise en forme peuvent être associées soit à une classe (class="nomdelaclasse") soit à une ID (id="nomID"). En CSS, le sélecteur de la classe est ".nomdelaclasse" et celui de l'ID est "#nomID". Pour mieux comprendre, lire le code source et plus particulièrement les infos encadrées par les balises style dans l'entête. Ce paragraphe est mis en forme par du CSS associé à l'id dont le nom est "bas".
Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets. Pour être sûr que cela fonctionne : éviter les lettres avec accents.
On peut associer plus d'une classe à une balise (exemple : div class='gauche important' : à cette balise, sont associées les classes gauche et important qui sont à définir).
Par ailleurs, si une classe reprend les propriétés d'une autre, on pourrait imaginer intéger une classe à une autre. Ce n'est pas possible. Par contre on peut définir 2, plusieurs classes, styles en même temps. Exemple : .belletable, .belletable-rouge {color:red;}. On écrit ainsi une seule fois les styles communs à plusieurs parties de la page pour éviter de saisir plusieurs fois la même chose. Alsacréations répond une question similaire et apporte aussi des précisions sur les CSS.

On peut définir plusieurs fois les choses. Si l'on a un paragraphe de la classe "rouge", il cumulera les trois définitions suivantes : .rouge{} p.rouge{} p{} . Le problème se pose en cas de déclarations contradictoires. La déclaration la plus précise sera prioritaire : p.rouge >> .rouge >> p