Qu'est-ce que les feuilles de style HTML?

La feuille de style en cascade HTML est une feuille avec un ensemble de règles et de propriétés qui indique au navigateur comment rendre HTML en utilisant tous les styles spécifiés.

CSS est la façon dont nous stylisons les pages Web. CSS possède toutes les propriétés comme l'arrière-plan, les couleurs, les polices, l'espacement, les bordures, etc. que nous pouvons définir pour chaque élément des pages.

Les feuilles de style HTML sont également utilisées pour définir la mise en page de la page, comme l'endroit où l'en-tête, les pieds de page ou tout autre élément doivent être placés sur la page. CSS est toujours parlé avec HTML car les pages sans aucun style sont très pâles, sans mise en évidence d'aucun en-tête, etc. et la même taille de police sur toute la page, ce qui ne donne pas du tout une bonne image aux utilisateurs.

Comment utiliser les feuilles de style HTML?

Dans le passé, les styles, les scripts, tout le HTML étaient écrits partout sur la même page. Cela a rendu les pages extrêmement longues et extrêmement difficiles à lire et à modifier. Puis vint le moyen de séparer HTML, styles et Javascript.

Façons d'inclure des feuilles de style HTML sur une page Web:

Il existe 3 façons dont nous pouvons inclure les styles:

  1. Style en ligne

C'est une façon d'écrire des styles pour chaque élément de HTML lui-même à l'intérieur d'un attribut appelé style.

Cette façon de styliser n'est pas du tout recommandée car le HTML semble encombré et nous ne pouvons pas suivre l'approche «écrire une fois, utiliser à plusieurs endroits»

Eg: Hello World!

Eg: Hello World!

  1. Style interne

Cela consiste à inclure des styles dans une balise de style et à les placer dans une page Web au-dessus de HTML. Cette méthode de style est toujours meilleure que le style en ligne car nous pouvons avoir des styles communs assemblés au cas où ils devraient être utilisés pour plusieurs éléments à la fois.

Au stade du développement, il est plus facile de modifier le fichier HTML et nous n'avons pas besoin à chaque fois d'ouvrir le fichier CSS correspondant et de le modifier à chaque fois.

Eg:

container-block(
font-size: 10px;
margin-top: 10px;
)

Hello World!

  1. Style externe

C'est la façon la plus courante et la meilleure d'avoir des styles pour une page Web. Ceci est similaire au style interne, mais la différence est que les styles sont écrits dans un fichier séparé avec l'extension .css et une référence est placée dans la balise head de la page Web.

La syntaxe pour lier le fichier CSS sur la page Web est:

Les styles doivent être inclus dans la balise head qui est au-dessus de la balise body (c'est-à-dire le contenu réel) de HTML

Quelle est la priorité entre le style en ligne, interne et externe?

Les styles en ligne ont plus de priorité que les styles internes et la dernière priorité vient pour le style externe.

Inline> Interne> Externe

Meilleures pratiques lors de l'utilisation de CSS:

  • CSS peut être séparé en plusieurs fichiers au lieu d'un seul.
  • Les fichiers CSS séparés peuvent être inclus un par un dans une balise head à l'aide de balises de lien.
  • Ou un fichier CSS peut avoir plusieurs instructions d'importation pour importer le reste des fichiers CSS. Cela séparera logiquement le CSS mais obtient finalement tous les styles sont rendus à partir du même fichier.

Utilisation: @import './process.css';

  • Les styles peuvent être définis pour tous les éléments de la page Web avec des sélecteurs comme balise HTML elle-même, les noms de classe, les identifiants, tous les noms d'attribut.
  • Il existe des pseudo-sélecteurs comme:
    • avant
    • après
    • nième enfant
    • premier enfant
    • dernier enfant
    • flotter
    • a visité

Ce sont essentiellement des états des éléments sélectionnés et pas vraiment les éléments exacts.

  • Lorsque des fichiers CSS multipliés sont inclus dans la page, le dernier prend la priorité la plus élevée et remplace les styles existants des fichiers précédents ayant le même sélecteur.
  • Les feuilles de style doivent être utilisées avant HTML lui-même afin que les styles soient appliqués pendant le chargement de la page. S'il est inclus à la fin, le HTML se chargera d'abord, puis les styles seront appliqués lentement, ce qui donnera une très mauvaise expérience à l'utilisateur.

Diverses caractéristiques des feuilles de style en cascade HTML:

  • CSS fournit des animations : Auparavant, javascript n'était utilisé que pour les animations. Mais le dernier CSS c'est-à-dire CSS3 fournit des animations en utilisant les propriétés lui-même.
  • Préfixes du fournisseur: avant que les navigateurs ne publient la version standard / le nom de propriété pour toute nouvelle fonctionnalité, les navigateurs nous fournissent certains préfixes du fournisseur pendant un certain temps pendant une certaine période de temps à titre expérimental. Les développeurs doivent attendre que le navigateur publie ses versions standard et, en attendant, des fonctionnalités expérimentales peuvent être utilisées avec les préfixes des fournisseurs.
  • Transformations CSS: La transition est utilisée pour accéder progressivement à une valeur à partir d'une autre d'une propriété dans une durée donnée.

Eg: -webkit-transition: width 2s, height 4s;

  • Transformations CSS: les transformations CSS vous permettent de traduire, faire pivoter, mettre à l'échelle et incliner des éléments.

Requêtes médias:

Les mobiles, les ordinateurs de bureau et les iPad se comportent différemment, mais nous ne pouvons pas styliser les pages de la même manière. Les normes Web précédentes ont été conçues de manière à ce que nous disposions de CSS différents pour chaque type d'appareil.

Avec les progrès des normes Web et la façon dont le Web est construit, les navigateurs sont développés pour avoir un CSS unique qui peut être utilisé pour tout type d'appareil. Pour modifier les styles des périphériques en fonction de la largeur et de la hauteur, des requêtes multimédias sont utilisées avec lesquelles nous pouvons spécifier la largeur minimale ou maximale du périphérique et y écrire des styles.

Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)

Les styles sont définitivement une aubaine pour le web. Et comme le développement Web a augmenté de façon exponentielle ces derniers temps, CSS3 a définitivement gagné beaucoup de demande pour rendre les pages extrêmement interactives et intuitives.

Articles recommandés

Cela a été un guide pour les feuilles de style HTML. Nous expliquons ici comment utiliser les feuilles de style HTML, diverses fonctionnalités et les façons d'inclure CSS sur une page Web. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Introduction au CSS
  2. Avantages du CSS dans la conception Web
  3. Qu'est-ce que CSS? | Comment utiliser?
  4. La CSS est-elle sensible à la casse?
  5. Différents styles de liste HTML

Catégorie:

Outils de développement Web