1
Exercice 1 — Associe la propriété à sa description
Clique d'abord sur une propriété CSS à gauche, puis sur la description qui lui correspond à droite.
Propriétés CSS
color
background-color
font-size
margin
border
display
Descriptions
Taille du texte
Couleur du texte
Mode d'affichage
Contour de la boîte
Couleur de fond
Espace extérieur
2
Exercice 2 — Trouve l'erreur dans chaque règle CSS
Chaque bloc CSS ci-dessous contient une erreur. Clique sur la correction qui convient !
Erreur 1 — il manque quelque chose à la fin de la déclaration :
h1 {
color: red ???
}
Erreur 2 — le sélecteur de classe est mal écrit :
titre {
font-size: 24px;
}
/* On voulait cibler la classe "titre" */
Erreur 3 — la valeur de couleur est incorrecte :
p {
color: 185FA5; ← code hexa incomplet
}
Erreur 4 — il manque les accolades :
body
background-color: #F1EFE8;
font-family: Arial;
Erreur 5 — la propriété n'existe pas, laquelle est correcte ?
.boite {
text-color: white; ← cette propriété n'existe pas !
}
3
Exercice 3 — L'éditeur CSS en direct !
Modifie le CSS à gauche et vois le résultat apparaitre en direct à droite. Essaie de changer les couleurs, la taille du texte, le padding...
Défi : Rends le titre rouge, le fond de la boîte bleu clair, et ajoute un beau border-radius !
Résultat en direct :
Mon super titre
Je suis une boîte avec du contenu à l'intérieur. Modifie le CSS pour me rendre plus jolie !
💡
Dans un vrai projet, utilise Shift+Alt+F pour formater ton CSS automatiquement. Et Ctrl+S pour sauvegarder !