Exercice 1 : Sélecteurs et spécificité

1.1 Sélecteurs

.main-nav a
a.active
article.featured
article p:first-of-type
li:nth-child(even)
  

1.2 Spécificité

Classement : p < .text < p.text < #main < #main .text p

Si deux règles ont la même spécificité : la dernière règle gagne

Pourquoi éviter !important : crée des conflits CSS et casse la logique

Exercice 2 : Box Model

2.1 Comprendre le Box Model

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

Avec content-box : La largeur totale = width + padding + border
avec: width = 300px, padding = 20px × 2 = 40px, border = 5px × 2 = 10px
D'ou La largeur totale = 300 + 40 + 10 = 350px

Avec border-box : tout est inclus dans width alors La largeur totale = 300px

* {
  box-sizing: border-box;
}
  

2.2 Centrage

Centrage horizontal :

.box {
  width: 600px;
  margin: 0 auto;
}
  

Centrage horizontal + vertical :

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  

Exercice 3 : Flexbox

3.1 Barre de navigation

.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #d6b7b7; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 20px; }
.nav-links a { color: white; text-decoration: none; }
  

3.2 Cartes de même hauteur

.cards { display: flex; gap: 20px; }
.card { flex: 1; display: flex; flex-direction: column; }
.card-link { margin-top: auto; }
  

Exercice 4 : CSS Grid

4.1 Grille de cartes responsive

.grid-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  

4.2 Layout complet

.page-layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 10px; height: 400px; }
  

Exercice 5 : Responsive Design

/* Mobile First */
.container {
  width: 100%;
  padding: 15px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
}

.content {
  display: block;
}

.sidebar {
  display: none;
}

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

  .content {
    display: flex;
  }

  .sidebar {
    display: block;
  }
}

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

Mobile → colonne + sidebar cachée
Tablette → ligne + sidebar visible
Desktop → contenu centré

Exercice 6 : Variables CSS et thèmes

:root { --bg-color: #fff0f5; --text-color: #000; }
body.dark-theme { --bg-color: #000; --text-color: #fff; }
body { background-color: var(--bg-color); color: var(--text-color); }
  

Exercice 7 : Transitions et animations

7.1 Bouton animé

button { background-color: #ffb6c1; transition: background-color 0.3s, transform 0.3s; }
button:hover { background-color: #ff69b4; transform: scale(1.1); }
  

7.2 Spinner de chargement

.spinner { border: 4px solid #ffe4e1; border-top: 4px solid #ff69b4; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  

Exercice 8 : Quiz de révision

1. Quel sélecteur a la spécificité la plus haute ? b) #header a
2. Avec box-sizing: border-box, un élément width:200px et padding:20px → b) 200px
3. Pour centrer un élément verticalement et horizontalement avec Flexbox → c) justify-content: center ET align-items: center
4. La valeur 1fr en CSS Grid signifie → b) 1 fraction de l’espace disponible
5. L'approche "Mobile First" utilise → b) min-width dans les media queries