Scribd
Importer
6 vues3 pages

Exercices CSS Niveau 2 : Pratique et Créativité

Le document présente une série d'exercices CSS de niveau 2, chacun visant à créer des éléments web stylisés tels qu'un journal en colonnes, un tableau, une bannière, un bouton, une galerie d'images, une carte produit, une liste de navigation, un drapeau, une carte de visite et une page de profil utilisateur. Chaque exercice inclut des instructions précises sur la structure HTML et les styles CSS à appliquer pour obtenir le résultat attendu. L'objectif est de renforcer les compétences en CSS de manière pratique et créative.

Transféré par

urbanya.contact
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues3 pages

Exercices CSS Niveau 2 : Pratique et Créativité

Le document présente une série d'exercices CSS de niveau 2, chacun visant à créer des éléments web stylisés tels qu'un journal en colonnes, un tableau, une bannière, un bouton, une galerie d'images, une carte produit, une liste de navigation, un drapeau, une carte de visite et une page de profil utilisateur. Chaque exercice inclut des instructions précises sur la structure HTML et les styles CSS à appliquer pour obtenir le résultat attendu. L'objectif est de renforcer les compétences en CSS de manière pratique et créative.

Transféré par

urbanya.contact
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Exercices CSS – Niveau 2 (slides 48–84)

Exercice 1 – Le journal en colonnes

Crée une page avec 3 articles <div>.

• Donne-leur une largeur fixe (ex. 300px).


• Affiche-les côte à côte avec display: inline-block;.
• Ajoute une bordure et un fond différent pour chaque article.
Résultat attendu : un mini-journal en 3 colonnes.

Exercice 2 – Le tableau magique

Crée un tableau HTML avec 4 colonnes et 4 lignes.

• Utilise le CSS pour :


o Colorier les en-têtes (<th>) en bleu avec texte blanc.
o Mettre une bordure noire partout (border-collapse: collapse;).
o Alterner la couleur des lignes (pair/impair).
Résultat attendu : un tableau stylisé façon “Excel simplifié”.

Exercice 3 – La bannière héroïque

Crée une <div> qui occupe toute la largeur en haut de la page.

• Mets une image en fond (background-image).


• Ajoute du texte centré verticalement et horizontalement (text-align: center;).
• Le texte doit être blanc avec une ombre (text-shadow).
Résultat attendu : une bannière comme sur un vrai site.

Exercice 4 – Le bouton stylisé

Crée un bouton avec <a> ou <button>.

• Donne-lui :
o Une bordure arrondie,
o Un fond en dégradé,
o Du texte en gras et blanc,
o Une ombre portée.
Résultat attendu : un bouton “moderne”.
Exercice 5 – La galerie d’images

Crée une galerie avec 6 images.

• Chaque image est dans un <div class="carte">.


• Donne une marge de 10px autour de chaque image.
• Ajoute une bordure grise et un padding.
• Fixe la largeur des images à 150px.
Résultat attendu : une galerie d’images alignées et propres.

Exercice 6 – Carte produit

Crée une carte produit en HTML (image, titre, description, prix).

• En CSS :
o Bordure fine et ombre.
o Largeur fixe (250px).
o padding et margin harmonisés.
o Texte du prix en rouge et en gras.
Résultat attendu : une carte e-commerce basique.

Exercice 7 – La liste de navigation horizontale

Crée une liste <ul> avec 5 éléments (Accueil, Blog, Produits, Contact, Aide).

• Mets les <li> en ligne avec display: inline;.


• Ajoute une marge entre chaque.
• Donne un fond différent quand la souris passe dessus (:hover).
Résultat attendu : un menu horizontal simple.

Exercice 8 – Le drapeau CSS

Crée une <div> représentant un drapeau simple (par exemple la France 🇫🇷).

• Utilise div imbriqués ou span avec largeur + hauteur.


• Mets une couleur de fond différente pour chaque bande.
Résultat attendu : un drapeau en pur CSS (sans image).
Exercice 9 – La carte de visite

Crée une carte de visite :

• Un bloc <div> avec :


o Nom + prénom,
o Métier,
o Email et téléphone.
• En CSS :
o Bordure arrondie + ombre,
o Fond dégradé,
o Alignement centré.
Résultat attendu : une mini carte pro.

Exercice 10 – Le défi final – Page complète

Crée une page de profil utilisateur avec :

• Une bannière en haut (fond image + texte).


• Une section “à propos” avec texte justifié.
• Une galerie de 3 photos (miniatures avec bordure).
• Une liste de compétences en colonnes.
• Un bouton “Contacter” stylisé.
Résultat attendu : une page web structurée + stylisée uniquement en CSS de
base, sans flex ni grid (juste float/inline-block + marges/paddings).

Vous aimerez peut-être aussi