Arts numériques

Les classes

Une classe est assez proche de l’id, on l’associe àun élément de la page comme ceci :

<p class="important">Notez bien !</p>

Ensuite on peut les atteindre en css comme ceci :

.important {
color:red;
}

Le point devant le terme signifie que l’on cherche àatteindre une classe dont le nom est "important".
L’avantage de la classe c’est que plusieurs éléments peuvent se voir associer la même classe :

<h1 class="important">Notez bien !</h1>
<p class="important">On peut m'associer plusieurs fois.</p>

La différence entre les deux est dans le manière de les coder (# et .) et dans la limitation des id àêtre associés une seule fois.
On verra plus tard que les id sont prioritaires sur les classes dans la hiérarchie des déclarations css.

Généralement, associer un ID àun élément signifie "bloc important" dans une structure html. On les emploie souvent pour désigner, le bloc de titre, la navigation, le corps de la page et le footer, par exemple.

Associer plusieurs classes àun élément

Un des avantages des classes est que l’on peut en associer plusieurs au même élément. C’est d’ailleurs depuis quelques années une des tendances lourdes du développement web.

<article class="cartouche alerte">
    Un contenu
</article>

Les deux classes sont simplement séparées par un espace, et peuvent seront codées indépendamment :

.cartouche {
padding:20px;
border:1px solid #666;
border-radius:10px;
}
.alerte {
background-color:red;
color:white;
}

Les deux comportements s’aditionnent, ou en fonction de la hiérarchie, se supplantent.

Des classes et un id sur le même élément
Evidemment, il est tout àfait possible d’associer des classes et un id au même élément.

<header id="truc" class="machin">
Un header
</header>

Avec par exemple :

#truc {
font-size:28px;
}
.machin {
color:orange;
}

Làaussi, les comportement s’additionnent ou se supplantent suivant la hiérarchie. On notera qu’en cas de conflit, c’est l’id qui a la plus grande priorité :

<section id="chose" class="bidule">Une section</section>

#chose {
color:green;
}
.bidule {
color:orange;
}

Ici la couleur des textes est définie par la classe et l’id, et comme l’id est prioritaire, le texte sera affiché en vert.