Leçon 5: Feuilles de styles

La leçon cinq aborde la question des feuilles de styles et leur utilisation dans un document HTML. Vous voudrez consulter le Petit Manuel HTML sur la question.


Généralités

Le bénéfice de l'utilisation des feuilles de style tient principalement au fait qu'elles permettent de séparer le contenu de la forme. La structure, marquée par les balises HTML est beaucoup mieux perçue et signifiante lorsque dépouillée des attributs de mise en forme.

Comparez ces deux mises en forme en coulisses, de la même représentation sur la scène:

L'utilisation de la feuille de style permet de supprimer toutes les balises de mise en forme entourant H4 en ajoutant à H4 des propriétés dont les définitions se trouvent dans une feuille de style. Voici la déclaration de style correspondante:

Ajoutons que l'économie sera d'autant plus grande qu'avec un tel dispositif, il nous suffit de déclarer une seule fois les propriétés de H4 pour que toutes les instances de H4 soient affectées.

L'utilisation des styles redonne à HTML son pouvoir de structuration du texte en éliminant tous les aspects relatifs à la forme. En séparant ainsi contenu et forme, les balises nécessaires pour structurer un document sont réduites au minimum et leur pouvoir augmente par l'ajout des propriétés et la facilité de repérage qu'ils permettent dans l'éditeur.


Utilisation

Il y a deux principales façons d'utiliser les feuilles de styles:

Les deux façons sont complémentaires et à l'occasion les deux seront nécessaires. La première est justifiée s'il n'y a qu'une page à servir. Son principal avantage est de rendre évident le lien qu'elle entretient avec la page qu'elle sert. Elle a le désavantage d'occuper beaucoup d'espace dans la partie HEAD du document.

La seconde est économique pour la page, permet la réalisation facile de nouvelles feuilles de styles par simple copie de fichiers et peut servir un site de plusieurs pages permettant une gestion économique de l'ensemble. C'est la façon qui sera préviligiée ici.


Mode local

Voici l'instruction nécessaire pour insérer une feuille de style à l'intérieur d'une page HTML:

Présentée telle quelle c'est une coquille vide, disponible pour recevoir les diverses définitions de styles utilisées sur la page. Une feuille de style valide pourra commencer comme ceci:

Pour une explication de la syntaxe, vous vous rapporterez au Petit Manuel HTML section syntaxe.


Feuille externe

L'appel de feuille externe se fera dans la partie HEAD aussi de la page HTML. Voici la ligne d'instruction nécessaire pour appeler une feuille de style externe portant le nom de style.css

Cette formule est vraiment économique parce qu'elle ne prend qu'une ligne dans la partie HEAD du document alors qu'une feuille de style locale relativement complète peut facilement occuper plus de 100 lignes de définitions.


Formule mixte

La règle veut que la feuille de style externe serve un maximum de clients. Mais il peut arriver que, pour une page précise, un élément soit différent. La situation la plus commune est celle de vouloir pour cette page une couleur de fond spécifique, différente de l'ensemble des autres.

Le problème sera rapidement réglé en créant pour cette page, une nouvelle définition de couleur de fond. Cette déclaration étant faite après l'appel de la feuille de style commune, ce sera cette dernière définition qui l'emportera.

Voici l'illustration de l'exemple:

La zone de style local demeure minimale ne contenant que les modifications à apporter aux déclarations précédemment lancées par la première feuille. L'ordre des déclarations est ici important. La feuille générale d'abord, le particulier ensuite.

Récupérer

Vous pouvez récupérer ici une feuille de style complète, contenant des annotations commentées. En css, les commentaires s'écrivent entre les signes suivants

 /*  ceci est un commentaire  */

Pour récupérer la feuille de style utilisez le bouton de droite de la souris sur le lien style1.css et appliquez la commande enregistrez-sous dans votre dossier de travail.

leçon précédente leçon suivante