Lier le CSS au HTML

Il existe trois façons d'ajouter du CSS dans une page :

1. Inline (à éviter) : style directement sur une balise HTML
2. Interne : bloc <style> dans la page
3. Externe (recommandé) : fichier .css séparé

Exemple recommandé(fichier externe) :

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

Pourquoi privilégier le fichier externe :

• meilleure organisation
• réutilisation sur plusieurs pages
• maintenance plus simple quand le projet grandit

En pratique, c'est la méthode standard en production.

A retenir

Le CSS inline dépanne, mais devient vite ingérable. Le CSS interne peut servir pour un test rapide. Le CSS externe reste la meilleure option pour un vrai projet.

Mini pratique

Crée un fichier style.css, lie-le avec <link>, puis modifie la couleur d'un titre. Tu verras immediatement l'effet de la séparation HTML/CSS.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.