w3docs logo
Comment pouvez-vous ajouter du CSS ?
Commencer le Quiz - "CSS - Les bases"

Comment ajouter du CSS : Feuilles de style en ligne, internes, externes et importées

Le CSS, ou Cascading Style Sheets, est un langage utilisé pour styliser des pages web. Il existe quatre façon d'intégrer du CSS à un document HTML : les feuilles de style en ligne, internes, externes et importées.

Feuilles de style en ligne

Elles sont utilisées pour appliquer un style à un unique élément HTML. Pour ce faire, on doit ajouter l'attribut "style" à l'élément HTML. Par exemple, pour styliser un paragraphe, on utiliserait :

<p style="color:red;"> Ceci est un paragraphe rouge. </p>

Feuilles de style internes

Les feuilles de style internes sont utilisées pour styliser une page web unique. Pour ce faire, le CSS est placé entre les balises <style> dans l'en-tête <head> de l'HTML. Par exemple :

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

Feuilles de style externes

Les feuilles de style externes sont utilisées pour styliser plusieurs pages web. Une feuille de style CSS est créée séparément et est liée à la page HTML en utilisant la balise <link>. Par exemple :

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

Dans ce cas, le fichier styles.css contient tout le CSS.

Feuilles de style importées

On peut également utiliser la règle @import pour importer une feuille de style dans une autre. Il est possible de l'utiliser soit dans une feuille de style externe, soit dans une feuille de style interne.

@import url('styles.css');

Néanmoins, malgré sa praticité, cette méthode est à éviter car elle peut générer des appels HTTP supplémentaires et ralentir le chargement de la page.

En somme, le choix de la méthode d'intégration du CSS dépend de votre projet. Pour un petit projet avec peu de styles et de pages, les feuilles de styles en ligne ou internes peuvent suffire. Pour des projets plus importants, il est préférable d'utiliser des feuilles de style externes pour maintenir une meilleure organisation et facilité de maintenance.

Related Questions

Trouvez-vous cela utile?