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>
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 commentaires