Les méthodes d’intégration du CSS au HTML
Le code CSS peut être intégré au code HTML de différentes façons. On peut soit intégrer un fichier CSS, soit implémenter le code dans l’en-tête du fichier HTML, soit le définir sur les balises HTML.
La méthode la plus propre est de créer un fichier CSS (ou plusieurs). Cela permet d’avoir une réelle séparation entre le contenu (le HTML), et la mise en forme (le CSS). C’est également plus simple à maintenir car on utilisera des règles de mise en forme réutilisables sur l’ensemble d’un site web. De plus, avec cette méthode le navigateur mettra le fichier en cache et n’aura donc pas à recharger le code CSS à chaque page ouverte. Pour cette méthode on intègre le fichier dans la section <head> du HTML.
<!-- Intégration d'un fichier CSS au document HTML --> <link rel="stylesheet" href="style.css" media="screen">
Définir le CSS dans l’en-tête d’un fichier HTML peut être utilisé dans des cas particuliers sur un fichier stand-alone par exemple, où la création d‘un fichier CSS dédié n’est pas indispensable s’il n’y a que quelques règles de mise en forme peu ou pas réutilisées au sein du fichier HTML.
<!-- Définition du CSS directement dans le fichier HTML -->
<head>
<meta charset="utf-8">
<style>
p {
color: blue;
}
</style>
<title>Mon site</title>
</head>Définir le CSS sur des balises HTML directement est en revanche peu recommandé. En effet, en procédant ainsi il est plus difficile de maintenir un design, de le faire évoluer. Cela doit être limité à de très rares cas d’usage bien défini d’avance et ne doit pas devenir une habitude.
<!-- Définition du CSS directement sur une balise --> <p style="color: blue;">CSS directement sur la balise du paragraphe.</p>
Gestion des différents médias
Il est souvent utile d’avoir, en plus de la feuille de style dédiée à l’affichage à l’écran, une feuille de style dédiée à l’impression. Cette feuille de style permet notamment de masquer des éléments inutiles sur une impression. Elle peut aussi servir à redéfinir d’autres propriétés CSS.
<link rel="stylesheet" href="style_ecran.css" media="screen"> <link rel="stylesheet" href="style_impression.css" media="print">
Cette méthode permet également d’intégrer une feuille de style différente selon la résolution de l’écran.
Recommandations pour l’impression
CSS ne permet pas d’avoir une gestion des impression aussi avancée qu’un logiciel de traitement de texte (format de papier, qualité d’impression, en couleur ou en noir et blanc, marges d’impression, etc.). Des recommandations sont néanmoins à suivre :
- Masquer les éléments inutiles (le menu, le logo avec l’en-tête, des boutons etc.).
- Si des éléments sont masqués, ajuster la largeur du contenu restant.
- Passer les couleurs de fond en blanc pour éviter d’utiliser trop d’encre.
- Modifier les unités em et px en préférant l’unité pt.