Pour appliquer des styles efficacement, il est essentiel de comprendre les sélecteurs CSS, qui déterminent les éléments HTML à cibler pour la mise en forme. Examinons les principaux types de sélecteurs.

Sélecteur de balise

Un sélecteur de balise cible tous les éléments d'une balise donnée, appliquant un style cohérent sur toute la page.

Syntaxe : Dans le HTML, nous avons un élément p :

<p>It was all in my head.</p>

Pour appliquer des styles dans le fichier CSS, utilisez le nom de la balise (p) comme sélecteur :

p {
  property: value;
}

Exécutons l'exemple suivant et observons le résultat.

Sélecteur de classe

Les sélecteurs de classe ciblent les éléments partageant un nom de classe, offrant ainsi un contrôle plus précis.

Syntaxe : Dans le HTML, ajouter un attribut class avec un nom de classe pertinent :

<p class="text">This song is another hit.</p>

Dans le CSS, référencer le nom de la classe avec un point (.) pour définir les styles :

.text {
  property: value;
}

Exécuter l'exemple suivant et observer que seuls les éléments avec la classe text recevront ces styles, permettant un contrôle plus fin du style.

Tous les éléments avec l'attribut class="text" sont stylisés avec un texte rouge, une taille de police de 24px et un fond couleur blé. Le nom de classe text est défini dans index.css à l'aide d'un préfixe ..

Composition de classes

Il est possible d’attribuer plusieurs classes à un même élément pour une mise en forme flexible.

Syntaxe : Dans le code HTML, ajouter plusieurs noms de classes à un élément :

<p class="text font">A robot created chemicals.</p>

Dans le CSS, définir les styles pour chaque classe séparément :

.text {
  property: value;
}

.font {
  property: value;
}

Exécuter l’exemple suivant pour observer le fonctionnement. Les éléments possédant à la fois les classes text et font recevront les styles spécifiés.

L’élément <p> avec les classes text et font reçoit les styles des deux sélecteurs. La classe text définit la couleur sur navy, et la classe font définit la taille de police à 24px.

Sélecteur d'identifiant

Les sélecteurs d'identifiant ciblent un seul élément unique. Comme les identifiants doivent être uniques, cette méthode est rarement utilisée pour la mise en forme.

Syntaxe : Dans le HTML, ajouter un attribut id à un élément :

<p id="title">Choose from different themes.</p>

Dans le CSS, référencer l'identifiant avec un dièse (#) pour définir les styles :

#title {
  property: value;
}

Analyser l'exemple suivant pour observer son fonctionnement. Cet exemple applique des styles à l'élément unique ayant l'identifiant title.

L'attribut id="title" identifie de manière unique l'élément <p>, et les styles définis avec le sélecteur #title s'appliquent uniquement à cet élément spécifique.