HTML (Hypertext Buquup Language) est le langage standard pour structurer les pages Web. Tandis que la feuille de style en cascade est utilisée pour fournir plusieurs propriétés de style aux éléments HTML. Plus précisément, vous pouvez accéder aux éléments de HTML dans CSS par nom d'élément, par sélecteurs de classe ou par sélecteurs d'identification.

Trois méthodes pour ajouter une feuille de style CSS à un fichier HTML sont le CSS interne, le CSS en ligne et le CSS externe. Cependant, cet article guidera comment ajouter une feuille de style externe dans HTML.

Qu'est-ce qu'une feuille de style CSS externe?

La feuille de style externe est utile d'une manière que nous pouvons modifier l'apparence de notre site Web en modifiant un seul fichier. Le fichier HTML doit avoir un lien vers la feuille de style à l'intérieur de la «”Element, qui sera mentionné dans le composant de la tête de la page HTML.

L'exemple ci-dessous montre plusieurs éléments HTML qui seront stylisés avec les propriétés CSS en utilisant la feuille de style externe.

Exemple: comment créer et lier la feuille de style externe dans le fichier html?

Dans le fichier html, ajoutez d'abord un élément div ayant un nom de classe "principal". À l'intérieur, ajouter

élément ayant le nom de classe comme «titre«Pour fournir une rubrique. Le

élément avec id comme "para"Est ensuite ajouté pour fournir du contenu de texte.

Étape 1: Créer un fichier HTML

Vous trouverez ci-dessous le code HTML pour le scénario discuté:

C'est l'élément de tête

C'est la div principale

Comme nous n'avons fourni aucun des éléments HTML avec des propriétés de style, l'écran de sortie ressemblera à ceci:

Dans la section suivante, nous créerons une feuille de style qui contient les propriétés de style des éléments que nous avons créés dans le fichier HTML.

Étape 2: Créer une feuille de style externe

Créez un nouveau fichier et nommez-le avec une extension ".CSS". Ouvrez-le et écrivez le code comme indiqué dans le bloc de code ci-dessous.

Style Div principal

.principal
Largeur: 500px;
hauteur: 200px;
Color d'arrière-plan: # 001253;
Texte-aligne: Centre;
Tableau de rembourrage: 20px;
marge: 0px automatique;
Border: 5px solide RVB (194, 194, 189);
Font-Family: Cursive;

Les propriétés appliquées aux éléments HTML de la feuille de style externe sont décrites ci-dessous:

• ".principal«Est utilisé pour accéder à la classe de l'élément div, où le«."Suivi du nom de classe est connu sous le nom de sélecteur de classe.
• "largeur”La propriété est utilisée pour le réglage de la largeur de l'élément.
• "hauteur”La propriété est utilisée pour le réglage de la hauteur de l'élément.
• "Couleur de l'arrière plan»La propriété est utilisée pour définir la couleur d'arrière-plan.
• "alignement de texte«La propriété est-elle utilisée pour l'alignement du texte.
• "padding«La propriété est-elle utilisée pour ajouter de l'espace au-dessus du contenu de la div.
• "marge”Avec valeur 0px automatique représente l'espace 0px en haut et en bas et un espace égal à gauche et à droite de l'élément.
• "frontière»La propriété est définie avec la valeur 5px solide RVB (194, 194, 189), où 5px se réfère à la largeur de la bordure, le solide est le type de ligne et RVB (194, 194, 189) est le code couleur de la bordure.
• "famille de polices"Avec la valeur que cursive, le style de police semble avoir été manuscrit.

Style id para

#para
taille de police: 25px;
Police-poids: Bold;
Couleur: # FFB9B9;

L'élément d'identification avec nom para du

ID d'élément stylé avec les propriétés qui sont expliquées ci-dessous:

• "#para»Est utilisé pour accéder à l'élément ID de HTML. Le "#"Le signe est connu comme le sélecteur d'identification.
• "taille de police»La propriété est utilisée pour le réglage de la taille de la police.
• "poids de police”Avec la valeur définie comme Bold rend la police audacieuse.
• "couleur»La propriété est utilisée pour le réglage de la couleur de la police.

En-tête de style

.titre
Couleur: Whitesmoke;

La couleur de la police de la tête est définie comme «fumée blanche"En utilisant la propriété"couleur".

Étape 3: lier la feuille de style externe à HTML

Maintenant, dans la section Head du fichier HTML, nous spécifierons le lien vers la feuille de style externe:

Plusieurs attributs peuvent être utilisés dans la balise de liaison HTML. Les attributs spécifiés dans l'élément de liaison sont décrits ci-dessous:

• "rel»L'attribut est utilisé pour informer le navigateur du fichier importé, tel que la feuille de style.
• "href»L'attribut spécifie le chemin du fichier.
• "taper»L'attribut est utilisé pour indiquer le contenu du fichier importé.

Comme indiqué dans l'image ci-dessous, les propriétés de style fournies dans la feuille de style externe sont appliquées avec succès:

Nous avons réussi à relier le fichier CSS au fichier HTML.

Conclusion

CSS est la feuille de style en cascade qui fournit différentes propriétés de style aux éléments HTML. Il existe trois façons de connecter le CSS au HTML: CSS en ligne, CSS externe et CSS interne. Dans HTML, à l'intérieur de la section de tête, le lien vers la feuille de style externe sera spécifié à l'aide de l'élément. Cet article a démontré la procédure pour créer et lier les feuilles de style externe à HTML.