Exercice 1 : Mise en forme du texte (Typographie)
Objectif : Modifier la police, la taille et la couleur du texte.
Crée une page avec un titre <h1> et deux paragraphes <p>.
Applique une police personnalisée (font-family)
Change la taille (font-size) et la couleur (color)
Centrer le titre (text-align: center;)
Exercice 2 : Texte décoré
Objectif : Utiliser les propriétés de décoration.
Crée trois phrases avec des styles différents :
Une en gras (font-weight)
Une en italique (font-style)
Une avec un soulignement (text-decoration)
Exercice 3 : Bordures simples
Objectif : Utiliser border.
Crée un bloc <div> contenant un texte et applique :
Une bordure solide rouge de 3px
Des bords arrondis (border-radius)
Une largeur et hauteur fixées
Exercice 4 : Ombres sur le texte et les boîtes
Objectif : Découvrir text-shadow et box-shadow.
Crée un titre avec une ombre portée sur le texte et un encadré avec une ombre légère.
Exercice 5 : Marges et espacements internes
Objectif : Comprendre margin et padding.
Crée deux paragraphes dans un <div> :
Ajoute de l’espace intérieur (padding: 20px)
Laisse un espace extérieur entre les paragraphes (margin: 15px)
Exercice 6 : Image stylisée
Objectif : Travailler les propriétés des images.
Insère une image et applique :
Largeur et hauteur fixes
Coins arrondis (border-radius)
Une ombre douce (box-shadow)
Une opacité réduite à 0.9
Un effet hover (augmentation d’opacité à 1)
Exercice 7 : Carte de profil
Objectif : Combiner typographie, bordures et image.
Crée une carte de profil avec :
Une photo de profil circulaire
Un nom stylisé
Une description avec fond coloré et ombre
Exercice 8 : Fiche produit e-commerce
Objectif : Structurer une fiche et appliquer un style moderne.
Affiche un produit (image + titre + prix + bouton “Acheter”)
Bordure arrondie
Ombre légère
Bouton avec effet au survol
Exercice 9 : Bannière publicitaire
Objectif : Utiliser marges, padding et images d’arrière-plan.
Crée une bannière avec :
Une image de fond (background-image)
Du texte centré
Une zone avec padding et effet d’ombre
Exercice 10 : Page complète de présentation
Objectif : Réinvestir toutes les notions.
Crée une mini-page web avec :
Un titre principal (typographie + ombre)
Une section de contenu avec marges et bordures
Une image décorée avec border-radius et box-shadow
Un pied de page stylisé