Stylisation CSS : Lier une feuille de style externe à HTML

Introduction

Bienvenue dans votre premier laboratoire CSS ! CSS, qui signifie Cascading Style Sheets (Feuilles de Style en Cascade), est le langage que nous utilisons pour styliser un document HTML. Il décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou dans d'autres médias.

Il existe trois façons d'inclure du CSS dans un document HTML : en ligne (inline), interne (internal) et externe (external). La méthode la plus courante et recommandée est d'utiliser une feuille de style externe. Cette approche sépare votre contenu (HTML) de votre présentation (CSS), rendant votre code plus propre, plus facile à maintenir et réutilisable sur plusieurs pages.

Dans ce laboratoire, vous apprendrez le processus fondamental de stylisation d'une page web à l'aide d'une feuille de style externe. Vous allez :

Créer un nouveau fichier CSS.
Lier ce fichier CSS à un document HTML existant.
Écrire une règle CSS de base pour changer la police de caractères de toute la page.
Visualiser vos modifications dans un navigateur web en direct.

Commençons !

Créer un fichier CSS externe nommé styles.css

Dans cette étape, vous allez créer un fichier dédié pour contenir toutes vos règles CSS. C'est ce qu'on appelle une feuille de style externe. Le script de configuration a déjà créé un fichier index.html pour vous. Maintenant, vous devez créer le fichier CSS qui le stylisera.

En utilisant l'explorateur de fichiers dans le panneau de gauche du WebIDE :

Faites un clic droit sur l'espace vide dans la zone du dossier project.
Sélectionnez "New File" (Nouveau Fichier) dans le menu contextuel.
Une nouvelle boîte de saisie apparaîtra. Tapez styles.css et appuyez sur Entrée.

Vous devriez maintenant voir un nouveau fichier vide nommé styles.css dans votre explorateur de fichiers. C'est là que vous écrirez votre code CSS dans les étapes à venir.

Lier le fichier CSS à un document HTML à l'aide de la balise link

Dans cette étape, vous allez connecter votre fichier styles.css à votre fichier index.html. La simple création du fichier CSS n'est pas suffisante ; vous devez explicitement indiquer au document HTML de l'utiliser. Ceci est fait à l'aide de la balise <link>.

La balise <link> est placée à l'intérieur de la section <head> de votre document HTML. Elle nécessite deux attributs importants :

rel="stylesheet" : Ceci indique au navigateur que le fichier lié est une feuille de style.
href="styles.css" : Ceci spécifie le chemin d'accès au fichier CSS.

Maintenant, ajoutons-le à votre HTML.

Ouvrez le fichier index.html depuis l'explorateur de fichiers.
À l'intérieur de la section <head>, ajoutez la ligne suivante :

<link rel="stylesheet" href="styles.css" />

Après avoir ajouté la ligne, votre fichier index.html devrait ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

Assurez-vous de sauvegarder le fichier (Ctrl+S ou Fichier > Enregistrer).

Ajouter un sélecteur de base pour l'élément body

Dans cette étape, vous allez écrire votre première règle CSS. Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser. Le bloc de déclaration (entre accolades {}) contient une ou plusieurs déclarations, qui sont les styles réels à appliquer.

Nous allons commencer par cibler l'élément <body>. La stylisation du <body> est une pratique courante pour définir les styles par défaut, tels que la couleur de fond et la police, pour l'ensemble de la page.

Ouvrez votre fichier styles.css. Il devrait être encore vide.
Tapez le code suivant pour créer une règle pour l'élément body :

body {
}

Ce code sélectionne l'élément <body> et prépare un bloc de déclaration vide (les accolades) où nous ajouterons les propriétés de style à l'étape suivante.

Définir la propriété font-family sur le sélecteur body

Dans cette étape, vous allez ajouter une déclaration de style à votre règle body. Une déclaration est une paire propriété-valeur (par exemple, propriété: valeur;) qui définit un style spécifique.

Nous utiliserons la propriété font-family pour changer la police de caractères du texte sur la page. En l'appliquant au body, tous les éléments de texte à l'intérieur du body (comme <h1> et <p>) hériteront de cette police. Il est de bonne pratique de fournir une "pile de polices" (font stack) – une liste de polices séparées par des virgules. Le navigateur essaiera la première police, et si elle n'est pas disponible, il essaiera la suivante, et ainsi de suite.

Assurez-vous que votre fichier styles.css est ouvert.
À l'intérieur des accolades du sélecteur body, ajoutez la propriété font-family.

font-family: Arial, sans-serif;

Votre fichier styles.css complet devrait maintenant ressembler à ceci :

body {
  font-family: Arial, sans-serif;
}

Cette règle indique au navigateur de rendre tout le texte à l'intérieur du <body> en utilisant la police Arial. Si Arial n'est pas installée sur le système de l'utilisateur, il utilisera la police sans-serif par défaut du système.

Enregistrer les fichiers et actualiser le navigateur pour voir les changements

Dans cette dernière étape, vous verrez le résultat de votre travail. Après avoir écrit du code, vous devez enregistrer vos fichiers, puis visualiser les changements dans le navigateur.

Assurez-vous que les fichiers index.html et styles.css sont enregistrés. Vous pouvez utiliser le raccourci clavier Ctrl+S ou aller dans Fichier > Enregistrer dans le menu.
Naviguez vers l'onglet Web 8080 situé en haut de l'interface LabEx. Cet onglet affiche la sortie du serveur web exécuté dans votre environnement.
Vous devrez peut-être rafraîchir l'onglet du navigateur pour voir les derniers changements.

Observez le texte sur la page. Il devrait maintenant être affiché dans la police Arial (ou une police sans-serif similaire), ce qui est différent de la police serif par défaut (comme Times New Roman) que les navigateurs utilisent généralement. Le changement peut être subtil, mais il confirme que votre feuille de style externe est correctement liée et appliquée.

N'hésitez pas à expérimenter ! Essayez de changer Arial en Verdana ou Georgia dans votre fichier styles.css, enregistrez-le, et rafraîchissez l'onglet Web 8080 pour voir le changement de police instantanément.

Résumé

Félicitations ! Vous avez terminé avec succès ce laboratoire et avez fait vos premiers pas dans le monde du CSS.

Dans ce laboratoire, vous avez appris la méthode fondamentale et la plus importante pour styliser les pages web :

Comment créer un fichier CSS externe (styles.css).
Comment lier le fichier CSS à un document HTML en utilisant la balise <link> dans la section <head>.
Comment écrire une règle CSS de base en utilisant un sélecteur d'élément (body).
Comment appliquer un style en utilisant une propriété et une valeur (font-family: Arial, sans-serif;).

Cette base de séparation de la structure (HTML) et de la présentation (CSS) est un principe fondamental du développement web moderne. Vous êtes maintenant prêt à explorer des sélecteurs CSS, des propriétés et des concepts plus avancés comme le modèle de boîte (box model), la mise en page (layout) et la conception réactive (responsive design).

Introduction et liaison CSS