CSS pour débutants

Onze étapes pour transformer une page HTML brute en site stylisé. À chaque étape, le résultat à obtenir, les propriétés à employer, et la correction si vous bloquez.

⚡ CSS en 2 minutes

🏗️ HTML

structure et contenu
- balises et sémantique
- ce que vous avez déjà créé
🎨 CSS

apparence et style
- couleurs, polices, layouts
- ce que vous allez apprendre
✨ Résultat

site web magnifique
- Avengers stylisés
- effet WOW garanti !

⚡ Du HTML basique au design incroyable

❌ AVANT : HTML sans CSS

✨ APRÈS : avec CSS

📋 Prérequis

Avant de commencer

avoir terminé le cours HTML débutant
fichier avengers.html créé
structure : header, navigation, sections, articles, tableau, footer
dossier css/ et images dans img/
page Avengers complètement stylisée
navigation interactive avec effets hover
cartes de héros avec animations
tableau stylisé et footer professionnel

La démarche, en trois temps

1. apprendre les bases
2. styliser par Étapes
3. ajouter la magie

📚 Votre programme d’apprentissage

CSS bases

Les fondamentaux
Ouvrir le cours
Flexbox

Mise en page moderne
Ouvrir le cours
CSS Grid

Grilles avancées
Ouvrir le cours
Responsive

Multi-supports
Ouvrir le cours
Animations

Effets dynamiques
Ouvrir le cours
Guide complet

Projet Avengers

Le vocabulaire de base

<link rel="stylesheet">: Lien CSS
background: rgba(): Fond transparent
linear-gradient(135deg, ...): a. = direction diagonale
propriété: valeur;: Syntaxe :
rgba(..., 0.1): d. = fond doré très transparent

Les onze étapes

Étape 1 : créer et lier le fichier CSS
Objectifs
- Créer le fichier css/style.css
- Vérifier la connexion HTML-CSS
- Test avec un style temporaire
Propriétés CSS
- <link rel="stylesheet" href="css/style.css">
- body { background-color: lightgreen; }
Références
- CSS bases Section "CSS externe"
- Structure de fichiers recommandée
Marche à suivre
- Créez le fichier css/style.css
- Vérifiez le lien dans votre HTML
- Ajoutez un test : body { background-color: lightgreen; }
- Ouvrez dans le navigateur pour valider
Vérifiez votre résultat
- 🟢 Succès : La page a un fond vert clair
- ❌ Problème : Vérifiez le chemin du fichier CSS
- 🔄 Une fois confirmé, supprimez le style de test
- 📁 Chemin correct : css/style.css
css

/* Test de connexion CSS */ body { background-color: lightgreen; font-family: Arial, sans-serif; }

Comparez avec votre feuille de style avant de continuer.
Étape 2 : reset CSS et base du body
Objectifs
- Supprimer les marges par défaut
- Dégradé de fond Avengers
- Police moderne
Propriétés CSS
- * { margin: 0; padding: 0; }
- linear-gradient(135deg, #1e3c72, #2a5298)
- color: white
- min-height: 100vh
Références
- CSS bases Box model
- Reset CSS et bonnes pratiques
Marche à suivre
- Supprimez le test précédent
- Ajoutez le reset universel *
- Stylisez le body avec le dégradé
- Testez le résultat
Vérifiez votre résultat
- Le fond part-il du bleu foncé en haut à gauche vers un bleu plus clair en bas à droite ?
- Reste-t-il une bande blanche le long d’un bord de la page ?
- Le texte est-il blanc et lisible jusqu’en bas, même sur une page courte ?
css

/* Reset et base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; line-height: 1.6; min-height: 100vh; }

Comparez avec votre feuille de style avant de continuer.
Pourquoi ce code ?
- * → Cible tous les éléments (reset universel)
- box-sizing → Les dimensions incluent padding et border
- linear-gradient → Dégradé bleu comme l’univers Marvel
- line-height: 1.6 → Améliore la lisibilité
Étape 3 : styliser le header
Objectifs
- Header avec fond semi-transparent
- Titre AVENGERS en or XXL
- Effet 3D avec ombre portée
Propriétés CSS
- background: rgba(0,0,0,0.8)
- text-shadow: 2px 2px 4px rgba(0,0,0,0.7)
- letter-spacing: 3px
- border-bottom: 3px solid #FFD700
Références
- CSS bases Propriétés de texte
- Effets visuels et transparence
Marche à suivre
- Ciblez l’élément header
- Ajoutez le fond semi-transparent
- Stylisez le h1 avec les effets
- Testez l’effet 3D
Vérifiez votre résultat
- Aperçoit-on le dégradé du corps de page par transparence derrière le header ?
- Le titre AVENGERS est-il doré, à lettres espacées, avec une ombre portée nette ?
- Un trait doré sépare-t-il le header du reste de la page ?
css

/* Styles du header */ header { background: rgba(0, 0, 0, 0.8); padding: 20px; text-align: center; border-bottom: 3px solid #FFD700; margin-bottom: 30px; } header h1 { font-size: 3em; color: #FFD700; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); font-weight: bold; letter-spacing: 3px; margin-bottom: 10px; }

Comparez avec votre feuille de style avant de continuer.
Pourquoi des em pour le texte et des px pour le reste ?

Vous avez peut-être remarqué que ce projet mélange deux unités. Ce n’est pas un hasard. Les espacements, bordures et ombres sont en pixels : padding: 20px, border-radius: 15px. Un pixel est une mesure fixe, c’est exactement ce qu’on veut pour une bordure, qui n’a aucune raison de grossir. Les tailles de texte, elles, sont presque toutes en em : font-size: 3em, font-size: 1.2em. Et c’est important. Chaque navigateur permet de choisir sa taille de texte par défaut, un réglage indispensable à qui voit mal. Une taille écrite en pixels ignore ce réglage : le texte restera petit quoi que la personne demande. Une taille en em ou en rem le respecte.
- La règle : px pour ce qui ne doit pas bouger, em ou rem dès qu’il s’agit de texte.
- À chercher : une dizaine de font-size de ce projet sont en pixels. Sauriez-vous les convertir ?
Étape 4 : navigation interactive
Objectifs
- Navigation avec Flexbox
- Boutons avec effets hover
- Transitions fluides
Propriétés CSS
- display: flex; justify-content: center
- gap: 20px
- :hover et transition
- transform: translateY(-2px)
Références
- CSS Flexbox Navigation moderne
- CSS bases Pseudo-classes
Marche à suivre
- Activez Flexbox sur nav
- Stylisez les liens nav a
- Ajoutez les effets :hover
- Testez l’interactivité
Vérifiez votre résultat
- Les liens sont-ils sur une seule ligne, centrés et régulièrement espacés ?
- Le fond d’un lien change-t-il progressivement au survol, sans à-coup ?
- Le lien survolé se décale-t-il légèrement vers le haut ?
css

/* Navigation */ nav { display: flex; justify-content: center; gap: 20px; margin-top: 15px; } nav a { color: white; text-decoration: none; padding: 10px 20px; border-radius: 5px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); transition: all 0.3s ease; } nav a:hover { background: rgba(255, 215, 0, 0.8); color: black; transform: translateY(-2px); }

Comparez avec votre feuille de style avant de continuer.
Étape 5 : section d’accueil stylisée
Objectifs
- Container centré avec largeur max
- Fond semi-transparent
- Typographie optimisée
Propriétés CSS
- max-width: 1200px; margin: 0 auto
- background: rgba(255,255,255,0.05)
- border-radius: 15px
- line-height: 1.8
Références
- CSS bases Box model
- Techniques de centrage moderne
Marche à suivre
- Créez le container main
- Stylisez la section #accueil
- Optimisez la typographie
- Testez le centrage
Vérifiez votre résultat
- Le contenu cesse-t-il de s’élargir au-delà d’une certaine largeur d’écran ?
- Distingue-t-on le bloc de contenu du fond, sans qu’il soit opaque ?
- Les lignes de texte sont-elles assez aérées pour se lire sans fatigue ?
css

/* Section d'accueil */ main { max-width: 1200px; margin: 0 auto; padding: 0 20px; } #accueil { text-align: center; padding: 40px 30px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; margin-bottom: 40px; } #accueil h2 { color: #FFD700; font-size: 2.5em; margin-bottom: 20px; } #accueil p { font-size: 1.2em; margin-bottom: 15px; line-height: 1.8; }

Comparez avec votre feuille de style avant de continuer.
Étape 6 : images responsives et stylées
Objectifs
- Images adaptables
- Bordure dorée élégante
- Effets hover
Propriétés CSS
- max-width: 100%; height: auto
- border: 3px solid rgba(255,215,0,0.6)
- box-shadow: 0 4px 15px rgba(255,215,0,0.3)
- transform: scale(1.05)
Références
- CSS responsive Images
- CSS bases Box model
Marche à suivre
- Rendez toutes les images responsive
- Ajoutez bordures et ombres
- Créez les effets hover
- Testez sur mobile
Vérifiez votre résultat
- L’image se réduit-elle avec la fenêtre sans jamais déborder de son cadre ?
- Ses proportions restent-elles justes, sans écrasement ni étirement ?
- La bordure dorée et l’agrandissement au survol apparaissent-ils ensemble ?
css

/* Images responsives */ img { max-width: 100%; height: auto; border-radius: 10px; border: 3px solid rgba(255, 215, 0, 0.6); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); transition: transform 0.3s ease; margin: 20px 0; } img:hover { transform: scale(1.05); border-color: #FFD700; } /* Image d'accueil plus grande */ #accueil img { max-width: 400px; display: block; margin: 30px auto; }

Comparez avec votre feuille de style avant de continuer.

Étape 7 : cartes des super-héros

Objectifs

Cartes avec Flexbox
Fond semi-transparent
Layout moderne

Propriétés CSS

article { background: rgba(255,255,255,0.1) }
display: flex; align-items: center
gap: 25px
transform: translateY(-5px)

Références

CSS Flexbox Layouts complexes
CSS bases Sélecteurs

Marche à suivre

Stylisez les article
Utilisez Flexbox pour le contenu
Ajoutez les effets hover
Optimisez les images

Vérifiez votre résultat

Les cartes se placent-elles côte à côte sur écran large, et l’une sous l’autre sur mobile ?
L’espacement entre les cartes est-il régulier, sans collage ni trou ?
La carte survolée se soulève-t-elle légèrement ?

css

/* 🎨 Code CSS pour les cartes héros */
/* Section des héros */
.ironman {
    padding: 40px 20px;
    text-align: center;
}
.ironman h3 {
    color: #FFD700;
    font-size: 2.2em;
    margin-bottom: 30px;
}
/* Conteneur des cartes */
.ironman {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/* Chaque carte de héros */
article {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: transform 0.3s ease;
}
article:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
}

/* 📐 Layout des cartes */
/* Contenu de chaque carte */
article > div {
    display: flex;
    align-items: center;
    gap: 25px;
    text-align: left;
}
article img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
}
article h4 {
    color: #FFD700;
    font-size: 1.5em;
    margin-bottom: 10px;
}

Comparez avec votre feuille de style avant de continuer.

Étape 8 : listes et texte stylisés
Objectifs
- Listes sans puces
- Items avec fond coloré
- Bordure gauche dorée
Propriétés CSS
- list-style: none
- border-left: 4px solid #FFD700
- background: rgba(255,215,0,0.1)
- strong { color: #FFD700 }
Références
- CSS bases Listes et typographie
- Sélecteurs et formatage de texte
Marche à suivre
- Supprimez les puces des listes
- Stylisez les items li
- Ajoutez les emphases texte
- Testez les interactions
Vérifiez votre résultat
- Les puces rondes par défaut ont-elles disparu ?
- Chaque item porte-t-il un trait doré sur son bord gauche ?
- Le fond légèrement teinté distingue-t-il les items les uns des autres ?
css

/* 🎨 Code CSS pour les listes */ /* Listes des pouvoirs */ ul { list-style: none; padding: 0; margin: 15px 0; } li { background: rgba(255, 215, 0, 0.1); margin: 8px 0; padding: 12px 15px; border-radius: 5px; border-left: 4px solid #FFD700; transition: background 0.3s ease; } li:hover { background: rgba(255, 215, 0, 0.2); } /* 📝 Styles de texte */ /* Emphases et formatage */ strong { color: #FFD700; font-weight: bold; } em { color: #4A90E2; font-style: italic; } a { color: #FFD700; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } a:hover { border-bottom-color: #FFD700; }

Comparez avec votre feuille de style avant de continuer.

Étape 9 : tableau des statistiques

Objectifs

Tableau moderne
En-tête doré
Lignes alternées

Propriétés CSS

border-collapse: collapse
th { background: rgba(255,215,0,0.2) }
tr:nth-child(even)
overflow: hidden

Références

CSS bases Tableaux
Pseudo-sélecteurs avancés

Marche à suivre

Stylisez le tableau table
Créez l’en-tête doré th
Alternez les lignes
Ajoutez les effets hover

Vérifiez votre résultat

Les bordures du tableau sont-elles fines et jointives, sans double trait ?
L’en-tête se distingue-t-il du reste par son fond doré ?
Une ligne sur deux a-t-elle un fond légèrement différent ?

css

/* 🎨 Code CSS pour le tableau */
/* Section du tableau */
#pouvoirs {
    padding: 40px 20px;
    text-align: center;
}
#pouvoirs h2 {
    color: #FFD700;
    margin-bottom: 30px;
}
/* Tableau */
table {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    border: none;
}

/* 📊 En-tête et lignes */
/* En-tête du tableau */
th {
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
    padding: 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #FFD700;
}
/* Cellules */
td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}
/* Lignes alternées */
tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

Comparez avec votre feuille de style avant de continuer.

Étape 10 : footer professionnel

Objectifs

Footer avec fond foncé
Colonnes avec Flexbox
Copyright centré

Propriétés CSS

background: rgba(0,0,0,0.8)
border-top: 3px solid #FFD700
justify-content: space-around
flex-wrap: wrap

Références

CSS Flexbox Layout footer
CSS responsive Flex-wrap

Marche à suivre

Stylisez l’élément footer
Créez les colonnes avec Flexbox
Ajoutez la section copyright
Optimisez pour mobile

Vérifiez votre résultat

Le pied de page est-il nettement plus sombre que le corps de la page ?
Ses colonnes sont-elles réparties sur la largeur, avec un espace régulier ?
La mention de copyright est-elle centrée sous les colonnes ?

css

/* 🎨 Code CSS pour le footer */
/* Footer */
footer {
    background: rgba(0, 0, 0, 0.8);
    border-top: 3px solid #FFD700;
    margin-top: 50px;
    padding: 40px 20px;
}
footer h2 {
    color: #FFD700;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
}
/* Colonnes du footer */
footer > div:first-of-type {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* ©️ Section copyright */
footer h3 {
    color: #FFD700;
    font-size: 1.2em;
    margin-bottom: 10px;
}
footer p {
    font-size: 0.9em;
    color: #ccc;
    line-height: 1.5;
}
/* Copyright en bas */
footer > div:last-of-type {
    text-align: center;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    padding-top: 20px;
    margin-top: 20px;
}

Comparez avec votre feuille de style avant de continuer.

Étape 11 : effets finaux et polish
Objectifs
- Animations CSS
- Transitions fluides
- Media queries
Propriétés CSS
- @keyframes et animation
- scroll-behavior: smooth
- @media (max-width: 768px)
- transition: all 0.3s ease
Références
- CSS animations Keyframes
- CSS responsive Media queries
Marche à suivre
- Ajoutez les animations keyframes
- Optimisez pour mobile
- Finalisez les transitions
- Testez sur tous les écrans !
Vérifiez votre résultat
- L’animation se déclenche-t-elle à l’arrivée sur la page, puis s’arrête-t-elle ?
- En réduisant la fenêtre sous 768 px, la mise en page bascule-t-elle en une colonne ?
- Tous les effets de survol restent-ils fluides, sans saccade ?
css

/* ✨ Animations et effets */ /* Scroll fluide */ html { scroll-behavior: smooth; } /* Transitions globales */ * { transition: all 0.3s ease; } /* Animation du titre */ header h1 { animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 2px 2px 4px rgba(0,0,0,0.7); } to { text-shadow: 2px 2px 20px rgba(255,215,0,0.8); } } /* 📱 Media queries responsive */ /* Mobile */ @media (max-width: 768px) { header h1 { font-size: 2em; } nav { flex-direction: column; gap: 10px; } article > div { flex-direction: column; text-align: center; } footer > div:first-of-type { flex-direction: column; text-align: center; } }

Comparez avec votre feuille de style avant de continuer.

🦸‍♂️ Votre page Avengers finale 🦸‍♀️

Le résultat des onze étapes, réuni sur une seule page.

Iron Man

Tony stark, génie inventeur et philanthrope
Captain America

Steve rogers, le premier avenger
Thor

Dieu du tonnerre d’Asgard
Avengers initiative

Les plus puissants héros de la terre réunis
Navigation

Liens rapides
Contact

Avengers tower
Design professionnel

Couleurs avengers, typographie élégante, espacement parfait
Interactivité

Effets hover, transitions fluides, navigation moderne
Responsive

Parfait sur mobile, tablette et ordinateur
Animations

Effets visuels dignes d’un blockbuster Marvel

🏆 Récapitulatif de vos acquis

Ce que vous savez faire désormais

Sélecteurs CSS : élément, classe, ID
box Model : margin, padding, border
Flexbox : mise en page moderne
pseudo-classes : :hover, :nth-child
transitions et transforms
Dégradés et transparences
ombres portées et effets 3D
images responsives
animations CSS et keyframes
media queries responsive

🚀 Prêt à devenir un maître du CSS ? 🚀

Transformez vos idées en sites web extraordinaires ! commencez par les bases et progressez jusqu’aux techniques avancées.

Aller aux étapes Revoir les bases CSS

CSS pour débutants

⚡ CSS en 2 minutes

🏗️ HTML

🎨 CSS

✨ Résultat

⚡ Du HTML basique au design incroyable

❌ AVANT : HTML sans CSS

✨ APRÈS : avec CSS

📋 Prérequis

Avant de commencer

La démarche, en trois temps

📚 Votre programme d’apprentissage

CSS bases

Flexbox

CSS Grid

Responsive

Animations

Guide complet

Le vocabulaire de base

Les onze étapes

Étape 1 : créer et lier le fichier CSS

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 2 : reset CSS et base du body

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Pourquoi ce code ?

Étape 3 : styliser le header

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Pourquoi des em pour le texte et des px pour le reste ?

Étape 4 : navigation interactive

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 5 : section d’accueil stylisée

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 6 : images responsives et stylées

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 7 : cartes des super-héros

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 8 : listes et texte stylisés

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 9 : tableau des statistiques

Objectifs

Propriétés CSS

Références

Marche à suivre

Vérifiez votre résultat

Étape 10 : footer professionnel

Objectifs

Propriétés CSS

Références

Pourquoi des em pour le texte et des px pour le reste ?