Pour appliquer des styles efficacement, il est nécessaire 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

Une méthode pour appliquer des styles consiste à utiliser directement la balise de l’élément. Les styles spécifiés à l’aide d’un sélecteur de balise affecteront tous les éléments portant cette balise. Cette approche est utile pour appliquer une mise en forme cohérente à des éléments sur l’ensemble du site web.

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

Une méthode plus précise pour styliser les éléments consiste à utiliser des sélecteurs de classe. Ces sélecteurs ciblent les éléments ayant des noms de classe spécifiques, ce qui permet d’appliquer des styles de manière sélective.

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

<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 ayant la classe text recevront ces styles, offrant ainsi un contrôle plus précis sur la mise en forme.

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 également possible de combiner plusieurs classes sur un même élément, faisant de la composition de classes un outil puissant pour appliquer des styles : séparez les noms de classes par des espaces dans l’attribut class.

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

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

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

.text {
  property: value;
}

.font {
  property: value;
}

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

L’élément <p> possédant à la fois 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

Bien qu'il soit possible d'utiliser le sélecteur id pour la mise en forme, cela n'est généralement pas recommandé. Les identifiants doivent être uniques sur une page, ce qui limite leur réutilisation.

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

Exécuter l'exemple suivant pour observer son fonctionnement. Cet exemple applique des styles à l'élément unique portant 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.