Comment ajouter des feuilles de style aux pages HTML - Letecode
Suivez nous
Table de matière
  1. Tutoriels
  2. Tutoriel HTML5
  3. Styles en HTML
Chapitres

Styles en HTML

Dernière mise à jour : 04/02/2022

Dans ce tutoriel, vous apprendrez à appliquer des règles de style aux éléments HTML.

Styliser les éléments HTML

HTML est assez limité lorsqu'il s'agit de la présentation d'une page Web. Il a été conçu à l'origine comme un moyen simple de présenter des informations. CSS (Cascading Style Sheets) a été introduit en décembre 1996 par le World Wide Web Consortium (W3C) pour fournir une meilleure façon de styliser les éléments HTML.

Avec CSS, il devient très facile de spécifier des éléments tels que la taille et la police des textes, les couleurs du texte et des arrière-plans, l'alignement du texte et des images, la quantité d'espace entre les éléments, la bordure et les contours des éléments, et beaucoup d'autres propriétés.

Ajout de styles aux éléments HTML

Les informations de style peuvent être jointes en tant que document séparé ou intégrées dans le document HTML lui-même. Voici les trois méthodes d'implémentation des informations de style dans un document HTML.

  • Styles en ligne — Utilisation de l'attribut style dans la balise de d'ouverture HTML.
  • Style intégré — Utilisation de la balise <style> dans la section head du document.
  • Feuille de style externe — Utilisation de l'élément <link>, pointant vers un fichier CSS externe.

Dans ce tutoriel, nous aborderons un par un tous ces différents types de feuilles de style.

Les styles en ligne ont la priorité la plus élevée et les feuilles de style externes la plus basse. Cela signifie que si vous spécifiez des styles pour vos paragraphes dans les feuilles de style intégrées et externes , les règles de style en conflit dans la feuille de style intégrée remplaceront la feuille de style externe.

Styles en ligne

Les styles en ligne sont utilisés pour appliquer les règles de style uniques à un élément, en plaçant les règles CSS directement dans la balise d'ouverture. Il peut être attaché à un élément à l'aide de l'attribut style.

L'attribut style comprend une série de paires de propriété et de valeur CSS. Chaque paire (propriété:valeur) est séparée par un point-virgule ( ;), comme vous le feriez dans une feuille de style intégrée ou externe. Mais tout doit être sur une seule ligne, c'est-à-dire sans saut de ligne après le point-virgule.

L'exemple suivant montre comment définir la couleur et la taille du texte :

 

<h1 style="color:red; font-size:30px;">Un titre</h1>
<p style="color:green; font-size:18px;">un paragraphe.</p>
<div style="color:green; font-size:18px;">un paragraphet.</div>

 

L'utilisation des styles en ligne est généralement considérée comme une mauvaise pratique. Étant donné que les règles de style sont intégrées directement dans la balise html, la présentation se mélange au contenu du document, ce qui rend la mise à jour ou la maintenance d'un site Web très difficile.

Pour en savoir plus sur les différentes propriétés CSS, veuillez consulter la section du tutoriel CSS .

Remarque : il est devenu impossible de styliser les pseudo-éléments et les pseudo-classes avec des styles en ligne. Vous devez donc éviter l'utilisation de l'attribut style dans votre balisage. L'utilisation d'une feuille de style externe est la méthode préférée pour ajouter des informations de style à un document HTML.

Feuilles de style intégrées

Les feuilles de style intégrées ou internes n'affectent que le document dans lequel elles sont intégrées.

Les feuilles de style intégrées sont définies dans la section <head> d'un document HTML à l'aide de la balise <style>. Vous pouvez définir n'importe quel nombre d'éléments <style> à l'intérieur de la section <head>.

L'exemple suivant montre comment les règles de style sont intégrées dans une page Web.

<head>

    <style>

        body {
            background-color: #000;
        }


        h1 {
            color: blue;

        }

        p {
            color: red;
        }

    </style>

</head>

Feuilles de style externes

Une feuille de style externe est idéale lorsque le style est appliqué à de nombreuses pages.

Une feuille de style externe contient toutes les règles de style dans un document séparé que vous pouvez lier à partir de n'importe quel document HTML de votre site. Les feuilles de style externes sont les plus flexibles car avec une feuille de style externe, vous pouvez modifier l'apparence de tout un site Web en mettant à jour un seul fichier.

Vous pouvez joindre des feuilles de style externes de deux manières : liaison et importation :

Liaison de feuilles de style externes

Une feuille de style externe peut être liée à un document HTML à l'aide de la balise <link>.

La balise <link> va à l'intérieur de la section <head>, comme illustré ici :

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Importation de feuilles de style externes

La règle @import est une autre façon de charger une feuille de style externe. L'instruction @import demande au navigateur de charger une feuille de style externe et d'utiliser ses styles.

Vous pouvez l'utiliser de deux manières. Le moyen le plus simple est de l'utiliser dans l'élément <style> de votre section <head>. Notez que d'autres règles CSS peuvent toujours être incluses dans l'élément <style>.

<style>

    @import url("css/style.css");

    p {
        color: blue;
        font-size: 16px;
    }

</style>

De même, vous pouvez utiliser la règle @import pour importer une feuille de style dans une autre feuille de style.

 

@import url("css/layout.css");
@import url("css/color.css");

body {

    color: blue;
    font-size: 14px;

}

Remarque : Toutes les règles @import doivent apparaître au début de la feuille de style. Toute règle de style définie dans la feuille de style elle-même remplace la règle en conflit dans les feuilles de style importées. La règle @import peut entraîner des problèmes de performances, vous devez généralement éviter d'importer des feuilles de style.

 

Balises de formatage de texte en HTML Comment insérer les images dans les pages HTML