La feuille introuvable — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 1)

La feuille introuvable

Premiers pas en CSS · niveau 1 (application)

Énoncé

Une étudiante a placé horaires.html et style.css dans le même dossier. Sa page s'affiche sans aucun style.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Horaires</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Horaires de la librairie</h1>
</body>
</html>

Trouver l'erreur. Comment les outils de développement la révèlent-ils ?
Le validateur HTML ne signale rien ; pourquoi ?
Que se passerait-il si l'on oubliait l'attribut rel="stylesheet" ?

Corrigé

Le chemin css/style.css désigne un fichier dans un sous-dossier css qui n'existe pas. Il faut href="style.css". L'onglet Console affiche une erreur de chargement (fichier introuvable) et l'onglet Network montre la requête en échec (404 sur un serveur, ou « failed » en ouvrant le fichier directement).
Le validateur vérifie la syntaxe de la page, pas l'existence des fichiers liés : css/style.css est une adresse correctement écrite.
Sans rel="stylesheet", le navigateur ne sait pas que le fichier est une feuille de style : il ne le télécharge même pas comme tel et ne l'applique pas. Le validateur, en configuration recommandée, ne le signale pas non plus : seul le rendu (et l'onglet Network, où la feuille n'apparaît pas) trahit l'oubli.