Les feuilles de style (2/8)

Créer une feuille de style

Comme nous l'avons expliqué précédemment, il est utile de consigner les informations sur l'aspect de votre site Web dans un même fichier. Ainsi toutes vos pages pourront s'y reporter. Elles auront la même apparence, ce qui permet de donner à tout le site une certaine constance, une identité visuelle.

 

Créer le fichier CSS

Avec votre éditeur, ouvrez un fichier vide et sauvegardez-le sous le nom "exemple.css". C'est dans ce fichier que nous allons consigner la présentation CSS de votre site. Pour les besoins de la démonstration, nous allons utiliser notre page d'exemple, sur laquelle nous allons expérimenter notre CSS. Ne vous étonnez donc pas que le nom de nos fichiers deviennent css_exemple1.css, css_exemple2.css, etc. au fur et à mesure que l'on progresse. (De même pour la page HTML.) Ne changez pas pour autant les noms de vos documents !

 

Lier le fichier CSS à la page HTML

Il faut maintenant signaler au navigateur que pour afficher notre page HTML, il doit utiliser les informations CSS contenues dans le fichier "css_exemple.css". Pour cela, il faut insérer la ligne suivante dans l'en-tête de la page HTML, c'est-à-dire entre les balises <head> et </head> de votre document :

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

La balise <link> permet de faire un lien vers le document CSS. L'attribut rel indique que le document vers lequel on crée un lien est une feuille de style. L'attribut href de la balise indique l'adresse relative de la feuille de style CSS. Ici, nous avons sauvegardé le fichier CSS dans le même répertoire que la page HTML. L'attribut type indique que le type de document correspond au CSS. L'attribut media précise que cette feuille de style est à utiliser sur des écrans non-paginés, c'est-à-dire la plupart des ordinateurs navigant sur le Web.

Une fois que le lien est créé sur votre page HTML, toute modification de la feuille de style se répercute automatiquement sur toutes les pages liées à cette page. Pratique non ? Bientôt, vous saurez changer la couleur des titres sur toutes vos pages en moins de cinq secondes !

 

Commençons par redéfinir la présentation des balises HTML.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French