Sélecteurs de base et couleurs

Apprenez à cibler précisément des éléments avec les sélecteurs d'élément, de classe et d'id, puis à leur appliquer des couleurs.

9 min · 3 questions

Un sélecteur est la partie d'une règle CSS qui désigne les éléments à styler. Le plus simple est le sélecteur d'élément : on écrit le nom de la balise, sans chevrons. p cible tous les paragraphes, h1 tous les grands titres. C'est efficace, mais parfois trop large : et si vous vouliez colorer un seul paragraphe parmi dix ? C'est là qu'interviennent les classes et les id.

Une classe est une étiquette que vous posez sur un ou plusieurs éléments HTML grâce à l'attribut class. Côté CSS, on la cible avec un point : .important sélectionne tous les éléments portant class="important". Un id (identifiant) est une étiquette unique : il ne doit exister qu'une seule fois par page, par exemple pour l'en-tête. Côté CSS, on le cible avec un dièse : #header.

<h1 id="main-title">Mon blog de cuisine</h1>
<p class="highlight">Recette du jour : la tarte.</p>
<p>Un paragraphe tout à fait ordinaire.</p>
<p class="highlight">Astuce : préchauffez le four.</p>

#main-title {
  color: darkgreen;
}

.highlight {
  background-color: yellow;
}

p {
  color: black;
}

Dans cet exemple, le titre devient vert foncé, les deux paragraphes étiquetés highlight reçoivent un fond jaune (background-color règle la couleur d'arrière-plan), et tous les paragraphes ont un texte noir. Retenez la différence : une classe est réutilisable sur autant d'éléments que vous voulez, un id est unique dans la page. Dans le doute, utilisez une classe.

Parlons maintenant des couleurs. CSS accepte plusieurs écritures. Les noms de couleurs en anglais (red, blue, orange...) sont simples mais limités. La notation hexadécimale commence par # suivi de six caractères qui dosent le rouge, le vert et le bleu : #ff0000 est un rouge pur. Enfin, la notation rgb() donne les mêmes doses avec des nombres de 0 à 255 : rgb(255, 0, 0) est aussi un rouge pur.

.highlight {
  color: tomato;
  background-color: #fff3cd;
}

#main-title {
  color: rgb(0, 100, 0);
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quel sélecteur CSS cible tous les éléments portant class="menu" ?
   • #menu
   • .menu
   • menu
   • class.menu
2. Quelle est la principale différence entre une classe et un id ?
   • Un id peut être posé sur plusieurs éléments, pas une classe
   • Une classe est réutilisable, un id doit être unique dans la page
   • Les classes ne fonctionnent que sur les paragraphes
3. Laquelle de ces valeurs représente un rouge pur ?
   • rgb(0, 0, 255)
   • #00ff00
   • #ff0000
   • rgb(0, 255, 0)