CSS (un acronyme de Cascade Styrole Sheet) spécifie l'interface du contenu HTML. Le CSS permet d'embellir les pages HTML en spécifiant les couleurs, les styles de police et beaucoup plus liés à l'esthétique des pages. Les propriétés définies à l'aide de CSS sont également héritées de tous les éléments enfants. Par exemple, si une propriété CSS est ajoutée à Body of HTML, alors tous les éléments à l'intérieur de l'étiquette corporelle adopteront cette propriété. Pour éviter de tels produits, vous pouvez spécifier des propriétés à des éléments enfants spécifiques.

Il existe différentes façons d'appliquer CSS sur votre document HTML et sont définies ci-dessous:

• En ligne: Permet d'ajouter CSS dans une balise HTML spécifique
• Interne: Un code CSS est écrit à l'intérieur de l'étiquette de tête (recommandée mais pas nécessaire) d'une page HTML
• Externe: Un fichier CSS est fabriqué en externe en définissant toutes les propriétés. Il est ajouté à la page HTML en utilisant le <lien> élément

Nous avons compilé ce guide pour démontrer toutes les façons possibles d'ajouter CSS à une page HTML.

Comment ajouter CSS à une page Web

Cette section décrit brièvement les approches disponibles pour ajouter CSS à une page HTML.

Comment ajouter en ligne CSS

Comme le nom de la technique le suggère, il vous permet d'ajouter CSS à un seul élément HTML. Le style L'attribut d'un élément est exercé pour le faire. Passons en pratique l'exemple ci-dessous pour obtenir une image plus claire de CSS en ligne:

Exemple

Le code écrit ci-dessous ajoute les styles à une balise HTML

Indice de linux

:

Indice de linux

• La couleur du texte est définie sur vert: pour cela, le couleur propriété du style L'attribut est utilisé
• Le texte de

  est centré aligné: le alignement de texte la propriété est utilisée

• Le texte de cap sera souligné: pour ce faire, le textaine-décoration L'attribut de propriété de style est défini sur souligner.

L'interface Web de la page HTML indiquée ci-dessus s'affiche ci-dessous:

En dehors des propriétés indiquées ci-dessus, peu de rédacteurs en chef HTML montrent la liste déroulante des propriétés disponibles. Par conséquent, il est recommandé de choisir judicieusement votre éditeur HTML, car la meilleure sélection facilitera la façon d'ajouter CSS à la page HTML.

Comment ajouter des CS internes

Le CSS interne est ajouté en utilisant le Tag à l'intérieur du élément d'une page HTML. Disons que nous voulons ajouter divers styles à corps, paragraphes, et divisions Utilisé dans une page HTML.

L'image affichée ci-dessous montre les différentes propriétés qui sont ajoutées à plusieurs sections de la page HTML et toutes ces propriétés sont affectées à l'aide du <style> élément.

- La couleur de fond du corps sera noire

- Les paragraphes auront du texte rouge, de la taille de la police et du texte à gauche et à gauche

- La couleur des divisions est l'antitiquewhite et la largeur des divisions dépend de la largeur du texte utilisé:

L'interface Web utilisant les propriétés ci-dessus s'affiche ci-dessous:

Comment ajouter des CS externes

Le CSS peut être ajouté aux pages Web en créant un fichier CSS dédié, puis en l'appelant dans une page. Le CSS externe est très utile lorsque vous devez appliquer le même style à diverses pages HTML. Cette section fournit un article de procédure pour créer et utiliser un fichier CSS externe:

Étape 1: Créez un .Fichier CSS

Tout d'abord, ouvrez votre éditeur de code et faites un fichier avec .CSS Extension (ou l'éditeur peut offrir l'option pour enregistrer en tant que fichier CSS). Le fichier que nous utilisons ici est nommé comme linuxhintylesheet et est créé comme suit:

Ouvert un nouveau fichier dans l'éditeur:

Après cela, j'ai cliqué sur Save en tant que:

Nommé ce fichier avec .Extension CSS et CSS sélectionné comme type de fichier:

Étape 2: Ajouter des styles au fichier CSS

Nous avons ajouté les propriétés de style suivantes:

- La couleur d'arrière-plan du corps est bleu ciel

- Le H1 aura le blanc couleur

- Les paragraphes ont le Font-Family réglé pour serif et le texte-décoration contient surclasser (ligne au-dessus du texte) propriété:

L'image suivante affiche le code qui contient des styles indiqués ci-dessus:

Étape 3: Ajoutez le fichier CSS au document HTML

Après avoir créé et ajouté des styles à un fichier CSS, vous devez maintenant ajouter le fichier à la page où vous souhaitez appliquer ces styles. Nous voulons ajouter linuxhintylesheet pour linuxhint Document HTML:

Le L'élément de HTML est utilisé pour importer CSS déposer. De plus, le rel et href La propriété de l'élément de liaison est exercée pour intégrer le fichier CSS. Le rel L'attribut définit la relation entre le document HTML et le fichier CSS. Tandis que le href la propriété de l'élément contient le lien vers le fichier CSS.

Une fois que les étapes ci-dessus sont effectuées correctement, vous pourrez charger votre page HTML avec les propriétés indiquées ci-dessus.

Conclusion

CSS est une langue pour rendre les pages Web (HTML / XML) présentables. CSS peut être ajouté aux pages Web en adoptant l'une des méthodes mentionnées de cet article. La première méthode utilise l'attribut de style d'un élément pour ajouter diverses propriétés liées à CSS. La méthode interne pratique la langue CSS en utilisant l'élément dans la balise de tête. Et la dernière méthode importe un fichier CSS externe sur une page Web spécifique. Toutes ces méthodes sont utilisées pour ajouter CSS à une page Web et la sélection d'une méthode dépend du développeur que la façon dont il / elle a l'intention d'ajouter des styles.