📚 Plan du cours
📌 1. Définition du CSS
CSS est un langage informatique qui permet de décrire la présentation des documents HTML et XML.
Traduction française : Feuilles de style en cascade
🎯 Explication simple :
HTML = Structure
Les murs, les pièces,
la charpente
CSS = Style
La peinture, la décoration,
l'agencement
Site web fini
Une belle page web
fonctionnelle
📖 Exemple visuel
Sans CSS
Mon Titre
Un paragraphe simple sans aucune mise en forme.
Avec CSS
Mon Titre
Un paragraphe magnifiquement stylisé !
📌 2. Pourquoi utiliser le CSS ?
Sans CSS, pour changer la couleur des titres sur toutes les pages, vous devriez modifier 100 fichiers HTML un par un !
Avec CSS, vous modifiez 1 seul fichier et toutes les pages sont mises à jour automatiquement.
📌 3. Histoire du CSS
📌 4. Comment fonctionne le CSS ?
Le navigateur suit ces étapes :
1. Le navigateur lit le fichier HTML
2. Il rencontre la balise <link rel="stylesheet" href="style.css">
3. Il télécharge le fichier style.css
4. Il applique les règles CSS aux éléments HTML
5. Il affiche la page stylisée à l'écran📌 5. La notion de cascade
Le "C" de CSS signifie Cascade. Cela signifie que plusieurs règles peuvent s'appliquer au même élément, et elles se "superposent".
📌 6. Séparation contenu / présentation
C'est le principe fondamental du web moderne :
📄 HTML (Contenu)
- Structure sémantique
- Texte, images, vidéos
- Liens, formulaires
<h1>Titre</h1>
<p>Paragraphe</p>🎨 CSS (Présentation)
- Couleurs, polices
- Mise en page, positionnement
- Animations, transitions
h1 { color: blue; }
p { font-size: 16px; }✅ Avantage : Un même contenu HTML peut avoir plusieurs présentations CSS différentes (ex: version desktop, version mobile, version imprimée).
📌 7. Avantages du CSS
Réutilisable
Un seul fichier CSS pour tout le site
Performance
Pages plus légères et plus rapides
Responsive
S'adapte à tous les écrans
Maintenance
Modifications centralisées
Accessibilité
Améliore l'accès pour tous
Multi-media
Style différent pour l'impression
📌 8. Les versions du CSS
| Version | Année | Nouveautés |
|---|---|---|
| CSS1 | 1996 | Couleurs, polices, marges, bordures, alignement |
| CSS2 | 1998 | Positionnement absolu/relatif, médias, z-index |
| CSS3 | 2011+ | Modules, flexbox, grid, animations, transitions, variables, transform |
✨ CSS3 apporte :
border-radius (coins arrondis)flexbox et grid (mise en page moderne)animation et transition (mouvements)transform (rotation, zoom, inclinaison)variables CSS (réutilisables)prefers-color-scheme (dark mode)📌 9. Exemples concrets
📝 Exemple 1 : Changer la couleur des liens
a {
color: #3498db;
text-decoration: none;
}
a:hover {
color: #e74c3c;
text-decoration: underline;
}📝 Exemple 2 : Centrer un élément
.centre {
width: 80%;
margin: 0 auto;
text-align: center;
}📝 Exemple 3 : Créer une carte
.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}Exemple de carte
Une carte stylisée avec CSS
📌 10. Quiz de vérification
Question 1 : Que signifie CSS ?
📖 Voir la réponse
Cascading Style Sheets (Feuilles de style en cascade)
Question 2 : Quelle est la principale différence entre HTML et CSS ?
📖 Voir la réponse
HTML structure le contenu, CSS met en forme le contenu.
Question 3 : Que signifie la "cascade" en CSS ?
📖 Voir la réponse
Les règles CSS se superposent. La règle la plus spécifique l'emporte.
Question 4 : Citez 3 avantages du CSS.
📖 Voir la réponse
- Réutilisable (un fichier pour tout le site)
- Facilite la maintenance
- Permet le responsive design
Question 5 : En quelle année CSS1 est-il devenu officiel ?
📖 Voir la réponse
1996
📝 Résumé - Ce qu'il faut retenir
🏠 HTML + 🎨 CSS + ⚡ JavaScript = 🌐 Site web moderne