Sélecteurs CSS : Maîtrisez les techniques de base de la stylisation

Introduction

Bienvenue dans le laboratoire sur les bases des sélecteurs CSS ! Cascading Style Sheets (CSS) est une technologie fondamentale du World Wide Web, utilisée pour décrire la présentation d'un document écrit dans un langage de balisage comme HTML.

Les sélecteurs CSS sont des motifs utilisés pour sélectionner et styliser les éléments HTML que vous souhaitez. Maîtriser les sélecteurs est une compétence fondamentale pour tout développeur web. Dans ce laboratoire, vous apprendrez à utiliser les types de sélecteurs CSS les plus courants pour styliser une page web simple.

Vous pratiquerez :

Sélecteur d'élément : Cible les éléments par leur nom de balise (tag name).
Sélecteur de classe : Cible les éléments avec un attribut class spécifique.
Sélecteur d'ID : Cible un seul élément avec un attribut id spécifique.
Sélecteur de regroupement : Applique les mêmes styles à plusieurs sélecteurs.
Sélecteur d'ancêtre : Cible les éléments qui sont des descendants d'un autre élément.

L'environnement du laboratoire a été préconfiguré avec un fichier index.html. Votre tâche consiste à écrire du code CSS dans le fichier styles.css pour styliser la page. Vous pouvez prévisualiser vos modifications en temps réel en passant à l'onglet Web 8080 dans le coin supérieur gauche de l'interface.

Utiliser le sélecteur d'élément pour la balise p

Dans cette étape, vous utiliserez un sélecteur d'élément pour appliquer un style à tous les éléments <p> (paragraphe) de la page. Les sélecteurs d'élément sont le type de sélecteur le plus basique ; ils sélectionnent les éléments HTML en fonction de leur nom de balise (tag name).

Tout d'abord, localisez le fichier styles.css dans l'explorateur de fichiers sur le côté gauche de votre WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutez le code CSS suivant au fichier styles.css. Cette règle sélectionnera tous les éléments <p> et changera la couleur de leur texte en bleu.

p {
  color: blue;
}

Après avoir ajouté le code, enregistrez le fichier (vous pouvez utiliser Ctrl+S ou Cmd+S). Pour voir l'effet, cliquez sur l'onglet Web 8080. Vous devriez voir que le texte des trois paragraphes de la page est devenu bleu.

Appliquer le sélecteur de classe avec .nomdeclasse

Dans cette étape, vous apprendrez à utiliser un sélecteur de classe. Les sélecteurs de classe sont plus spécifiques que les sélecteurs d'élément. Ils sélectionnent les éléments en fonction de la valeur de leur attribut class. Un sélecteur de classe est écrit avec un point (.) suivi du nom de la classe.

Dans votre fichier index.html, l'un des paragraphes possède un attribut class="highlight". Nous allons cibler ce paragraphe spécifique.

Ajoutez la règle CSS suivante à votre fichier styles.css. Cela sélectionnera tout élément ayant la classe highlight et lui donnera un fond jaune.

.highlight {
  background-color: yellow;
}

Enregistrez le fichier styles.css et basculez vers l'onglet Web 8080 pour visualiser vos modifications. Vous remarquerez que seul le paragraphe avec le texte "This is a special paragraph with a class" a maintenant un fond jaune, tandis que les autres paragraphes ne sont pas affectés.

Implémenter le sélecteur d'ID avec #nomdelaid

Dans cette étape, nous allons utiliser un sélecteur d'ID. Les sélecteurs d'ID sont encore plus spécifiques que les sélecteurs de classe. Ils sont utilisés pour sélectionner un élément unique avec un attribut id spécifique. Un sélecteur d'ID est écrit avec un caractère dièse (#) suivi de l'ID de l'élément. Rappelez-vous, un ID doit être unique au sein d'une seule page HTML.

L'élément <h1> dans index.html a un id="main-title". Stylisons-le.

Ajoutez la règle CSS suivante à votre fichier styles.css. Cette règle augmentera la taille de la police du titre principal et ajoutera une ligne noire solide en dessous.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

Enregistrez le fichier et vérifiez l'onglet Web 8080. Vous devriez voir que le titre principal "Welcome to Our Page" est maintenant plus grand et qu'une ligne se trouve en dessous. Ce style ne s'applique qu'à l'élément ayant l'ID main-title.

Combiner les sélecteurs avec une virgule pour le regroupement

Dans cette étape, vous apprendrez à appliquer les mêmes styles à plusieurs sélecteurs sans répéter le code. Le sélecteur de regroupement vous permet de le faire en séparant chaque sélecteur par une virgule.

Disons que nous voulons appliquer la même police aux éléments <h1> et <h2> de notre page. Au lieu d'écrire deux règles distinctes, nous pouvons les regrouper.

Ajoutez la règle CSS suivante à votre fichier styles.css.

h1,
h2 {
  font-family: Arial, sans-serif;
}

Cette règle indique au navigateur d'appliquer la font-family spécifiée à tous les éléments <h1> ET à tous les éléments <h2>.

Enregistrez le fichier et actualisez l'onglet Web 8080. Observez comment la police de "Welcome to Our Page" et "About CSS" a changé.

Ajouter un sélecteur descendant comme div p

Dans cette étape, vous utiliserez un sélecteur descendant. Ce sélecteur correspond à tous les éléments qui sont descendants d'un élément spécifié. Un sélecteur descendant est créé en listant deux sélecteurs ou plus séparés par un espace.

Notre index.html contient un élément <p> à l'intérieur d'un <div>. Nous voulons styliser uniquement ce paragraphe spécifique, et non les autres paragraphes de la page.

Ajoutez la règle CSS suivante à votre fichier styles.css. Le sélecteur div p sélectionnera tout élément <p> qui se trouve n'importe où à l'intérieur d'un élément <div>.

div p {
  font-style: italic;
}

Après avoir enregistré le fichier, allez dans l'onglet Web 8080. Vous verrez que seul le paragraphe "This paragraph is inside a div..." est maintenant en italique. Les deux autres paragraphes restent inchangés car ils ne sont pas descendants d'un <div>.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez appris et appliqué avec succès les sélecteurs CSS fondamentaux pour styliser une page web.

Dans ce laboratoire, vous avez pratiqué :

Sélecteur d'élément (p) : Pour styliser tous les éléments d'un certain type.
Sélecteur de classe (.highlight) : Pour styliser des éléments spécifiques qui partagent une classe.
Sélecteur d'ID (#main-title) : Pour styliser un seul élément unique.
Sélecteur de regroupement (h1, h2) : Pour appliquer efficacement les mêmes styles à plusieurs éléments.
Sélecteur descendant (div p) : Pour styliser des éléments en fonction de leur position au sein d'un autre élément.

Ces sélecteurs sont les éléments constitutifs pour créer des mises en page web complexes et esthétiques. Vous pouvez maintenant les utiliser pour contrôler précisément l'apparence de vos documents HTML.

Bases des sélecteurs CSS