Historique des conversations
Chargement...
Chapitre 0 : Introduction au CSS
Qu’est-ce que le CSS ?
Le CSS (Cascading Style Sheets – feuilles de style en cascade) est un langage utilisé pour styliser des pages web HTML. Il permet de contrôler l’apparence d’un site : couleurs, tailles, marges, polices, positionnement, animations, etc.
Pourquoi utiliser le CSS ?
- 🎨 Pour rendre une page web visuellement agréable
- 📱 Pour créer un design responsive (qui s’adapte aux écrans)
- ⚡ Pour séparer le contenu (HTML) de la présentation (CSS)
- 🔁 Pour réutiliser des styles sur plusieurs pages facilement
Les trois façons d’intégrer du CSS
1. CSS en ligne (inline)
Ajout direct dans l'attribut style d’un élément HTML :
<p style="color: red; font-size: 20px;">Texte rouge</p>2. CSS interne (dans une balise <style>)
À placer dans le fichier HTML, dans la balise <head> :
<style>
p {
color: blue;
font-size: 18px;
}
</style>3. CSS externe (fichier séparé)
La méthode la plus propre et recommandée :
<link rel="stylesheet" href="style.css">Dans le fichier style.css :
p {
color: green;
font-size: 16px;
}Remarque sur la "cascade"
En CSS, si plusieurs règles s'appliquent à un même élément, la dernière définie (ou la plus spécifique) sera prioritaire. C’est ce qu’on appelle le principe de cascade.
Conclusion
Grâce au CSS, tu vas pouvoir donner vie à tes pages HTML et leur donner un vrai style professionnel. Dans le prochain chapitre, nous allons explorer les sélecteurs CSS, qui permettent de cibler précisément les éléments HTML à styliser.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 0
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 — Rôle du CSS
Atelier #1À quoi sert principalement le CSS dans une page web ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Le CSS (Cascading Style Sheets) sert à gérer la mise en forme, le design et l'apparence visuelle des éléments HTML. -->
#2 — Syntaxe de base
Atelier #2Écris une règle CSS simple pour mettre tous les titres <h1> en bleu.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
h1 {
color: blue;
}
#3 — Propriété et Valeur
Atelier #3Dans 'color: red;', identifie la propriété et la valeur.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Propriété : color
Valeur : red
#4 — Commentaires CSS
Atelier #4Comment écrit-on un commentaire en CSS ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Ceci est un commentaire CSS */
#5 — Liaison externe
Atelier #5Quelle balise HTML utilise-t-on pour lier un fichier CSS externe ?
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">