Les sélecteurs - Exercices 01

Voici une série d'exercices pour expérimenter les sélecteurs CSS.

    4ttr
  • Découverte

Exercices pratiques à réaliser en classe

Objectif

Cet exercice vise à te familiariser avec les trois types de sélecteurs CSS principaux : sélecteur de type, sélecteur de classe et sélecteur d'identifiant.

  • Élément (p, h1, etc.)
  • Classe (.maClasse)
  • Id (#monId)

Tu vas compléter la partie <style> du fichier HTML ci-dessous pour obtenir la mise en page attendue.


Consignes

  1. Télécharge le fichier HTML ci-joint et ouvre-le dans ton VS Code.
  2. Complète le bloc <style> en haut du document.
  3. Utilise uniquement des sélecteurs de type élément, classe et id.
  4. Le but est que ta page ressemble au modèle attendu (voir ci-dessous).
  5. Quand tu as terminé, envoie ton fichier HTML sur https://fichiers.ttrinfo.be dans le dossier Html/Css/Exercice_01

Modèle attendu

  • Le titre principal (h1) est rouge et centré.
  • Tous les paragraphes (p) ont une police Arial et une taille 14px.
  • Les mots importants marqués avec la classe .important sont en gras et en bleu.
  • Le sous-titre (h2) avec l’id #alerte est en majuscules et en orange.

alt text

Fichier HTML à compléter

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exercice CSS – Cybersécurité</title>
  <style>
    /* Écris ton code CSS ici */
    
  </style>
</head>
<body>

  <h1>Introduction à la Cybersécurité</h1>

  <p>La cybersécurité est l’ensemble des pratiques visant à protéger les systèmes informatiques.</p>

  <p>Il est <span class="important">essentiel</span> de se protéger contre les virus, les ransomwares et les attaques de phishing.</p>

  <h2 id="alerte">Attention aux mots de passe</h2>

  <p>Un mot de passe faible met ton compte en danger. Utilise toujours un mot de passe <span class="important">complexe</span> et unique.</p>

  <p>La sensibilisation à la cybersécurité permet de réduire les risques et d’adopter de bonnes pratiques en ligne.</p>

</body>
</html>

Téléchargements

Modèle à télécharger
selecteurs-exercices-01.zip

Pour aller plus loin