CSS acronyme de "Feuille de style en cascade"Est un langage de conception qui définit comment concevoir une page Web accrocheuse. Il décrit l'apparence et le formatage d'un site créé dans une langue de balisage. Habituellement, CSS est utilisé avec HTML pour définir les styles de sites Web et d'interfaces utilisateur.

Feuille de style en cascade

En cascade signifie regarder, Style signifie conception sur l'élément HTML / Ajout de style aux documents Web et Feuille MAISON PAGE E.g. Document de page Web.

Types de CSS

Le CSS peut être utilisé de trois manières:

• CSS en ligne: Le CSS en ligne implémente le style sur une seule ligne.
• CSS interne: Le CSS interne Appliquer un style spécifié sur une seule page.
• CSS externe: Le CSS externe est un fichier séparé et il peut être utilisé par plusieurs documents / pages HTML.

À cette fin, importez simplement le lien externe du fichier CSS dans la section Head.

Syntaxe CSS

Jetons un coup d'œil au style CSS suivant pour mieux comprendre la syntaxe CSS:

Dans l'extrait ci-dessus, P est un sélecteur qui pointe vers un élément HTML que vous souhaitez styliser. Tandis que "Background-Color" est une propriété, et «l'or» est sa valeur.

De même, «la taille de la police» et le «texte-alignement» sont des propriétés, tandis que «médium» et «droit» sont des valeurs de ces propriétés.

Exemple 1: Cet exemple vous fournira une vue approfondie du fonctionnement de CSS en ligne:

Bienvenue à Linuxhint.com

Le meilleur site pour lire des articles de haute qualité

Le script ci-dessus a implémenté un certain style sur le premier

élément utilisant en ligne CSS. Il affichera la sortie suivante:

Dans cet exemple, nous n'en avons que deux

Éléments et nous devons implémenter le style sur un seul élément, nous avons donc utilisé le CSS en ligne. Donc, chaque fois que nous devons coiffer quelques éléments HTML, nous pouvons utiliser CSS en ligne pour chaque élément.

Mais que se passe-t-il si nous avons des centaines d'éléments HTML sur une page E.g. Nous avons cent

Par conséquent, lorsque nous devons implémenter un style unique sur toute la page, nous utiliserons le CSS interne.

Exemple-2: L'exemple suivant implémentera la même couleur d'arrière-plan, la couleur du texte à l'ensemble du corps du document HTML:

Bienvenue à Linuxhint.com

Le meilleur site pour lire des articles de haute qualité

L'extrait ci-dessus fournira la sortie suivante:

Maintenant, si nous devons styliser plus d'une pages? Dans de tels cas, le CSS externe sera mis en œuvre. Un seul fichier peut modifier l'ensemble du site Web. Par conséquent, il est recommandé de toujours utiliser des CS externes.

Si vous travaillez avec un CSS externe, vous devez avoir pour déterminer le dans le section.

Exemple-3: Cet exemple créera un fichier CSS pour définir le style. Le lien vers ce fichier sera fourni dans la section Head. Les fichiers HTML et CSS sont tous deux donnés:

Externe.html

Bienvenue à Linuxhint.com

Le meilleur site pour lire des articles de haute qualité

Externe.CSS

corps
Color en arrière-plan: marron;
Couleur: Goldenrod;
Style de police: italique;

H1
la couleur noire;
Texte-aligne: Centre;

La sortie vérifiera que le fichier CSS externe est lié correctement au fichier HTML:

Commande de style cascade

Maintenant, vous pourriez avoir une question? Et si nous utilisons des styles CSS en ligne, internes et externes sur une page Web? Alors lequel d'entre eux sera mis en œuvre? Quel style a une priorité maximale?

Bien! S'il y a un conflit dans la déclaration de style CSS, alors CSS en ligne ouvrira le CSS interne qui à son tour remplacera le CSS externe. Cela signifie que le CSS en ligne a une priorité plus élevée que le CSS interne et externe. Les styles par défaut du navigateur ont la priorité la plus basse.

Si les différents styles CSS sont déterminés au même niveau de priorité, le style qui est le plus proche de l'élément ciblé aura une priorité plus élevée.

Exemple-4: Voyons l'exemple suivant qui détermine les multiples styles:

Externe.Fichier CSS

corps
Color en arrière-plan: marron;
Couleur: Goldenrod;
Style de police: italique;

Priorité.Fichier html

Bienvenue à Linuxhint.com

Le meilleur site pour lire des articles de haute qualité

Le code ci-dessus détermine les trois styles que la sortie vérifiera que le CSS en ligne a la plus élevée:

Avantages

1. Il gagne beaucoup de temps lors du développement d'une page Web car nous pouvons utiliser un fichier CSS dans plusieurs fichiers HTML. Par exemple, nous avons plusieurs fichiers HTML, alors nous devons faire face à leur look, leur style, etc. Au lieu d'implémenter le style sur chaque fichier HTML séparément, il est préférable d'importer le fichier CSS dans n'importe quel document HTML que vous souhaitez styliser.
2. Les pages Web se chargent rapidement parce que CSS n'utilise pas les attributs HTML encore et encore à la place, il ne crée qu'une seule règle CSS pour une balise et l'implémente à toutes ses occurrences dans le fichier HTML.
3. CSS offre une maintenance facile car nous pouvons le gérer dans un seul fichier. Supposons que nous ayons dix paragraphes dans un document et que nous voulons changer leur style. Au lieu de le faire dix fois, nous pouvons le faire une fois dans le fichier CSS et il sera appliqué aux dix occurrences du

   élément.

4. CSS assure la compatibilité. Cela signifie qu'il est compatible avec plusieurs appareils.

Conclusion

CSS est un langage de conception qui construit des pages Web attrayantes. Il est utilisé pour créer des styles et personnaliser les éléments HTML disponibles sur une page Web. Il améliore la vitesse du site et offre une personnalisation facile de toute page Web.

Dans cet article, vous saurez ce qu'est CSS, comment utiliser CSS et quels sont les principaux avantages de CSS. De plus, vous découvrirez l'ordre de priorité sur les styles en cascade.