Chargement...

Ajouter du CSS

Vous pouvez écrire des règles CSS parfaites et ne constater aucun changement si le navigateur ne les charge jamais. Cette séance présente les trois façons courantes de relier le CSS au HTML, et celle qu'il vaut mieux adopter par défaut.

Comment ajouter du CSS à une page HTML ?

Il y a trois possibilités : une feuille de style externe liée depuis le head, un bloc interne <style> dans le head, ou l'attribut en ligne style sur un seul élément. Pour un vrai site ou un projet de plusieurs pages, commencez par un fichier .css externe.

Les trois méthodes en un coup d'œil

Ce tableau vous aide à choisir une méthode avant de coder. Chaque section suivante en donne un court exemple.

📊 Façons d'ajouter du CSS

Méthode Emplacement Réutilisation entre pages Meilleur usage courant
Feuille de style externe Fichier .css séparé + <link> dans le head Excellente Choix par défaut pour les projets et ce cours
CSS interne <style> … </style> dans le head du HTML Une seule page Démos rapides et exercices dans un seul fichier
CSS en ligne style="…" sur un élément HTML Aucune Petite retouche ponctuelle (à utiliser avec parcimonie)

Feuille de style externe (choix par défaut recommandé)

Gardez le HTML et le CSS dans des fichiers distincts. Dans le head, pointez vers votre feuille de style avec un élément link : le navigateur récupère le fichier CSS et applique ses règles.

Lier une feuille de style externe

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

Écrivez vos règles dans styles.css, à côté du fichier HTML (si le fichier est dans un sous-dossier, adaptez le href) :

Fichier externe styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

Pourquoi l'externe l'emporte en situation réelle

  • Une seule feuille de style peut mettre en forme de nombreuses pages HTML
  • Vous changez l'apparence sans fouiller dans le balisage
  • Le navigateur peut mettre le fichier .css en cache au lieu de le retélécharger à chaque page
  • Soignez rel="stylesheet" et un href correct : une faute de frappe dans le chemin laisse la page sans style, sans aucun message d'erreur

CSS interne (<style> dans le head)

Pour une seule page d'entraînement, vous pouvez placer les règles dans un élément <style> du head. Les séances Introduction et Syntax utilisaient ce schéma pour garder HTML et CSS dans un même fichier.

Bloc style interne

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

Quand le CSS interne convient

Le CSS interne est tout à fait correct pour des démos et des devoirs à rendre en un seul fichier. En revanche, il passe mal à l'échelle : copier le même bloc <style> dans chaque page crée des versions qui divergent et rend les mises à jour pénibles. Passez à un fichier externe dès que vous avez plusieurs pages, ou si vous voulez une séparation plus propre.

CSS en ligne (attribut style)

Le CSS en ligne place les déclarations directement sur l'élément avec l'attribut style. Pas de sélecteur, pas de fichier à part : seul cet élément est mis en forme.

Attribut style en ligne

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

À utiliser avec parcimonie

Les styles en ligne sont pratiques pour un test rapide et provisoire, mais ils mélangent présentation et balisage, se réutilisent mal et deviennent difficiles à surcharger quand la cascade et la spécificité entrent en jeu. Préférez des classes dans une feuille de style. Vous verrez les règles de résolution des conflits de cascade dans les séances suivantes ; pour l'instant, considérez le style en ligne comme une exception, pas comme une habitude.

Quelle méthode choisir ?

  • Construire un site ou suivre les projets de ce cours : feuille de style externe
  • Un court fichier de démonstration en classe : <style> interne acceptable
  • Modifier un seul élément quelques secondes pendant le débogage : le style en ligne peut dépanner, puis déplacez la règle dans une feuille de style
    Mélanger les méthodes est permis. Quand une même propriété est définie à plusieurs endroits, le navigateur applique les règles de la cascade (abordées plus tard). Une bonne habitude : mettre les styles durables dans le fichier externe et éviter de répartir la même propriété entre les trois méthodes.

À vous d'essayer

  1. Créez howto.html et styles.css dans le même dossier.
  2. Dans howto.html, ajoutez un head contenant <link rel="stylesheet" href="styles.css"> et un titre dans le body : <h1 class="hero">How-to practice</h1>.
  3. Dans styles.css, écrivez : .hero { color: #0f766e; }. Ouvrez le fichier HTML dans un navigateur.
  4. Remplacez la couleur par #1d4ed8, enregistrez le fichier CSS et actualisez la page : la couleur du titre doit changer.
  5. Ajoutez temporairement style="color: #b45309;" sur le h1, actualisez, puis retirez l'attribut pour que la feuille de style reprenne la main.

Erreurs fréquentes

  • Mettre <link rel="stylesheet" …> dans le body par habitude : sa place est dans le head, avec les autres métadonnées du document
  • Faute de frappe dans href (style.css au lieu de styles.css) : le fichier n'est jamais chargé et la page reste sans style
  • Oublier rel="stylesheet" sur l'élément link
  • Coller un bloc <style> complet dans chaque page au lieu de partager un seul fichier externe
  • Utiliser style en ligne pour chaque couleur et chaque police : le balisage devient encombré et difficile à maintenir

Résumé

  • Trois façons : feuille de style externe, <style> interne, attribut style en ligne
  • Pour de vraies pages : fichier externe avec <link rel="stylesheet" href="…"> dans le head
  • Le CSS interne convient à l'entraînement en un seul fichier ; le style en ligne, aux retouches rares et ponctuelles
  • Une faute dans le chemin ou un rel oublié sont des causes fréquentes de styles « sans effet »
  • Entraînez-vous : liez un vrai fichier .css, modifiez une valeur et actualisez la page

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel