11mn de lecture
Comme vous le savez très certainement, vous avez trois manières d’ajouter des feuilles de styles CSS à votre site Web. En effet, vous pouvez inclure des feuilles de styles externes, interne ou inline sur votre document HTML. Alors quelle est la différence entre un style CSS interne, externe et inline? Grâce à ce tutoriel, vous allez découvrir comment et pourquoi appliquer certaines règles à certains éléments spécifiques.
CSS Interne
Comme son nom l’indique, le code CSS Interne se place dans la page HTML même. En effet, ce code s’introduit entre les balises <head> et </head> de votre fichier. De ce fait, les classes et les ID peuvent être utilisés pour se référer au code CSS. Cependant, le code introduit en interne ne fonctionnera que sur la page sur laquelle il a été mis en place. Dans la mesure où le code CSS se trouve sur la même page que le reste du code, le chargement de votre page sera plus long. Le CSS interne est toujours placé entre les balises <style> comme dans l’exemple ci-dessous :
Les avantages sont les suivants :
- Le code étant inséré sur une page spécifique, seule cette page sera affectée par le CSS
- Les classes et les ID peuvent être utilisées sur la page sur laquelle se trouve le style CSS
- Il n’est pas nécessaire de créer deux fichiers, un pour la feuille de style et un pour le code HTML
Cependant, cela peut avoir aussi plusieurs inconvénients qui sont les suivants :
- Le chargement de la page sera plus long dans la mesure où tout se trouve sur la même page.
- Il ne sera pas possible d’utiliser le style CSS sur d’autres pages que sur celle ou le code se trouve
Ajouter du code CSS à une page HTML
Vous pouvez éditer vos fichiers HTML avec n’importe quel éditeur de texte tel que NotePad ++. Certains hébergements Web propose également la possibilité d’éditer vos fichiers en ligne par le biais d’un éditeur en ligne. Une fois le fichier modifié, il ne vous restera plus qu’à uploader le nouveau fichier grâce à un client FTP tel que FileZilla.
Localisez la balise d’ouverture <head> se trouvant en haut de page et ajoutez le code suivant :
<style type="text/css">
Ce code va permettre de définir qu’il s’agit du style CSS a ajouter à votre page. Allez à la ligne suivante et ajoutez vos règles CSS selon vos besoins.
body {
background-color: green;
}
h2 { color:red; padding: 60px ; }
Fermez avec votre balise une fois l’ajout des règles effectuée :
</style>
Outre certaines balises, la majorité des balises tels que les balise <head> ou <style> comprennent toujours une balise d’ouverture et une balise de fermeture.
Comme ajouter du CSS externe à votre page ?
L’ajout de CSS de manière externe est la solution la plus souvent utilisé lors de la création d’un site internet. En effet, cela permet d’ajouter sur toutes les pages de votre site, les modifications mises en place sur votre fichier CSS. Pour cela, il vous suffit d’introduire entre les balises <head>, le lien vers votre feuille de style. Cela s’introduit de la façon suivante :
<head> <link rel="styleheet" type="text/css" href="/dossier/style.css" /> </head>
La feuille de style CSS comportera en revanche toutes les règles de styles à appliquer à vos pages :
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
overflow-x: hidden;
overflow-y: auto;
}
/* Layout */
.wrapper {
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
Les avantages de la mise en place d’une feuille de style externe sont les suivants :
- La taille de votre page HTML sera réduite, ce qui permettra un affichage plus rapide de cette dernière.
- Vous avez la possibilité d’utiliser ce même fichier CSS pour différentes pages.
Il existe néanmoins un inconvénient :
- Il est nécessaire d’attendre le chargement complet de la feuille de style pour que la page s’affiche convenablement.
Comment ajouter du CSS Inline à votre site ?
La troisième et dernière possibilité est d’ajouter du CSS inline à votre page. En effet, cela permet d’ajouter du CSS sur une balise HTML spécifique se trouvant dans votre code. Cependant, il est à noter que cette utilisation est déconseillé car chaque balise HTML devra être stylisé avec les balises CSS.
Cela peut en revanche être utile si vous ne disposez pas d’accès aux différentes feuilles de styles CSS ou si vous désirez modifier le style d’une seule balise. Le code s’imbrique directement dans votre codage HTML comme suit :
<html> <body style="background-color:green;"> <h1 style="color:red;padding:30px;">Mon site Web</h1> <p style="color:white;">La description de mon site.</p> </body>
Le code CSS Inline est déconseillé sauf si vous désirez prévisualiser certaines modifications ou si vous désirez effectuer une modification rapide.
Style CSS externe, interne et inline : Conclusion
Vous êtes désormais en mesure de faire la différence entre feuille de style CSS interne, externe et inline. Vous connaissez aussi les avantages et les inconvénients de chacune des méthodes. La meilleure méthode réside en l’ajout d’une feuille de style CSS externe, ce qui permettra un affichage plus rapide de vos différentes pages 👍
