Les sélecteurs - Exercices 02

Exercice de Pratique : Exploration des Sélecteurs CSS

Objectif

Cet exercice vise à renforcer votre compréhension et maîtrise des trois sélecteurs CSS principaux : sélecteur de type, sélecteur de classe et sélecteur d'identifiant. Vous allez créer une page web "simple" qui illustre l'utilisation de ces sélecteurs de manière interactive.

alt text

Le modèle PDF à télécharger permet de vous montrer un exemple du résultt attendu. La taille des éléments a été réduite afin de tenir sur une page dans le fichier PDF. La taille du texte dans votre page HTML sera différente, c'est normal. De même, vous ne devez PAS afficher le nom des éléments sur fond gris/bleu: ils sont là uniquement pour vous aider à vour repérer.

Consignes

Télécharge le modèle pour avoir une bonne idée du résultat attendu.

Dans les exercices suivants, insère du texte "lorem" pour avoir du contenu:

lorem5 pour les titres
lorem10 pour les <li>
lorem50 pour les paragraphes

Quand tu as terminé, envoie ton fichier HTML sur https://fichiers.ttrinfo.be dans le dossier Html/Css/Exercice_01

Étape 1 : Structure HTML

Crée une page HTML avec les éléments suivants
- Un en-tête <h1>
- Trois <article> avec les élements suivants:
  - 1 titres <h2>.
  - 1 paragraphes<p>
  - Une liste non ordonnée <ul> contenant trois éléments <li>.
- Ajoute l'identifiant header au titre h2 de la 1ère section.
- Ajoute la classe highlight aux paragraphes de la 1ère et 3e section.
- Une liste non ordonnée <ul> avec la classe special contenant trois éléments <li>.
- Une liste ordonnée <ol> contenant trois éléments <li>.
- Une section <section> avec l'identifiant mainSection, contenant 3 titres h2 et 3 paragraphes.

Étape 2 : Styles de Base

Ajoute une feuille de style CSS et réalise les tâches suivantes :
- Applique une couleur de fond spécifique à tous les éléments <p> qui ont la classe highlight.
- Modifie la couleur d'écriture du titre dont l'id est header.
- Change la couleur de texte de tous les éléments <li>.
- Le 1er `
- `` de toutes les listes doit être affiché en gras.
- Adapte le style des <article>:
  - Applique une bordure simple (trait gris de 1px)
  - La bordure gauche doit faire 5px d'épaisseur
  - Applique un padding de 5px
  - Ajoute une marge inférieure de 20px

Étape 3 : Combinaison de Sélecteurs

Utilise des combinaisons de sélecteurs pour les tâches suivantes :
- Le 1er <li> des listes ordonnées doit être affiché en tomato.
- Applique une bordure (avec des traits, dashed) et un padding de 5px aux paragraphes (<p>) à l'intérieur de la section avec l'id mainSection.
- Modifie l'apparence de la #mainSection:
  - la couleur de fond (une couleur pastel)
  - padding: 10px
  - bordure épaisse rouge
  - coins légèrement arrondis
  - les titres de la main section doivent être affichés en majuscules (!! grâce à css: text-transform: uppercase).
  - les paragraphes doivent être justifiés (text-align)
- Souligne les éléments <li> qui se trouvent dans des listes non ordonnées ayant la classe .special (text-decoration: underline).

Étape 4 : Interaction et Observation

Teste chaque changement en visualisant le résultat dans le navigateur.
Expérimente avec différents styles et observe comment chaque sélecteur affecte les éléments de la page.