Créer et relier un fichier CSS

Vous pouvez avoir une page HTML correctement structurée sans que le navigateur applique encore de mise en forme. Pour préparer le travail CSS, il faut relier la page à un fichier de styles et vérifier que le navigateur trouve bien ce fichier. Vous allez mettre en place ce lien sans encore écrire de règle CSS.

Créer les deux fichiers du projet

Une feuille CSS externe est un fichier séparé de la page HTML. Cette séparation vous permet de conserver le contenu dans le document HTML et de regrouper les instructions de présentation dans un fichier dédié. Pour cet exemple, créez un dossier nommé initiation-css, puis placez-y deux fichiers : index.html et styles.css.

initiation-css/
├── index.html
└── styles.css

Le navigateur doit pouvoir localiser styles.css à partir de l’emplacement de index.html. Ici, les deux fichiers sont dans le même dossier : le nom du fichier suffit donc pour indiquer son emplacement. Si vous rangez la feuille CSS dans un sous-dossier, le chemin devra inclure le nom de ce dossier.

Relier la feuille CSS à la page

Dans la page HTML, ajoutez l’élément link dans la partie head. L’attribut rel="stylesheet" indique au navigateur qu’il s’agit d’une feuille de style, tandis que href donne le chemin du fichier à charger. La structure générale du document reprend celle vue dans la leçon sur la structure d’une page HTML.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ma première page stylisée</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Bienvenue</h1>
  <p>Cette page est reliée à une feuille CSS externe.</p>
</body>
</html>

Enregistrez les deux fichiers dans le dossier prévu. Le fichier CSS est volontairement vide : il peut tout de même être chargé par le navigateur, même s’il ne modifie pas encore l’apparence de la page. La prochaine leçon vous apprendra à écrire des instructions dans ce fichier.

Vérifier le chargement dans le navigateur

Ouvrez index.html dans votre navigateur. La page doit afficher le titre « Bienvenue » et le paragraphe. Comme le fichier CSS ne contient encore aucune instruction, son apparence reste celle par défaut du navigateur : ce résultat est attendu et ne signifie pas que le lien est cassé.

Pour confirmer le chargement, ouvrez les outils de développement du navigateur, puis l’onglet « Réseau » ou « Network ». Rechargez la page et recherchez styles.css dans la liste des ressources demandées. Si la requête aboutit, le navigateur a trouvé le fichier ; selon le navigateur, son état peut être indiqué par un code de réussite ou par une icône sans avertissement.

Vous pouvez également ouvrir la console du navigateur pour repérer un message signalant que le fichier est introuvable. Corrigez le chemin ou le nom, enregistrez vos fichiers, puis rechargez la page. Prenez l’habitude de vérifier cette connexion avant de chercher un problème dans le contenu de la feuille CSS : un fichier qui n’est pas chargé ne peut pas agir sur la page.

À retenir

• Placez la page HTML et la feuille CSS dans un emplacement dont vous connaissez l’organisation.
• Reliez le fichier avec link dans head, en utilisant rel="stylesheet" et un href correct.
• Un fichier CSS vide peut être chargé sans produire de changement visuel.
• Vérifiez la requête du fichier dans les outils de développement et contrôlez son nom, son extension et son chemin en cas d’erreur.

Dans la leçon suivante, vous écrirez votre première règle CSS dans le fichier relié à cette page.