Historique des conversations
Chargement...
Chapitre 13 : Intégrer du CSS dans une page HTML
Chapitre 13 : Intégrer du CSS dans une page HTML
Qu’est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est un langage utilisé pour styliser les pages HTML : couleurs, marges, polices, tailles, alignement, etc.
Méthodes d’intégration
1. CSS en ligne
Directement dans l’attribut style d’un élément HTML :
<p style="color: blue; font-weight: bold;">Texte en bleu et en gras</p>2. CSS interne (dans la page HTML)
<style>
body {
background-color: #f2f2f2;
color: #333;
}
</style>3. CSS externe (fichier séparé)
<link rel="stylesheet" href="style.css">Exemple de fichier CSS
h1 {
color: #007BFF;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}Conclusion
Il est recommandé d’utiliser les fichiers CSS externes pour une meilleure organisation et réutilisabilité du code.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 13
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — CSS en ligne (Inline)
Atelier #1Applique une couleur rouge directement sur un paragraphe via l'attribut style.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<p style="color: red;">Texte rouge</p>
#2 — CSS interne
Atelier #2Où placer les styles CSS dans le fichier HTML (balise style) ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<head>
<style>
p { color: blue; }
</style>
</head>
#3 — CSS externe
Atelier #3Lie un fichier 'style.css' à ta page HTML.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<link rel="stylesheet" href="style.css">
#4 — Priorité
Atelier #4Entre un style inline et un style externe, lequel l'emporte ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Le style inline a une priorité plus élevée (spécificité). -->
<p style="color:green">Gagne sur le fichier CSS</p>
#5 — Classe vs ID
Atelier #5Pour styliser plusieurs éléments identiques, utilises-tu une classe ou un id ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Une classe, car un ID doit être unique. -->
<div class="card"></div>
<div class="card"></div>