Aller au contenu principal

Feuille de style séparée

Notions théoriques​

Dans les séances précédentes, nous avons vu comment ajouter du style à notre page HTML en utilisant des balises CSS directement dans le fichier HTML. Cependant, cette méthode peut rapidement devenir complexe et difficile à gérer lorsque notre site Web comprend plusieurs pages. En effet, si nous voulons changer le style de notre site, nous devons le faire manuellement sur chaque page, ce qui peut être fastidieux et source d'erreurs.

La solution à ce problème est d'utiliser une feuille de style séparée. Il s'agit d'un fichier CSS distinct dans lequel nous définissons tous nos styles, et que nous relions à nos pages HTML. De cette façon, nous pouvons facilement changer le style de notre site en modifiant un seul fichier.

Pour lier une feuille de style à une page HTML, nous utilisons la balise <link>, que nous plaçons dans l'en-tête (<head>) de notre page. La balise <link> a plusieurs attributs, mais les plus importants pour nous sont rel (qui doit être défini sur "stylesheet") et href (qui est le chemin vers notre fichier CSS).

  • <link> : Permet de lier une feuille de style à une page HTML. Les attributs importants sont rel (qui doit être défini sur "stylesheet") et href (qui est le chemin vers le fichier CSS).
Bonne pratique - Balise link dans head

Placez toujours la balise <link> dans <head>, avant les balises <script> — le navigateur charge le CSS avant de rendre la page.

Exemple pratique​

Imaginons que nous ayons une page HTML simple avec un peu de style intégré :

<!DOCTYPE html>
<html>
<head>
    <title>Ma page</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Bonjour le monde !</h1>
</body>
</html>

Nous allons maintenant extraire le style de cette page et le mettre dans un fichier CSS séparé. Nous créons un nouveau fichier que nous appelons "styles.css", et nous y copions le contenu de la balise <style> :

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}

Ensuite, nous modifions notre page HTML pour y ajouter un lien vers notre nouvelle feuille de style :

<!DOCTYPE html>
<html>
<head>
    <title>Ma page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bonjour le monde !</h1>
</body>
</html>

Et voilà ! Notre page HTML est maintenant liée à notre feuille de style séparée.

Bonne pratique - Nommage du fichier CSS

Nommez votre fichier CSS styles.css par convention — tout le monde cherchera ce nom quand il devra modifier l'apparence du site.

Test de mémorisation/compréhension​


Qu'est-ce qu'une feuille de style ?


Quelle est la balise utilisée pour lier une feuille de style CSS à un document HTML ?


Où doit-on placer la balise `<link>` dans le document HTML ?


Quelle est la valeur de l'attribut `rel` pour lier une feuille de style ?


Quel attribut de la balise `<link>` spécifie le chemin vers le fichier CSS ?


Quel est l'avantage principal d'utiliser une feuille de style externe ?


Quelle est la syntaxe correcte pour lier une feuille de style externe ?


Dans quel dossier doit se trouver la feuille de style si on utilise le chemin 'styles.css' ?


Quelle balise doit être supprimée de la page HTML lorsque vous utilisez une feuille de style externe ?


Quelle est la différence entre une feuille de style interne et une feuille de style externe ?


Quel est l'effet d'ajouter plusieurs feuilles de style externes à une page HTML ?


Quel attribut de la balise `<link>` spécifie le chemin vers le fichier CSS ?


Où doit-on placer la balise `<link>` pour lier une feuille de style à une page HTML ?


Quel est l'avantage d'utiliser une feuille de style séparée ?


Quelle est la valeur de l'attribut `rel` pour une feuille de style ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez devoir créer une feuille de style séparée pour votre site de jeux vidéo préféré que vous avez créé lors des séances précédentes.

  1. Créez un nouveau fichier que vous appellerez styles.css.

  2. Fusionnez tous les styles de vos pages HTML dans ce nouveau fichier.

Bonne pratique - Regrouper les styles

Regroupez tous vos styles dans un seul fichier styles.css pour faciliter la maintenance et la coherence visuelle du site.

  1. Supprimez les balises <style> de vos pages HTML.

  2. Ajoutez un lien vers votre nouvelle feuille de style dans l'en-tête de vos pages HTML :

Bonne pratique - Chemin du fichier CSS

Verifiez que le chemin href de la balise <link> correspond exactement au nom et a l'emplacement de votre fichier CSS.

  1. Vérifiez, dans votre navigateur, que vos pages s'affichent correctement avec les nouveaux styles.
Une solution