🎨 Module 1 — CSS

« L’apparence peut mentir… mais jamais le style »

🎯 Objectifs d’apprentissage

À la fin de ce module, l’apprenti détective sera capable de :

Comprendre le rôle du CSS dans le développement web
Différencier clairement structure (HTML) et apparence (CSS)
Savoir comment le CSS fonctionne et comment il décide qui a raison
Connaître les différentes façons d’intégrer du CSS
Poser les bases d’un design propre, maintenable et responsive

🕵️ Introduction — Qu’est-ce que le CSS ?

Il pleuvait sur la ville. Les pages HTML étaient là, nues, froides, sans âme.

C’est là que le CSS est entré en scène.

Le CSS (Cascading Style Sheets) — ou feuilles de style en cascade — est le langage qui décrit l’apparence visuelle d’un site web. Là où le HTML aligne les faits (titres, paragraphes, images), le CSS décide comment tout ça se présente au monde.

HTML = le squelette CSS = le costume, les couleurs, l’attitude

Sans CSS, une page fonctionne. Avec CSS, elle existe.

🚬 Pourquoi utilise-t-on le CSS ?

Parce qu’un bon enquêteur sépare toujours les faits du style.

✔ Séparer le fond de la forme

Le contenu reste en HTML
Le design vit en CSS

Résultat :

Code plus clair
Modifications rapides
Dossiers bien rangés dans le tiroir

✔ Styliser et embellir une page

Avec le CSS, tu contrôles :

🎨 les couleurs
🔤 les polices
📐 les marges et espacements
🧱 les bordures
🌫️ les ombres
🖱️ les effets au survol
🎞️ les animations

Bref : tout ce que l’utilisateur voit et ressent.

✔ Gérer la mise en page

Le CSS te permet d’organiser la scène du crime :

Colonnes
Lignes
Alignements
Centrage précis

Avec des outils modernes comme :

Flexbox → interrogatoires en ligne droite
CSS Grid → plan de la ville vu d’en haut

✔ Rendre un site responsive

Un bon site s’adapte, peu importe l’écran :

📱 Mobile
📟 Tablette
💻 Ordinateur

Grâce aux Media Queries, le CSS change de comportement selon la taille de l’écran. Comme un détective qui change de veste selon la météo.

🧠 Comment fonctionne le CSS ?

Le CSS repose sur trois piliers, aussi solides qu’un dossier béton.

1️⃣ Les sélecteurs — Qui est ciblé ?

Ils indiquent à qui on applique le style.

p {
  color: blue;
}

👉 Tous les paragraphes <p> passent en bleu. Personne n’y échappe.

2️⃣ Les propriétés — Qu’est-ce qu’on change ?

Elles définissent quoi modifier.

Exemples courants :

color → couleur du texte
background-color → couleur de fond
font-size → taille de police
margin → marges extérieures
padding → marges intérieures

Chaque propriété raconte un détail de l’apparence.

3️⃣ La cascade — Qui a le dernier mot ?

Quand plusieurs styles s’affrontent, le CSS tranche selon :

L’importance (!important) — arme nucléaire
La spécificité
- ID > classe > élément
L’ordre d’apparition
- Le dernier arrivé parle en dernier

La loi du plus précis. Et parfois, du plus brutal.

🧷 Les trois façons d’intégrer du CSS

1️⃣ CSS interne — Dans le dossier HTML

<style>
  h1 {
    color: red;
  }
</style>

✔ Utile pour tester ❌ Mauvais pour les grandes enquêtes

2️⃣ CSS en ligne — Direct sur la cible

<h1 style="color:red;">Titre</h1>

❌ Peu lisible ❌ Peu maintenable ❌ À éviter sauf cas très précis

3️⃣ CSS externe — La méthode professionnelle 🕶️

HTML :

<link rel="stylesheet" href="style.css">

CSS (style.css) :

h1 {
  color: red;
}

✔ Code propre ✔ Réutilisable ✔ Évolutif ✔ Standard du web

💡 Avantages du CSS

🔥 Permet des designs modernes et élégants
📦 Réutilisable sur tout un site
⚡ Rapide grâce au cache navigateur
💼 Standard universel du web
🧠 Indispensable pour le responsive et l’UX

🗂️ Conclusion — Le style fait la différence

Le CSS est ce qui transforme une page HTML brute en une interface crédible, lisible et séduisante.

Maîtriser le CSS, ce n’est pas juste faire joli. C’est contrôler ce que l’utilisateur perçoit, ce qu’il comprend, et ce qu’il ressent.

Dans cette ville, le contenu parle… mais le style décide.

Module 1 — L’apparence peut mentir… mais jamais le style