Niveau 1 — Introduction

Les différentes façons d'écrire du CSS

Inline, interne ou externe — comprendre les méthodes et leur ordre de priorité.

1. Le concept

Il existe trois façons d'appliquer du CSS à un document HTML. Chacune a ses avantages et inconvénients, et il existe un ordre de priorité quand plusieurs méthodes s'appliquent au même élément.

2. Le CSS inline (attribut style)

Les styles sont écrits directement sur l'élément HTML avec l'attribut style.

<p style="color: blue; font-size: 18px;">
  Ce texte est bleu et mesure 18px.
</p>

Caractéristiques

À éviter en production. Le CSS inline est difficile à maintenir, impossible à réutiliser, et rend le HTML illisible. Utilise-le uniquement pour des tests rapides ou des cas très spécifiques (ex: JS qui injecte un style dynamique).

3. Le CSS interne (balise <style>)

Les styles sont écrits dans une balise <style> placée dans le <head> du document HTML.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Page avec CSS interne</title>
  <style>
    h1 {
      color: navy;
      font-size: 2rem;
    }

    p {
      line-height: 1.6;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Titre</h1>
  <p>Paragraphe stylisé.</p>
</body>
</html>

Caractéristiques

Quand l'utiliser ? Pour des pages uniques, des prototypes rapides, ou quand le CSS est spécifique à cette seule page.

4. Le CSS externe (fichier .css séparé)

C'est la méthode professionnelle et recommandée. Le CSS est dans un fichier séparé, lié via la balise <link>.

Structure des fichiers

mon-projet/
├── index.html
├── style.css
├── pages/
│   ├── about.html
│   └── contact.html
└── css/
    ├── global.css
    └── components.css

Le fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="titre">Bienvenue</h1>
  <p class="texte">Ceci est un paragraphe.</p>
</body>
</html>

Le fichier CSS

/* style.css */

.titre {
  color: #1e293b;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.texte {
  color: #64748b;
  line-height: 1.6;
}

Avantages

Bonne pratique : En production, on utilise presque toujours le CSS externe. C'est le standard de l'industrie.

5. Utiliser plusieurs feuilles CSS

On peut inclure plusieurs fichiers CSS dans une même page :

<head>
  <!-- Reset CSS -->
  <link rel="stylesheet" href="css/reset.css">

  <!-- Styles globaux -->
  <link rel="stylesheet" href="css/global.css">

  <!-- Styles des composants -->
  <link rel="stylesheet" href="css/components.css">

  <!-- Styles de la page -->
  <link rel="stylesheet" href="css/page-accueil.css">
</head>
Règle importante : L'ordre des fichiers <link> compte ! Si deux fichiers définissent la même propriété pour le même élément, c'est le dernier fichier qui gagne (en l'absence d'autre facteur de cascade).

6. L'ordre de priorité des trois méthodes

Quand les trois méthodes s'appliquent au même élément, voici l'ordre de priorité (du plus fort au plus faible) :

Priorité Méthode Exemple
1 (plus forte) Inline (style="...") <p style="color: red;">
2 Interne (<style>) <style>p { color: blue; }</style>
3 (plus faible) Externe (<link>) link rel="stylesheet" href="style.css"

Démonstration :

<!-- Fichier externe : style.css -->
<!-- p { color: green; } -->

<head>
  <link rel="stylesheet" href="style.css">  <!-- 3ème priorité -->
  <style>
    p { color: blue; }  <!-- 2ème priorité -->
  </style>
</head>
<body>
  <p style="color: red;">Ce texte sera ROUGE</p>
  <!-- 1ère priorité (inline) -->
</body>
Attention : Cette priorité est une simplification. En réalité, c'est le système de cascade (spécificité + ordre) qui détermine le style final. Nous étudierons ce système en détail dans le Niveau 3.
Règle d'or : En pratique, ne mélange JAMAIS les trois méthodes. Utilise le CSS externe (99% des cas), et réserve l'interne à des cas exceptionnels. L'inline devrait être banni de ton workflow.

7. Erreurs fréquentes

Erreur 1 : Omettre rel="stylesheet" 
<!-- FAUX — le navigateur ignorera le fichier CSS -->
<link href="style.css">

<!-- CORRECT -->
<link rel="stylesheet" href="style.css">
Erreur 2 : Mauvais chemin vers le fichier CSS 
<!-- Si la structure est : -->
<!-- projet/
     ├── index.html
     └── css/style.css -->

<!-- FAUX -->
<link rel="stylesheet" href="style.css">

<!-- CORRECT -->
<link rel="stylesheet" href="css/style.css">
Erreur 3 : Placer <link> dans le <body> 
<!-- FAUX — doit être dans <head> -->
<body>
  <link rel="stylesheet" href="style.css">
</body>

<!-- CORRECT -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

8. Mini-défi

Exercice : Les trois méthodes

  1. Crée un fichier index.html.
  2. Ajoute un paragraphe <p id="test">Bonjour</p>.
  3. Méthode 1 : Ajoute un style inline qui rend le texte rouge.
  4. Méthode 2 : Ajoute une balise <style> dans le <head> qui rend le texte bleu.
  5. Méthode 3 : Crée un fichier style.css et lie-le avec <link>. Définis color: green.
  6. Quelle couleur s'affiche ? Pourquoi ?

9. Projet d'application

Projet : Mini-page avec CSS externe

Crée une page HTML contenant :

  • Un en-tête avec un titre et une navigation (2 liens).
  • Une section avec 3 paragraphes.
  • Un pied de page avec une mention copyright.

Crée un fichier style.css séparé et applique :

  • Une couleur de fond pour l'en-tête.
  • Un espacement entre les sections.
  • Un style différent pour le lien de navigation au survol (utilise :hover dans le CSS externe).
  • Une police différente pour le titre.

Ce projet te confirme que le CSS externe peut gérer tous les styles d'une page, y compris les pseudo-classes.

10. Révision

Quiz rapide

  1. Liste les trois façons d'écrire du CSS.
  2. Quelle est la méthode recommandée en production ?
  3. Quelle est l'ordre de priorité (du plus fort au plus faible) ?
  4. Où doit se placer la balise <link> ?
  5. Peut-on utiliser :hover avec le CSS inline ?
  6. Pourquoi l'ordre des fichiers <link> est-il important ?