Published on

Comment importer une feuille de style CSS dans du HTML

Le CSS permet de styliser une page HTML, cela permet de donner un style différent à celui qui est appliqué par défaut par le navigateur. HTML étant un langague de balises, il faut importer au bon endroit votre feuille de style pour qu'il puisse chargé celle-ci au chargement de la page et prendre en compte le style à appliqué.

Sans utiliser de fichier externe

Le style est idéalement séparer dans une feuille de style, un fichier qui se termine par l'extention .css. Mais il est possible de l'implémenter dans une page HTML directement pour éviter cette découpe de fichier. Cela n'est pas conseillé pour des raisons de propreté dans votre code, mais cela fonctionne. Vous retrouverez cette méthode dans le code source de pas mal de page car elle permet de gagner un appel réseau pour aller chercher cette feuille de style.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apprendre le HTML/CSS</title>
  <style>
    body {
      background-color: grey;
    }
  </style>
</head>

Un avantage pour réduire le temps de chargement et de mettre facilement la page en cache si vous utilisez un gestionnaire de cache ou un reverse proxy. Il est possible de faire cette distinction au moment de build de la page. Dans le développement moderne d'interfaces web et mobile.

Importer une feuille CSS dans le head HTML

Dans l'exemple ci-dessous, un import se fait directement avec la balise link qui vient récupérer le contenu d'une feuille de style. A savoir que l'ordre d'importation des feuilles a son importance dans le résultat final du rendu de la page web. Les feuilles au plus bas dans l'implémentation viendront prendre la main si vous cibler les mêmes éléments.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <title>Apprendre le HTML/CSS</title>
</head>