Lier du CSS à du HTML : link, style, @import et corriger les chemins
Liez une feuille de style avec l'élément link, ou utilisez style, les styles inline ou @import. Testez en direct les chemins relatifs et absolus, et suivez une checklist quand le CSS refuse de se charger.
Comment lier du CSS à du HTML
Pour lier un fichier CSS à une page HTML, placez <link rel="stylesheet" href="styles.css"> dans le head. Le href est un chemin qui va du fichier HTML au fichier CSS : un fichier situé dans un dossier css nécessite donc href="css/styles.css". Vous pouvez aussi écrire du CSS dans un élément style, dans un attribut style, ou importer des fichiers avec @import.
Quatre façons d'ajouter du CSS à une page
Méthode
Où la placer
Idéal pour
<link rel="stylesheet">
Dans le head
Presque tout : un fichier partagé par de nombreuses pages
Élément <style>
Dans le head
Petites pages, CSS critique, démos
Attribut style="..."
Sur un seul élément
Valeurs ponctuelles définies par le code
@import url(...)
En haut d'un fichier CSS
Découper le CSS en couches ou en fichiers
Presque chaque page sans style s'explique par le chemin ou les attributs de l'élément link. Ce guide présente chaque façon d'ajouter du CSS, inclut un vérificateur de chemin qui calcule exactement l'URL vers laquelle pointe votre href, et se termine par une checklist pour les cas où les styles n'apparaissent toujours pas.
Saisissez l'adresse de votre page HTML, telle qu'elle apparaît dans la barre du navigateur.
Saisissez le href utilisé dans l'élément link.
Le vérificateur affiche l'URL complète que le navigateur va demander, calculée dans votre navigateur avec les règles d'URL standard.
Ouvrez cette URL dans un nouvel onglet. Si elle n'affiche pas votre CSS, le chemin est faux.
L'attribut type="text/css" est facultatif. Le CSS est le seul langage de feuille de style utilisé par les navigateurs.
Placez les liens de feuille de style dans le head. Les liens dans le body sont autorisés mais peuvent provoquer un flash de contenu sans style.
Ajoutez un attribut media comme media="print" pour appliquer une feuille de style uniquement quand cette condition est remplie.
L'ordre compte. Quand deux règles ont la même spécificité, celle chargée en dernier l'emporte : liez donc votre propre CSS après tout framework.
Questions fréquentes
Pourquoi mon fichier CSS ne se lie-t-il pas à mon HTML ?
Vérifiez d'abord le chemin : ouvrez les outils de développement du navigateur, allez dans l'onglet Réseau et trouvez la requête CSS. Un 404 signifie que le href pointe au mauvais endroit. Vérifiez aussi que rel="stylesheet" est bien orthographié, que les noms de fichiers ont la même casse, et que vous avez enregistré le fichier.
Quelle est la différence entre un chemin relatif et un chemin absolu ?
Un chemin relatif comme css/site.css est résolu à partir du dossier de la page actuelle. Un chemin qui commence par / est résolu à partir de la racine du site, et une URL complète qui commence par https:// pointe vers une adresse exacte. Les chemins depuis la racine ne fonctionnent pas quand vous ouvrez le fichier directement depuis le disque.
Faut-il utiliser @import ou link ?
Préférez link. Chaque @import n'est découvert qu'une fois téléchargé le fichier qui le contient, donc les imports en chaîne se chargent les uns après les autres. @import est utile pour ordonner avec layer() ou dans un outil de build qui regroupe de toute façon les fichiers.
Comment remonter d'un dossier dans le href ?
Utilisez ../ pour chaque niveau. Une page en /blog/post.html avec un CSS en /css/site.css utilise href="../css/site.css", ou le chemin racine href="/css/site.css" quand le site tourne sur un serveur.
Où doit se placer @import ?
Tout en haut de la feuille de style, avant toute autre règle. Seules les instructions @charset et @layer peuvent le précéder. Un @import placé après des règles de style est ignoré.
Comment le navigateur résout un href
Le navigateur part de l'URL de la page, retire le nom du fichier, et applique le href au dossier restant. ../ remonte d'un dossier, ./ reste dans le même, et une barre oblique initiale repart de la racine du site.
Quand vous ouvrez une page en double-cliquant dessus, la racine est votre disque, pas votre projet. C'est pourquoi /css/site.css fonctionne sur un serveur mais échoue depuis une adresse file://, alors qu'un chemin relatif fonctionne dans les deux cas.
Styles inline et éléments style
Un élément style garde le CSS dans la page, ce qui économise une requête et s'avère pratique pour le petit bloc de CSS critique qui stylise le premier écran. Il ne peut pas être mis en cache séparément et se répète sur chaque page.
Un attribut style s'applique à un seul élément et l'emporte sur les règles des feuilles de style, sauf si elles utilisent !important. Réservez-le aux valeurs calculées par votre code, pas au design courant, qui deviendrait impossible à modifier sur tout le site.
L'élément link
Une page avec une feuille de style liée
Le link se trouve dans le head. Son href est relatif à ce fichier HTML : styles.css doit donc se trouver dans un dossier css placé à côté.
L'élément style et les styles inline
CSS intégré et inline ensemble
L'élément style colore chaque p. L'attribut style du second paragraphe l'emporte, pour cet élément uniquement.
@import dans une feuille de style
Les imports viennent en premier. Ils peuvent porter une media query, une condition supports() ou une cascade layer.
Le CSS ne se charge pas ? Suivez cette liste
Pourquoi les styles ne s'appliquent pas, et comment vérifier
Symptôme
Cause probable
Solution
404 pour le CSS dans l'onglet Réseau
Mauvais chemin ou mauvais dossier
Utilisez le vérificateur de chemin ci-dessus ; essayez un chemin racine sur un serveur
Aucune requête pour le CSS
Faute de frappe dans rel ou link hors du HTML
Écrivez rel="stylesheet" exactement ; placez le link dans le head
Fonctionne en local, échoue en ligne
La casse du nom de fichier diffère
Les anciens styles s'affichent encore
Cache du navigateur
Rechargement forcé, ou ajoutez une version comme styles.css?v=2
Certaines règles sont ignorées
Écrasées par des règles ultérieures ou plus spécifiques
Inspectez l'élément ; vérifiez l'ordre et la spécificité
@import ne fait rien
Il vient après d'autres règles
Déplacez chaque @import en haut du fichier
Bloqué dans la console
Servi avec le mauvais type de contenu
Le serveur doit envoyer text/css pour les fichiers .css
Vérificateur de chemin
Adresse de votre page HTML
href de votre élément link
Le navigateur demande :
Cette adresse de page n'est pas une URL complète. Commencez-la par https:// ou file:///
C'est un fichier sur votre disque. Les chemins qui commencent par / pointent vers la racine du disque, pas vers votre projet.