HTML & CSS

Qu’est ce qu’un style CSS externe, interne et inline ?

difference entre css interne externe inline

Introduction

Il existe 3 façons d’ajouter des styles CSS à votre site Web: vous pouvez utiliser des CSS internes et inclure des règles CSS dans la section <head> d’un document HTML, vous pouvez pointer vers un fichier .css externe contenant toutes les règles CSS ou utiliser un style CSS inline pour appliquer des règles à certains éléments spécifiques. Ce tutoriel vous explique les trois façons, leurs avantages et leurs inconvénients.

Option 1 – CSS interne

Le code CSS interne est placé dans la section <head> d’une page en particulier. Les classes et les ID peuvent être utilisés pour se référer au code CSS, mais ils sont uniquement actifs sur cette page en particulier. Les styles CSS intégrés de cette façon sont téléchargés à chaque chargement de la page. Donc cela augmente la vitesse de chargement. Cependant, il existe des cas où l’utilisation d’une feuille de style interne est utile. Un exemple : vous voulez envoyer à quelqu’un un modèle de page. Comme tout est sur la page, il sera beaucoup plus facile de voir un aperçu. Le CSS interne est placé entre les balises <style></style> . Un exemple de feuille de style interne:

<head>
 <style type="text/css">
 p {color:white; font-size: 10px;}
 .center {display: block; margin: 0 auto;}
 #button-go, #button-back {border: solid 1px black;}
 </style>
 </head>

Avantages du CSS interne:

  • Seule une page est affectée par la feuille de style.
  • Les classes et les ID peuvent être utilisés par la feuille de style interne.
  • Il n’est pas nécessaire de télécharger plusieurs fichiers. HTML et CSS peuvent être dans le même fichier.

Inconvénients du CSS interne:

  • Augmentation du temps de chargement de la page.
  • Il affecte une seule page – ce n’est pas utile si vous souhaitez utiliser le même style CSS sur plusieurs documents.

Comment ajouter du CSS interne à la page HTML

    1. Ouvrez votre page HTML avec n’importe quel éditeur de texte. Si la page est déjà sur votre compte d’hébergement, vous pouvez utiliser l’éditeur de texte fourni par votre hébergeur. Si vous avez un document HTML sur votre ordinateur, vous pouvez utiliser n’importe quel éditeur de texte pour le modifier. Puis vous enverrez à nouveau le fichier sur votre compte d’ hébergement à l’ aide du client FTP.
    2. Localisez la balise <head> et ajoutez le code suivant juste après:
<style type="text/css">
    1. Maintenant sautez une ligne et ajoutez des règles CSS, par exemple:
body {
 background-color: blue;
 }
 h1 {
 color: red;
 padding: 60px;
 }
  1. Une fois que vous avez terminé d’ajouter des règles CSS, ajoutez la balise de fermeture:
</style>

Le document HTML avec feuille de style interne devrait ressembler à ceci:

<!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: blue;
 }
 h1 {
 color: red;
 padding: 60px;
 }
 </style>
 </head>
 <body>

<h1>Hostinger Tutorials</h1>
 <p>This is our paragraph.</p>

</body>
 </html>

Option 2 – CSS externe

Le moyen le plus pratique d’ajouter un style CSS à votre site Web, est de le lier à un fichier .css externe. De cette façon, toutes les modifications apportées à un fichier CSS externe seront visibles globalement sur votre site Web. Un lien vers un fichier CSS externe est placée dans la section <head> de la page:

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

Tandis que le fichier style.css contient toutes les règles de style. Par exemple:

.xleftcol {
 float: left;
 width: 33%;
 background:#809900;
 }
 .xmiddlecol {
 float: left;
 width: 34%;
 background:#eff2df;
 }

Avantages des CSS externes:

  • Taille des pages HTML  réduite  et structure plus propre.
  • Vitesse de chargement plus rapide.
  • Le même fichier .css est utilisé sur plusieurs pages.

Inconvénients des CSS externes:

  • Il faut attendre la feuille style soit chargée avant que la page ne s’affiche correctement.

Option 3 – CSS en ligne

Le style CSS Inline est utilisé pour une balise HTML spécifique. L’attribut <style> est utilisé pour mettre en forme une balise HTML en particulier. L’utilisation de style CSS de cette façon n’est pas recommandée, car chaque balise HTML doit être stylisée individuellement. La gestion de votre site Web peut devenir trop difficile si vous utilisez uniquement un style CSS inline. Cependant, cela peut être utile dans certaines situations. Par exemple, dans les cas où vous n’avez pas accès aux styles CSS externes ou devez appliquer un style pour un élément unique. Un exemple de page HTML avec un style CSS inline :

<!DOCTYPE html>
 <html>
 <body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
 <p style="color:white;">Something usefull here.</p>

</body>
 </html>

Avantages du CSS Inline:

  • Utile si vous souhaitez tester et prévisualiser des modifications.
  • Utile pour les changements rapides.
  • Réduit les requêtes HTTP.

Inconvénients du CSS Inline :

  • Le CSS inline doit être appliqué à chaque élément.

Conclusion

Vous connaissez maintenant les différentes façons d’ajouter un style CSS à votre site Web et connaissez les différences entre les feuilles de style internes, externes et inline.

Ajouter un commentaire

Cliquez ici pour poster un commentaire

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Commencez à économiser dès maintenant !

Hébergement et nom de domaine tout-en-un à partir de

2
45
/mois
>