Cours CSS N°2 : les classes et les ID

Notion de classes

Définition

Un sélecteur contextuel, ou classe, associe une règle particulière à un élément en fonction de sa situation.
On appel sélecteur simple les balises HTML classiques auxquelles on a attribué des caractéristiques de style.
Mais ces sélecteurs simples présentent une contrainte importante, définie de manière générale, il est difficile de changer momentanément certains de leurs attributs ou bien d'en rajouter.
Pour résoudre ce problème, les concepteurs du CSS ont inventé les classes.
Une classe est ce qu'on appelle un sélecteur contextuel. Il va pouvoir venir modifier contextuellement une caractéristique du document.

La définition d'un style était :

balise { propriété de style: valeur }

Elle devient :

balise.nom_de_classe { propriété de style: valeur }

remarquez le point entre balise et nom_de_classe

Ou, comme la mention de la balise est facultative,

.nom_de_classe { propriété de style: valeur }

Attention! L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.

<balise class="nom_de-classe"> .... </balise>

Exemple :

Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .Toto :

.Toto { font-weight: bold; font-color: #000080 }

Et dans le document Html, il suffit d'appeler la classe quand cela se révèle nécessaire :

<P class="Toto"> ... blabla ... </P>
<H1 class="Toto ">Titre 1</H1>
<TABLE><TR><TD class="Toto ">cellule</TD></TD>...

Notions des Pseudo Classes

Définition :

Déf: Une pseudo classe est un ensemble d'éléments qui répondent à un même critère de contexte forme.
Cette définition ne s'applique concrètement qu'à un cas particulier, celui de la balise A, la balise des liens.
Celle ci peut en effet connaître plusieurs contextes de formes selon que le lien est inactif, visité, ou en train d'être visiter.
Concrètement on peut définir alors pour chacun des états de la balise une mise en forme particulière, voici comment:

Exemple:

A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;}
A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;}
A:active {color:red;}
A:hover {color:red; text-decoration:none;}

Notion des ID

Lorsqu'on désire utiliser les feuilles de style avec du Javascript on utilise les ID (appelés les identifiants).
Les ID fonctionnent exactement comme les classes.
La syntaxe est :

#nom_de_ID { propriété de style: valeur }

Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>

Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,

Pour #Toto{ ... }

<P id=Toto> est correct.

Mais si on rencontre dans la même page

<H1 id=Toto> ce n'est plus correct !

Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.