Accueil/Informatique & Développement /Chapitre 02 /Exercices corrigés

CSS — exercices

Les TP du cours, corrigés : viser le bon élément, comprendre la boîte, mettre en page avec Flexbox, rendre responsive.

🎯

Le bon réflexe

Ouvrez les outils de développement du navigateur (F12) : l'onglet « Éléments » montre la boîte de chaque élément (contenu, padding, marge) et quelles règles s'appliquent. C'est l'instrument n° 1 pour comprendre pourquoi un style ne fait pas ce qu'on croit.

01Cibler avec les sélecteurs

1Le bon sélecteur pour chaque cible Moyen

À partir de cette page de contact (TP5), écrivez le sélecteur correspondant à chaque besoin :

html

<h1>Nos Services</h1>
<ul class="services">
    <li>Développement Web</li>
    <li>Design Graphique</li>
</ul>
<form id="contactForm">
    <label>Nom</label>
    <input type="text">
    <button>Envoyer</button>
</form>

tous les titres <h1> ;
seulement les <li> de la liste des services ;
tous les <input> à l'intérieur du formulaire ;
l'<input> placé juste après un <label> ;
le <button> enfant direct du formulaire ;
un effet au survol du bouton.

✅ Correction

css

/* 1 — par balise */
h1 { color: #2D5A27; font-family: Georgia, serif; }

/* 2 — descendant : les li DANS .services */
ul.services li { padding: 6px 0; }

/* 3 — descendant : les input DANS le formulaire */
#contactForm input { width: 100%; }

/* 4 — frère immédiat : l'input juste après un label */
label + input { margin-top: 4px; }

/* 5 — enfant direct : le button fils direct du form */
#contactForm > button { background: #2D5A27; color: #fff; }

/* 6 — pseudo-classe d'état */
#contactForm > button:hover { background: #1E3D1A; }

⚠️ Descendant (espace) ≠ enfant direct (>)

#contactForm input attrape les <input> à n'importe quelle profondeur ; #contactForm > button n'attrape que les enfants immédiats. Si le bouton était enveloppé dans un <div>, le sélecteur avec > ne le trouverait plus.

02Calculer une boîte

2Quelle largeur à l'écran ? Moyen

Soit cette carte :

css

.carte {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  margin: 15px;
}

Quelle largeur la carte occupe-t-elle réellement (bordure comprise), par défaut ?
Combien d'espace horizontal total prend-elle, marges comprises ?
Que deviennent ces valeurs si on ajoute box-sizing: border-box ?

✅ Correction

1. Largeur visible = 350 px. Par défaut, width ne compte que le contenu ; on ajoute le padding (des deux côtés) et la bordure (des deux côtés) :

300 + (20 × 2) + (5 × 2) = 350 px

2. Encombrement total = 380 px. On ajoute les marges gauche et droite, qui ne font pas partie de la boîte visible mais occupent l'espace :

350 + (15 × 2) = 380 px

3. Avec border-box : la largeur visible devient exactement 300 px (padding et bordure sont inclus dedans, le contenu se réduit à 300 − 40 − 10 = 250 px). L'encombrement total tombe à 300 + 30 = 330 px. C'est bien plus prévisible — d'où le réflexe * { box-sizing: border-box; }.

🧰 Vérifier soi-même

Dans les outils de développement (F12), sélectionnez l'élément : le schéma de la boîte affiche les quatre couches avec leurs valeurs. La largeur totale y est indiquée — plus besoin de deviner.

03Page de contact stylée (TP5)

3Habiller la page « Nos Services » Moyen

Reprenez la page du TP5 (titres, liste .services, formulaire #contactForm) et stylez-la : couleurs et police des titres, style de la liste, bordure et coins arrondis du formulaire, effet au survol du bouton.

✅ Correction (extrait)

style.css

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #FDF5E6;
  color: #2F2F2F;
  padding: 24px;
}

h1, h2 { color: #2D5A27; }

.services li {
  list-style: none;
  padding: 8px 12px;
  border-left: 3px solid #2D5A27;
  margin-bottom: 6px;
}

#contactForm {
  background: #fff;
  border: 1px solid #E6DCCE;
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
}

#contactForm input,
#contactForm select,
#contactForm textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #D8CBB8;
  border-radius: 8px;
}

#contactForm button {
  background: #2D5A27;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
}

#contactForm button:hover { background: #1E3D1A; }

🌍 cursor: pointer, le petit détail qui fait « fini »

Sans lui, la souris reste une flèche au survol du bouton. Avec, elle devient une main — le signal universel « ceci est cliquable ». Un bouton sans cursor:pointer paraît toujours un peu cassé, même s'il fonctionne.

04Mise en page Flexbox (TP6)

4Un header en barre Moyen

Créez un <header> contenant un logo « MonSite », un menu de 4 liens (Accueil, Services, Projets, Contact) et une icône utilisateur. Tout sur une seule ligne, le logo à gauche et le reste à droite, verticalement centré.

✅ Correction

html

<header class="barre">
    <div class="logo">MonSite</div>
    <nav class="menu">
        <a href="#">Accueil</a>
        <a href="#">Services</a>
        <a href="#">Projets</a>
        <a href="#">Contact</a>
    </nav>
    <div class="user">User</div>
</header>

css

.barre {
  display: flex;
  justify-content: space-between;  /* logo à gauche, reste à droite */
  align-items: center;             /* tout centré verticalement */
  background: #1E3D1A;
  color: #fff;
  padding: 14px 24px;
}
.menu {
  display: flex;      /* les liens en ligne */
  gap: 24px;          /* espacés régulièrement */
}
.menu a { color: #fff; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

🧰 space-between : le motif du menu de site

C'est LA combinaison à retenir pour une barre de navigation : display:flex + justify-content:space-between + align-items:center. Le premier élément se colle à gauche, le dernier à droite, l'espace se répartit au milieu. On la retrouve sur presque tous les sites.

05Formulaire responsive (TP8)

5Un formulaire qui s'adapte Exigeant

Créez un formulaire de contact (Nom, Email, Message, Envoyer) qui, en mobile-first :

occupe toute la largeur sur mobile ;
passe à une largeur fixe et se centre à partir de 768 px ;
s'élargit encore à partir de 1024 px.

✅ Correction

css — mobile-first

* { box-sizing: border-box; }

/* base : mobile — pleine largeur */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
}

/* tablette : largeur fixe, centré */
@media screen and (min-width: 768px) {
  .formulaire {
    width: 700px;
    margin: 0 auto;      /* centrage horizontal */
    text-align: center;
  }
}

/* ordinateur : plus large encore */
@media screen and (min-width: 1024px) {
  .formulaire {
    width: 800px;
  }
}

Ne pas oublier, dans le <head> du HTML :

html

<meta name="viewport" content="width=device-width, initial-scale=1">

⚠️ Tester en vrai, pas en rétrécissant la fenêtre à l'œil

Pour vérifier le responsive, ouvrez les outils de développement (F12) et activez le mode appareil (icône téléphone/tablette). Vous pouvez alors choisir « iPhone », « iPad » et voir exactement ce que verra l'utilisateur à chaque largeur. Redimensionner la fenêtre à la main ne teste pas la balise viewport.

🌍 Pourquoi « mobile-first » plutôt que l'inverse

On part du mobile parce que c'est la contrainte la plus forte (petit écran, peu de place) : on écrit l'essentiel, puis on ajoute à mesure que l'écran grandit avec min-width. L'inverse (partir du grand écran et retirer) mène presque toujours à des mises en page mobiles bâclées — or aujourd'hui la majorité des visiteurs sont sur téléphone.