L’inclusion de CSS dans la page HTML est essentielle pour votre style de contenu Web.
Le mot CSS, est un acronyme pour Cascading Style Sheets, où Css contrôle l’apparence et la conception des éléments HTML sur un site Web.
En important le fichier CSS de l’étranger, ou à l’intérieur de la page Web dans votre document HTML.
Cet article étudie différentes méthodes d'intégration du CSS, ainsi que des exemples concrets de sa mise en œuvre, afin de vous orienter dans l'amélioration de l'apparence de votre site et sa compétitivité avec les sites les plus performants.
Afin de préserver la flexibilité et la légèreté de votre page, il est recommandé d'éviter d'utiliser trop de codes CSS.
Comment intégrer efficacement le CSS dans une page HTML
Faire une page web signifie décorer et colorier du texte, des photos, des vidéos et d’autres composants de la page.Après avoir écrit le code HTML, vous devez mettre le code du langage CSS.
Alors, où devrions-nous mettre le code CSS?
Nous aborderons à travers la série d’apprentissage Blogger pour les débutants, et la première explication sera de mettre correctement les codes CSS sur la page html.
Quelle est la meilleure façon de mettre des codes CSS sur la page html.
Les balises HTML d'une page web, c'est quoi exactement ?
Les balises pour la page web sont essentielles dans tout document HTML.
Ils repèrent le début et la fin du document HTML, et enveloppent l'intégralité de la page.
Voici quelques points clés sur les balises < html > :
- Le tag < html >: est le principal conteneur de tous les autres éléments HTML.
- Le tag <head>:Au début d'un document HTML, la balise <head> contient des métadonnées et d'autres informations essentielles pour le navigateur web, mais qui ne sont pas directement visibles à l'utilisateur.
- Le tag <body>; Dans cette section, vous trouverez tout le contenu visible de la page web, tel que les textes, les images, les vidéos, les formulaires, les liens, etc.Je vais vous donner un aperçu complet de la structure d'une page html:
</body>
</html>
Donc où peut on placer le code CSS exactement dans la source de la page ?
Où est-ce que tu places le CSS sur la page HTML?
Nous allons explorer différentes méthodes pour placer l'icône CSS à l'intérieur du code de page HTML sur cette page ou cet article.
Il existe trois méthodes pour insérer des codes CSS dans la page HTML afin de la rendre belle et spéciale.
- CSS interne: le code CSS dans le head.
- CSS inline: le code CSS au sein d'une balise.
- CSS externe: le code CSS sur un fichier externe le la page html.
1. Le code CSS est au sein de la balise de l'en-tête <head>:
En ce qui concerne cette étape, nous plaçons les codes CSS à l'intérieur de la balise verticale < head >, où tous les codes peuvent être récupérés une seule fois, et à l'intérieur de la balise < style >.
Ce processus s’appelle donc CSS interne.
<head>
<style> body_exemple {background-color: #555;}
p_exemple {background-color:#222;color:bleu;}
h1_exemple {color: blue;} span_exemple {color: red;}
</style>
</head>
</body>
Ici le contenu visible sue le navigateur web.</body>
</html>
Cette balise contient les métas-tags, les liens externes, les codes javascripts etc...
Les éléments essentiels pour les moteurs de recherche tels que Google, Altavista, Bing et Yahoo, afin de trouver votre page, l'indexer correctement et vous y référer.
2. Le code CSS dans les balises elles-mêmes
Cette fois, les codes peuvent être placés à l’intérieur de tout balise ( ou tag), quel qu’il soit, et ceci est appelé CSS inline.
<h6 style="color: blue;">Css inline</h6> <p style="color: red;">Css inline</p>
Cette balise principale c'est le corps de la page.
Entre ces deux balises on peut placer notre code visible de notre page html.
<div style="color: #784512;"> un div stylisé</div>
Code CSS ausein d'une balise <p> et une balise <div>.
3. Le code CSS dans un fichier externe ( ex: monstyle.css)
- La dernière étape est la plus importante et fortement recommandée, à savoir placer les codes css dans un dossier hors de la page web afin d’éviter le poids de la page d’accueil html, et ceci est appelé CSS externe.
Le code doit être placé dans un fichier externe (monstyle.css), le navigateur étant indiqué où il se trouve, et cela peut être fait en plaçant un lien dans la liste < head > lien ici </head>.
Les liens externes du code Css sont définis dans l'élément <link> par ce lien: <head> <link rel="stylesheet" href="monstyle.css"> .test {color: black; font-size: 14px; } </head>
Dans un éditeur de texte comme Bloc-Notes, Notepad++ où Visual Studio Code, on peut écrire notre code Css et on fait l'appeler par un lien et place le dans l'entête de la page html.
Enfin, la question la plus importante qui se pose
Comment écrire des codes ?
Pour rédiger le fichier de style CSS, vous pouvez utiliser un simple bloc-notes disponible dans votre système Windows, ou un éditeur HTML comme Notepad++, Visual Studio Code, etc.