CSS est un langage de style utilisé pour modifier l'apparence des pages Web. Il fait partie de l'une des technologies les plus notables utilisées pour créer une page Web. Maintenant, vous devez vous demander comment CSS gouverne le style? Bien! Le CSS le fait en s'assurant que comment les éléments apparaîtront sur une page Web comme leur couleur de texte, leur couleur d'arrière-plan, leur style de police, etc. Par conséquent, une structure appropriée doit être suivie pour écrire un code CSS efficace.

Cet article présentera un guide étape par étape pour comprendre comment CSS est structuré?

• La syntaxe de base du CSS.
• Comment implémenter CSS à un document HTML.
• Comment travailler avec les sélecteurs CSS suivis de la spécificité du sélecteur.
• Espaces blancs en CSS.
• Commentaires dans CSS.

Commençons par la syntaxe de CSS.

Syntaxe de CSS

La syntaxe de base du CSS comprend un sélecteur avec son bloc de déclaration. Le bloc de déclaration se compose de deux choses que je.e. une propriété CSS avec sa valeur.

Dans la figure ci-dessus, P est un sélecteur qui pointe vers un paragraphe HTML Element, la couleur est une propriété CSS et le vert est la valeur attribuée à la propriété Color.

Comment appliquer CSS au document HTML

CSS peut être appliqué à n'importe quel document HTML de trois manières i.e. en utilisant des styles en ligne, en utilisant une feuille de style interne ou des feuilles de style externe. Cet article expliquera le fonctionnement des trois méthodes de style à l'aide d'exemples.

CSS en ligne

La méthode de style en ligne est le plus souvent utilisée pour implémenter un style unique sur un seul élément. Nous devons donc utiliser l'attribut «style» dans un élément HTML pour implémenter n'importe quelle propriété CSS à l'élément spécifié.

Exemple

L'exemple ci-dessous implémente le style en ligne sur le

élément:

CSS en ligne

Le code ci-dessus définit la couleur du texte comme rouge, la couleur d'arrière-plan comme bleu et aligne le texte au centre:

CSS interne

La méthode de style CSS interne spécifie le style dans la balise et dans la section Head. Il est utilisé pour implémenter un style spécifique sur toute la page.

Exemple Cet exemple décrit une feuille de style interne pour tous les

éléments

CSS interne

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

La sortie montre que le style spécifié dans l'élément de style implémenté sur tous les

éléments:

CSS externe

Comme son nom lui-même l'indique, une feuille de style externe est un fichier CSS distinct qui peut être utilisé pour styliser l'intégralité du site Web. Dans ce cas, la référence du fichier CSS externe sera ajoutée au fichier HTML.

Exemple Cet exemple définit différents styles pour divers éléments HTML et ces styles seront implémentés à l'aide d'une feuille de style externe.

Html

Le fichier HTML comprend un lien vers un fichier CSS externe:

CSS externe

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

CSS

H2
couleur: or;
Color en arrière-plan: noir;

p
couleur orange;
Color en arrière-plan: Seagreen;
Texte-aligne: Centre;

Le code ci-dessus produira la sortie suivante:

Concluons ce que nous avons appris dans cette section, utilisez en ligne CSS uniquement si vous ne devez styliser que quelques éléments HTML, en ligne n'est pas considéré comme une bonne approche car en cas de maintenance, vous devez peut-être modifier plusieurs choses pour un style. Utilisez le style interne pour les sites Web d'une page, cependant, lorsque vous travaillez sur un large site Web qui a plus d'une page, utilisez une feuille de style externe.

Sélecteurs CSS

Les sélecteurs sont utilisés cibler les éléments HTML que vous souhaitez styliser et il existe plusieurs types de sélecteurs CSS tels que:

• CSS sélecteur d'élément cible les éléments HTML en fonction de leur nom.
• CSS sélecteur d'identité cible les éléments HTML en fonction de leur identifiant.
• CSS sélecteur de classe cible l'élément HTML en fonction d'un attribut de classe.
• CSS sélecteur universel cible tous les éléments présents sur la page.

Exemple Le style de code diable différents éléments html i.e. H2 et P en utilisant le sélecteur d'éléments, le sélecteur de classe et le sélecteur d'identification respectivement.

Html

H2 Utilisation du sélecteur d'éléments

Paragraphe utilisant le sélecteur de classe

Paragraphe utilisant le sélecteur d'identité

CSS

H2
Color en arrière-plan: noir;
Couleur: Goldenrod;
Texte-aligne: Centre;

.style
Color en arrière-plan: noir;
la couleur verte;
Texte-aligne: Centre;

# style1
Color en arrière-plan: noir;
La couleur rouge;
Texte-aligne: Centre;

Nous obtiendrons la sortie suivante:

Spécificité

Parfois, un affrontement se produit i.e. Deux sélecteurs / styles ciblant le même élément HTML ce qui se passera dans un tel cas et quel sélecteur obtiendra la préférence. Bien! Nous avons une règle générale pour la spécificité

• !L'important a une spécificité plus élevée, donc il remplacera tout
• En ligne a la deuxième plus grande spécificité, il peut donc tout remplacer !important
• Le sélecteur d'ID a une spécificité plus élevée parmi les autres sélecteurs mais inférieure à !important et en ligne
• Vient ensuite le sélecteur de classe, le sélecteur d'attributs et la pseudo-classe
• Sélecteur d'éléments et pseudo-éléments
• Le sélecteur universel a la spécificité la plus basse
• Si la même règle est répétée dans une feuille externe, la dernière sera mise en œuvre

Comprenons la spécificité avec un exemple:

Exemple L'exemple ci-dessous expliquera le concept de spécificité.

Html

Bienvenue à Linuxhint.com

Exemple de spécificité

CSS

p
couleur orange !important;

# style1
La couleur rouge;

.style
la couleur verte;

p
Couleur bleue;

H1
Couleur bleue;

H1
la couleur verte;

La sortie sera:

Dans l'exemple ci-dessus, nous avons observé les points suivants:

• Le

  L'élément est ciblé par !Sélecteur d'identité, de classe, de classe et d'élément mais le

  L'élément est stylé selon le !important qui montre que !important a une spécificité la plus élevée.

• Il existe deux sélecteurs d'élément différents pour définir deux styles différents pour le

  élément, le sélecteur d'élément qui arrive à la fin obtient la priorité.

Pour mieux comprendre, mélanger l'ordre des sélecteurs et observer la différence!

Espaces blancs en CSS

Dans CSS, les navigateurs ignorent les espaces blancs, mais l'utilisation correcte des espaces blancs peut améliorer la lisibilité du code.

Exemple: Cet exemple explique comment les espaces blancs / les ruptures de ligne augmentent la lisibilité du code:

Html

H2 Utilisation du sélecteur d'éléments

Exemple de spécificité

CSS

.style
Color en arrière-plan: noir; la couleur verte; Texte-aligne: Centre;

# style1
Color en arrière-plan: noir;
La couleur rouge;
Texte-aligne: Centre;

Dans le sélecteur de classe, tout le code est écrit dans la même ligne tandis que dans le sélecteur d'ID, nous écrivons chaque propriété sur une nouvelle ligne. Les espaces blancs / les pauses de ligne augmentent la lisibilité du code. La sortie vérifie que le navigateur ne se soucie pas de la façon dont vous avez écrit le code et les deux sélecteurs exécutés avec succès:

Commentaires dans CSS

Dans CSS, toutes les sections commentées seront enfermées dans les «/ *» et «* / /». Tout ce qui vient dans les commentaires sera négligé par le navigateur. Certains détails supplémentaires peuvent être ajoutés dans les commentaires pour comprendre le code.

Exemple Cet exemple a ajouté quelques commentaires qui nous aideront à comprendre le code.

Html

Premier paragraphe

La deuxième paragraphe

CSS

/ * sélecteur de classe * /
.style
Color en arrière-plan: noir;
couleur orange;
Texte-aligne: Centre;

/ * sélecteur d'ID * /
# style1
Color en arrière-plan: noir;
La couleur rouge;
Texte-aligne: Centre;

Le code ci-dessus génère la sortie suivante:

La sortie vérifie que les commentaires fournissent une meilleure compréhension du code sans affecter les résultats.

Conclusion

La structure de base du CSS comprend la syntaxe de base de la sélection de l'élément HTML à l'aide de sélecteurs CSS et de style l'élément sélectionné à l'aide des propriétés CSS.CSS peut être implémenté dans un fichier HTML de trois manières i.e. Style en ligne pour définir le style pour un élément spécifique, style interne à l'aide d'une balise et ajoutant du fichier CSS externe.

Cet article traite de toutes les bases pour structurer un fichier CSS. À partir de la syntaxe de base du CSS et après, il explique les différents types de sélecteurs CSS et CSS. En outre, il explique le concept de spécificité dans CSS et conclut que parmi tous les sélecteurs de sélecteurs CSS, le sélecteur d'identification a une spécificité plus élevée. Enfin, cela explique la signification des commentaires et des espaces blancs dans CSS.