CSS : on reprend tout à zéro ! (11ème épisode)

Par Joe Gillespie

Cet article est le onzième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Jusqu'ici, tous les styles que j'ai utilisés ont été intégrés à la section <head> des pages. De cette façon, il est facile de regarder le code-source de la page et de voir ce qui s'y passe. Tout est bien mis ensemble au même endroit.

Toutefois, il est très rare que des pages individuelles soient fabriquées à l'unité : il est beaucoup plus probable qu'on trouvera, dans un site Web donné, tout un ensemble de pages dont l'aspect est similaire.

Au lieu de reproduire une déclaration de styles sur chaque page, il vaut bien mieux n'avoir qu'une seule feuille de style et faire en sorte que chaque page y renvoie individuellement. Du coup, si vous voulez changer la couleur de fond de toutes les pages de votre site, ou bien modifier la couleur ou la taille des caractères, il n'y aura qu'à changer la feuille de style principale. En fait, on peut changer totalement l'aspect de tout un site en appliquant juste quelques modifications à un seul et unique fichier.

Allez donc jeter un oeil sur http://www.csszengarden.com/ pour voir ce principe en action. Différents designers ont fourni leurs propres feuilles de style pour habiller le contenu d'une même page, démontrant ainsi de manière admirable comment un seul et même squelette peut recevoir différentes « peaux » qui changent sa personnalité du tout au tout. Pour utiliser une feuille de style externe, tout ce que nous avons à faire consiste à intégrer ce type de lien dans notre page :

<link rel="stylesheet" 
href="styles_de_base.css" 
type="text/css" 
media="screen">

Cela indique au navigateur qu'il doit chercher les indications de style dans un fichier nommé « styles_de_base.css ». On précise aussi qu'il s'agit d'un simple fichier texte ( d'où type="text/css" ) et que les styles sont prévus pour un affichage sur écran ( media="screen" )

Les feuilles de style ne sont pas limitées à l'affichage sur des écrans d'ordinateur : vous pouvez produire des feuilles de style pour d'autres supports comme l'impression, la projection ou même le braille. Quand on y réfléchit bien, une feuille de papier d'imprimante n'a pas du tout la même taille ni la même forme qu'un écran d'ordinateur, et personne n'aura envie de gâcher sa très chère encre à imprimer de vastes zones colorées alors que tout ce qu'on veut, c'est conserver comme référence un texte noir sur blanc. Une feuille de style pour l'impression doit donc réduire la largeur de la page pour qu'elle corresponde à une feuille de papier, et contrairement à la feuille de style « écran », les tailles de caractères doivent être indiquées en points ( pt ). Les couleurs doivent être simplifiées, voire complètement abandonnées. Enfin, tout ce qui restera à faire sera d'ajouter un second lien dans la partie <head> juste après celui pour l'écran ( screen ).

<link rel="stylesheet" 
href="styles_pour_impression.css" 
type="text/css" 
media="print">

Si vous vous contentez amplement de la même feuille de style pour l'écran comme pour l'impression, alors vous pouvez utiliser ce lien :

<link rel="stylesheet" 
href="styles.css" 
type="text/css" 
media="all">

Bien que la plupart de mes feuilles de style finissent toujours par se retrouver enregistrées à part, je démarre généralement avec une feuille de style interne pour les premières étapes du design. Une fois satisfait de l'aspect général, je coupe et je colle les styles dans un nouveau fichier, et je les remplace par un lien.

Épisode 12 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site