Les feuilles de style en cascade alias CSS sont un langage de style qui est utilisé pour styliser des éléments HTML apparaissant sur les pages Web. CSS vous permet de générer des feuilles de style réutilisables qui peuvent être utilisées pour styliser plusieurs pages Web en même temps. Ces feuilles de style font gagner beaucoup de temps et sont faciles à entretenir. Mais vous êtes-vous déjà demandé comment relier CSS Styleshets aux documents HTML? Eh bien, nous avons résumé la réponse pour vous dans ce blog.

Les trois façons d'utiliser lesquelles vous pouvez lier CSS à HTML. Ceux-ci sont enrôlés ci-dessous.

1. CSS en ligne
2. CSS interne
3. CSS externe

Toutes ces approches ont été discutées dans ce blog.

Comment lier CSS en ligne à HTML

Si vous adoptez cette approche, vous devez utiliser l'attribut de style de l'élément particulier que vous souhaitez styliser. Insérez simplement le style dans la balise de départ de l'élément.

Cette approche n'est pas recommandée car le style se fait dans la balise de départ d'un élément particulier qui rend le code difficile à lire et à maintenir. De plus, le CSS en ligne n'est pas réutilisable.

Ici, nous avons démontré cette approche avec un exemple.

Html

Comment lier CSS à HTML

CSS en ligne

Dans le code ci-dessus, trois éléments sont générés qui sont; ,

, et

. Tous les trois sont stylés en utilisant l'attribut de style. Le conteneur Div a reçu un rembourrage, et la bordure, en attendant, le titre et le paragraphe reçoivent une certaine couleur de texte.

Sortir

Les éléments ont été stylisés en utilisant CSS en ligne.

Comment lier CSS à HTML en interne

Cette approche dirige les utilisateurs vers des éléments de style en utilisant la balise dans la section tête du document HTML. Vous pouvez soit utiliser les noms des éléments, soit utiliser des classes ou des ID affectés aux éléments pour les styliser avec CSS interne.

Pour comprendre le fonctionnement de cette approche, consultez l'exemple ci-dessous.

Html

Comment lier CSS à HTML

CSS en ligne

Encore une fois trois éléments qui sont ,

, et

sont générés, cependant, pour les styliser, nous utilisons la balise dans la section tête du document. Notez que comme le code ci-dessus ne se compose que trois éléments, nous utilisons donc directement les noms des éléments pour les styliser, cependant, lorsqu'il y a plusieurs éléments de type similaire, vous pouvez leur attribuer des classes et des identifiants afin de styliser chacun d'eux d'entre eux différemment. Le code générera la même sortie que ci-dessus.

Comment lier CSS à HTML à l'extérieur

Cette approche vous permet de lier CSS à HTML en utilisant des feuilles de style externe. Cette approche vous oblige à fabriquer voshets de style dans un fichier séparé, puis à lier ce fichier externe à votre fichier html à l'aide de la balise.

Ici, nous avons joint des captures d'écran de l'éditeur de code pour démontrer correctement cette approche.

Html

Cette capture d'écran ci-dessus montre le fichier HTML. Dans ce document, vous n'avez pas besoin de coiffer les éléments, placez simplement vos éléments d'une manière que vous voulez qu'ils apparaissent sur la page Web. Dans le but de lier votre feuille de style, utilisez simplement l'attribut et fournissez le lien du fichier CSS à l'attribut HREF de la balise.

CSS

Cette capture d'écran représente la feuille de style CSS. Dans ce fichier, utilisez simplement les noms d'élément ou les classes / ID affectés pour les styliser. Le code indiqué dans les captures d'écran générera également la même sortie.

Cette approche est considérée comme la meilleure approche car elle vous permet de générer des feuilles de style séparément, rendant ainsi le code propre, lisible et maintenable.

Conclusion

Afin de lier CSS à HTML, il existe trois approches disponibles; CSS en ligne, CSS interne et CSS externe. CSS en ligne vous oblige à utiliser l'attribut de style d'un élément particulier de la balise de départ pour le styliser, en attendant CSS interne permet aux utilisateurs de styliser des éléments en utilisant la balise dans la section Head du document HTML. Enfin, le CSS externe signifie que vous devez générer des feuilles de style dans un autre fichier et la connecter au document HTML avec la balise. L'approche CSS externe est préférée aux autres car il rend le code lisible et maintenable.