CSS : classes, id et pseudo-classes

Noter ce cours :

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 :

Pour les liens :

  • :link : il s'agit d'un lien.
  • :visited : un lien qui a déjà été visité par l'internaute.

Pour toutes les balises :

  • :hover : Modifie le style lors d'un survol de la zone concernée
  • :active : Modifie le style lors d'un clic de souris
  • :focus : Modifie le style lors de la prise de focus (via la touche Tabulation ou la souris).

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;
}

Vous avez aimé cet article intitulé CSS : classes, id et pseudo-classes ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels