CSS : classes, id et pseudo-classes

Noter ce cours :

Liens sponsorisés :

Les identifiants uniques aussi appelés ID permettent d'appliquer un style sur une seule balise dans tout le document.

Exemple pour un style appliqué à la balise <p> ayant l'id titre :

<p id="titre">test</p>

#titre{
color:#000000;
text-align:left;
}

Les classes sont aussi un identifiant mais réutilisable cette fois-ci pour plusieurs balises.

Exemple pour un style appliqué à la balise <p> et à la balise <div> ayant toutes les deux la classe titre :

<div class="titre"><p class="titre">test</p></div>

div.titre,p.titre{
color:#000000;
text-align:left;
}

Etant donné que le style pour les balises <div> et <p> est le même ici, il est préférable d'écrire la CSS comme ceci :

.titre{
color:#000000;
text-align:left;
}

Les pseudo-classes se différencient des autres classes par leur syntaxe légèrement différente. Le point est remplacé par deux points. Elles permettent de gérer le focus, le pointage et le clic :

Voici les pseudo-classes :

Exemple pour un style appliqué à un lien <a href="page.php">test</a> lorsque celui-ci est survolé par la souris :

a:hover{
color:#CC0000;
}