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 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 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