CSS peut être ajouté en tant que fichier séparé ou intégré directement dans votre document HTML. Si vous souhaitez inclure CSS dans HTML, alors «Styles en ligne», "Styles intégrés", " et le "Feuilles de style externe" sont les trois méthodes pour réaliser cette fonctionnalité. Cependant, le moyen idéal est de créer et d'appliquer des styles à HTML est en utilisant les feuilles de style externe, car une modification minimale de balisage sera nécessaire pour affecter plusieurs pages à la fois.

Cet article discutera de la procédure pour ajouter un Fichier CSS externe dans Html. Nous expliquerons également mise en relation et importation un fichier CSS externe dans HTML. De plus, des exemples liés aux méthodes mentionnées seront fournies. Alors, commençons!

Comment ajouter un fichier CSS externe dans HTML

Si vous souhaitez appliquer un style à plusieurs pages Web simultanément, l'ajout d'un fichier CSS externe est parfait. Un CSS externe est considéré comme un fichier distinct comprenant toutes les règles de style, et il peut être lié à n'importe quelle page HTML de votre site Web. L'ajout d'un fichier CSS externe vous permet de modifier l'apparence de votre site Web en n'apportant que des modifications dans un seul fichier. En outre, garder des fichiers séparés CSS, JavaScript et HTML vous permettent de maintenir le code et d'améliorer la lisibilité.

Il existe deux méthodes pour ajouter un fichier CSS externe HTML: liant et importation.

Lier un fichier CSS externe dans HTML

Tout d'abord, nous créerons un fichier CSS dans HTML. À cette fin, vous pouvez ouvrir votre éditeur de code préféré; Cependant, nous utiliserons le code Visual Studio.

Après avoir ouvert vs Code, nous créerons un "style.CSS » Fichier CSS pour l'ajout de styles:

Ensuite, nous spécifierons le style que nous souhaitons appliquer à la page Web dans le fichier CSS ouvert. Ici, nous avons attribué les valeurs au "arrière-plan" et "Police de caractère" Propriétés pour le HTML "corps" et a également ajouté le "couleur" pour le titre:

corps
Contexte: rose;
Police: 18px Arial, Sans-Serif;

H1
Couleur bleue;

Presse «Ctrl + S» Pour enregistrer le code ajouté dans le "style.CSS » déposer:

Le "" La balise est utilisée pour lier un CSS externe à un fichier HTML. Cette balise est ajoutée dans le "" Section d'un document HTML. Nous avons lié notre fichier HTML avec "style.CSS » Dans le programme ci-dessous, en utilisant la balise. Ensuite, nous avons ajouté une rubrique avec le

Tag et un paragraphe avec le

étiqueter. Le style spécifié dans le "style.CSS » Le fichier sera appliqué à ces éléments HTML:

C'est Linuxhint.com

Nous apprenons comment ajouter un fichier CSS dans HTML

Enregistrez ce programme JavaScript et ouvrez votre fichier HTML dans le navigateur:

Comme vous pouvez le voir, nous avons réussi à appliquer le style spécifié à nos éléments HTML en les liant avec le fichier CSS externe:

Importation d'un fichier CSS externe dans HTML

Une autre méthode pour ajouter un fichier CSS externe consiste à utiliser le "@importer" Règle dans le document HTML. Le javascript "@importer" Les déclarations donnent des instructions au navigateur pour charger et utiliser les styles du fichier CSS externe.

Vous pouvez importer un fichier CSS externe dans HTML en ajoutant simplement la déclaration «@Import» dans l'étiquette du document HTML. De cette façon, vous serez autorisé à ajouter d'autres règles CSS pour les éléments HTML, dans la même balise:

C'est Linuxhint.com

Nous apprenons à ajouter un fichier CSS dans HTML

Dans le programme JavaScript fourni, nous avons importé le "style.CSS » Fichier, et le style spécifié avec le fichier mentionné sera appliqué aux en-têtes. Nous avons également ajouté du style pour l'élément HTML paragraphe:

Notre "mon projet.html ” Le fichier a les éléments HTML suivants avec les styles appliqués:

Conclusion

L'ajout d'un fichier CSS dans HTML est utile si vous souhaitez appliquer un style à plusieurs pages Web à la fois. De plus, lorsque vous gardez séparément les fichiers HTML, JavaScript et CSS, votre code devient facile à gérer. Cet article a discuté de la procédure pour ajouter un fichier CSS dans HTML. Nous avons également expliqué la liaison et l'importation d'un fichier CSS externe dans HTML. De plus, des exemples liés aux méthodes mentionnées sont également fournies.