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 être un peu plus étroit dans l’application du style.

Dans cet exercice, vous allez définir le style des sections et des liens de médias sociaux et d’expérience sur la page.

Application de style à des classes et des ID

Vous commencez par définir le style des sections Médias sociaux et Expérience.

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

2. À l’intérieur deindex.html, remarquez l’élément section avec l’ID de social-media à la ligne 10 ; vous appliquez un style à cette section pour définir la couleur sur 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, en mettant le contenu de la section des médias sociaux en bleu.

5. À l’intérieurindex.html, remarquez les deux sections aux lignes 28 et 32 avec l’expérience de la classe ; Vous 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 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 verte des liens et mettez les liens en surbrillance lorsqu’un utilisateur les survole.

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.