TP CSS — Exercices

Exercice 1 — Sélecteurs CSS

Les 5 sélecteurs

1. Tous les liens dans la navigation :

.main-nav a { }

2. Uniquement le lien actif :

.main-nav a.active { }

3. L'article avec la classe featured :

article.post.featured { }

4. Le premier paragraphe de chaque article :

.post p:first-of-type { }

5. Les éléments li pairs :

li:nth-child(even) { }

Résultat visible

Article featured

Ce paragraphe est le premier → il peut être ciblé avec p:first-of-type

Article normal

Autre paragraphe.

Spécificité

Ordre croissant : p → .text → p.text → #main → #main .text p

Même spécificité → la règle écrite en dernier gagne.

Éviter !important car ça casse la cascade et rend le CSS difficile à corriger.

Exercice 2 — Box Model

content-box (défaut) → largeur totale = 350px

.box {
  width: 300px;
  padding: 20px;     /* +40px */
  border: 5px solid #333;  /* +10px */
  margin: 15px;
  /* Total visible = 300 + 40 + 10 = 350px */
}
Je fais 350px de large visible

border-box → largeur totale = 300px

.box {
  box-sizing: border-box;
  width: 300px;
  /* padding et border inclus dans les 300px */
}
Je fais 300px de large visible

Reset universel

*, *::before, *::after {
  box-sizing: border-box;
}

Centrer horizontalement

.div-600 {
  width: 600px;
  margin: 0 auto;
}
Centré avec margin: 0 auto

Exercice 3 — Flexbox

Barre de navigation

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 15px;
}

Cartes de même hauteur (bouton toujours en bas)

.cards {
  display: flex;
  gap: 15px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card p {
  flex: 1;  /* pousse le bouton vers le bas */
}

Carte 1

Contenu court.

En savoir plus

Carte 2

Contenu beaucoup plus long pour tester l'alignement vertical des boutons.

En savoir plus

Carte 3

Contenu moyen.

En savoir plus

Exercice 4 — CSS Grid

Grille responsive automatique

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}
Carte 1
Carte 2
Carte 3
Carte 4
Carte 5
Carte 6

Layout complet avec grid-template-areas

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 120px 40px;
  gap: 8px;
}

.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main;    }
.footer  { grid-area: footer;  }
Header
Sidebar
Contenu principal
Footer

Exercice 5 — Responsive Design

Mobile First : on commence par le mobile, puis on agrandit

/* Mobile (base) */
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Tablette et plus grand */
@media (min-width: 768px) {
  .nav-menu {
    flex-direction: row;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
Accueil Services Contact

Rétrécis la fenêtre pour voir les liens s'empiler verticalement.

Exercice 6 — Variables CSS

Créer des variables dans :root

:root {
  --couleur-principale: #4CAF50;
  --couleur-texte: #333;
  --couleur-fond: #f0f0f0;
}

/* Utilisation */
.carte {
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  border: 2px solid var(--couleur-principale);
}

.bouton {
  background: var(--couleur-principale);
  color: white;
}
Je suis une carte qui utilise les variables CSS

Thème sombre avec les mêmes variables

@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #1a1a1a;
    --couleur-texte: #ffffff;
  }
}

Exercice 7 — Transitions et animations

Bouton avec transition au survol

.bouton {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.bouton:hover {
  background: #2e7d32;
  transform: translateY(-3px);
}

Spinner avec @keyframes

@keyframes tourner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: tourner 1s linear infinite;
}

Quiz de révision

1. Quel sélecteur a la spécificité la plus haute ?

2. Avec box-sizing: border-box, width: 200px et padding: 20px, la largeur totale est :

3. Pour centrer verticalement ET horizontalement avec Flexbox :

4. La valeur 1fr en CSS Grid signifie :

5. L'approche Mobile First utilise :