Qu’est ce qu’un Style CSS Externe, Interne et Inline ?
La principale différence entre le style CSS inline et le style CSS externe est que le CSS inline est traité plus rapidement. En effet, il ne nécessite que le téléchargement d’un seul fichier par le navigateur alors que l’utilisation du CSS externe nécessitera le téléchargement séparé des fichiers HTML et CSS.
Dans ce tutoriel, nous allons comparer en profondeur les trois types de styles CSS : inline, externe et interne. Nous découvrirons également les avantages et les inconvénients de l’utilisation de chaque méthode.
Télécharger l’aide-mémoire CSS complet
Sommaire
Qu’est-ce que le CSS exactement ?
Les feuilles de style en cascade (CSS ou « Cascading Style Sheets » en anglais) sont un langage de balisage responsable de l’apparence de vos pages Web. Cela permet de contrôler les couleurs, les polices et la disposition des éléments, des mots, ou d’un paragraphe de votre site Web.
Ce langage de feuilles de style vous permet également d’ajouter des effets ou des animations à votre site Web. Vous pouvez l’utiliser pour afficher certaines animations CSS comme les effets de clic sur un bouton, les spinners ou les chargeurs, ainsi que les arrière-plans animés.
Sans CSS, votre site Web apparaîtra comme une simple page HTML. Voici à quoi ressemblerait Twitter si nous désactivons son CSS :
La différence entre les styles CSS inline, externes et internes
Il existe trois façons d’implémenter le CSS dans votre HTML : les styles internes, externes et inline. Décortiquons-les.
CSS interne
Le CSS interne ou intégré exige que vous ajoutiez la balise <style> dans la section <head> de votre document HTML.
Ce style CSS est une méthode efficace pour styliser une seule page. Toutefois, l’utilisation de ce style pour plusieurs pages prend beaucoup de temps, car vous devrez placer des règles CSS sur chaque page de votre site Web.
Voici comment utiliser le CSS interne :
1. Ouvrez votre page HTML et repérez la balise d’ouverture <head>.
2. Mettez le code suivant directement après la balise <head>
<style type="text/css">
3. Ajoutez les règles CSS sur une nouvelle ligne. Voici un exemple :
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
4. Ajoutez la balise de fermeture :
</style>
Votre fichier HTML ressemblera à 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>
Les avantages du CSS interne :
- Vous pouvez utiliser des sélecteurs de classe et des sélecteurs d’ID dans cette feuille de style. Voici un exemple :
.class {
property1 : value1;
property2 : value2;
property3 : value3;
}
#id {
property1 : value1;
property2 : value2;
property3 : value3;
}
- Comme vous n’ajouterez le code qu’au sein du même fichier HTML, vous n’aurez pas besoin de télécharger plusieurs fichiers.
Les inconvénients du CSS interne :
- L’ajout du code au document HTML peut augmenter la taille et le temps de chargement de la page web.
CSS externe
Avec le CSS externe, vous liez vos pages Web à un fichier .css externe, qui peut être créé par n’importe quel éditeur de texte sur votre appareil (par exemple, Notepad++).
Ce type de CSS est une méthode plus efficace, notamment pour styliser un grand site Web. En modifiant un seul fichier .css, vous pouvez ainsi changer tout votre site en une seule fois.
Suivez les étapes suivantes pour utiliser un CSS externe :
1. Créez un nouveau fichier .css avec l’éditeur de texte, et ajoutez les règles de style. Par exemple :
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
2. Dans la section <head> de votre page HTML, ajoutez une référence à votre fichier .css externe juste après la balise <title> :
<link rel="stylesheet" type="text/css" href="style.css" />
N’oubliez pas de remplacer style.css par le nom de votre fichier .css.
Les avantages du CSS externe :
- Étant donné que le code CSS se trouve dans un document séparé, vos documents HTML auront une structure plus propre et seront plus petits.
- Vous pouvez utiliser le même fichier .css pour plusieurs pages.
Les inconvénients du CSS externe :
- Vos pages pourraient ne pas rendre correctement jusqu’à ce que le CSS externe soit chargé.
- Le téléchargement ou la liaison de plusieurs documents CSS peut augmenter le temps de téléchargement de votre site.
CSS inline
Le CSS inline est utilisé pour donner un style à un élément HTML spécifique. Pour ce style CSS, il vous suffit d’ajouter l’attribut style à chaque balise HTML, sans utiliser de sélecteurs.
Ce type de CSS n’est pas vraiment recommandé, car chaque balise HTML doit être stylisée individuellement. La gestion de votre site Web peut devenir trop difficile si vous n’utilisez que le CSS inline.
Toutefois, le CSS inline en HTML peut être utile dans certaines situations. Par exemple, dans les cas où vous n’avez pas accès aux fichiers CSS ou lorsque vous devez appliquer des styles pour un seul élément.
Prenons un exemple. Ici, nous ajoutons un CSS inline aux balises <p> et <h1> :
<!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>
Les avantages du CSS inline :
- Vous pouvez facilement et rapidement insérer des règles CSS dans une page HTML. C’est pourquoi cette méthode est utile pour tester ou prévisualiser les modifications sur différents niveaux, et effectuer des corrections rapides sur votre site Web.
- Vous n’avez pas besoin de créer et de télécharger un document distinct comme avec le style externe.
Les inconvénients du CSS inline :
- L’ajout de règles CSS à chaque élément HTML prend du temps et rend votre structure HTML désordonnée.
- Le stylisme de plusieurs éléments peut affecter la taille de votre page et le temps de téléchargement.
Conclusion
Dans ce tutoriel, vous avez appris la différence entre les trois types de CSS : interne, externe et inline. Voici le récapitulatif :
- Interne ou incorporé — ajoutez la balise <style> dans la section <head> du document HTML
- Externe — liez la feuille HTML à un fichier .css distinct
- Inline — appliquez des règles CSS pour des éléments spécifiques.
Alors, quel style CSS allez-vous utiliser ? Partagez votre choix avec nous dans la section des commentaires ci-dessous.
Fatima Zahra est une passionnée du marketing digital et de l'IT, elle fait partie de l'équipe du contenu de notre site web pour apporter à nos chers internautes une meilleure expérience client. Ses passes- temps impliquent le blogging et l'apprentissage des langues pour se connecter véritablement au cœur avec les autres.
