• Votre panier est vide.

CSS dans un fichier .css

(Dernière mise à jour: 14 février 2020)

Encore mieux qu’intégrer du CSS à une balise HTML 5 , vous pouvez définir vos propriétés CSS dans un fichier CSS, c’est ce que nous vous conseillons le plus.

Cela va rendre votre code beaucoup plus lisible et beaucoup plus maintenable dans le temps.

Pour cause, d’un côté vous aurez vos fichiers CSS, et d’un autre côté vos fichiers HTML. Et encore ailleurs, vous aurez vos fichiers JavaScript.js. Nous vous conseillons (très) fortement d’utiliser un seul, ou plusieurs fichiers CSS.

Ensuite, pour les intégrer dans votre document HTML, il suffit d’utiliser la balise link avec les attributs rel="stylesheet" type="text/css" et href qui est le lien vers votre fichier CSS, qu’il soit hébergé sur votre site ou sur un autre site internet, vous renseignez l’URL style.css.

Exemple :

<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="monFichierCss.css"/>
…
</head>

…
</html>

Dans le fichier monFichierCss.css, vous mettez directement le code CSS qui vous intéresse. Le format est directement comme ce que nous avons vu depuis le début de la série de nos articles :

body {
   font-size: 12px;
   font-family: Arial;
}

La balise <link>

Comme nous venons de voir, la balise <link> permet, entre autres choses, d’appliquer un formatage au document donné à partir d’une feuille de style externe. Lorsqu’un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l’ensemble des documents grâce à un seul fichier.

Prenons l’exemple de ce code CSS et plaçons le dans un fichier demo.css :

/* demo.css */
 body {
     background:white;
     color:blue;
 }

Chaque fois qu’on a besoin d’appliquer ce style à un document, il suffit alors d’appeler le fichier demo.css grâce à la balise link :

<!DOCTYPE html>
<html>
<head>
    <title>La fameuse page « Hello World »</title>

    <link rel="stylesheet" href="demo.css">

</head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

Chaque page qui appellera le fichier demo.css via la balise link bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier demo.css autant de fois que nécessaire alors qu’il ne sera chargé en mémoire qu’une seule fois. Les performances en seront très largement améliorées.

0 responses on "CSS dans un fichier .css"

Leave a Message

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

© Develop4fun. Tous les droits réservés.