Exercice : Sélecteurs

Effectué

Dans l’exercice précédent, vous avez appliqué un style à des éléments tels que html et h1. Vous devez souvent affiner un peu plus vos paramètres d’application du style.

Dans cet exercice, vous définissez le style des liens et des sections sur les réseaux sociaux et l’expérience dans la page.

Application de style à des classes et des ID

Vous commencez par définir le style des sections sur les réseaux sociaux et l’expérience.

1. Revenez à la fenêtre vscode.dev que vous avez utilisée dans l’exercice précédent.

2. Dans index.html, recherchez l’élément section à la ligne 10 qui a l’ID social-media. Appliquez un style à cette section pour définir la couleur sur le bleu.

3. À la fin de style.css, ajoutez le code CSS suivant pour définir la couleur de l’élément social-media :

   #social-media {
       color: blue;
   }
   

4. La page est mise à jour, et le contenu de la section sur les réseaux sociaux est défini sur le bleu.

5. Dans index.html, recherchez les deux sections aux lignes 28 et 32 qui ont la classe experience. Appliquez un style à ces sections pour mettre la police en italique.

6. À la fin de style.css, ajoutez le code CSS suivant pour modifier la police des éléments avec la classe experience :

   .experience {
       font-style: italic;
   }
   

7. La page est mise à jour, et la police à l’intérieur de l’expérience est mise en italique.

Utilisation de pseudo-classes pour définir le style de lien

De nombreux développeurs web modifient la couleur et le style des liens hypertexte sur une page. Vous définissez la couleur des liens sur le vert, et définissez la mise en surbrillance des liens quand un utilisateur pointe dessus avec la souris.

1. À la fin de style.css, ajoutez le code CSS suivant pour faire en sorte que les liens soient toujours verts :

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. La page est mise à jour et affiche les liens en vert.

3. Ajoutez le code CSS suivant à la fin du fichier style.css pour que les liens soient mis en surbrillance quand un utilisateur pointe dessus avec la souris :

   a:hover {
       background-color: yellow;
   }
   

4. Pointez sur les liens de la page et observez comme ils sont mis en évidence.

Révision

La capture d’écran suivante montre les résultats du code CSS que vous avez appliqué. Vous avez utilisé des classes, des ID et des pseudo-classes pour appliquer des styles à des éléments et à des groupes logiques d’éléments spécifiques.