Les feuilles de style sont en fait des Cascading Style Sheet (CSS) des feuilles de styles en cascade. Ce procédé a été mis de l'avant pour libérer le code HTML de la tâche de devoir préciser en plus de la délimitation des sections de contenu, leur apparence à l'écran.
De fait, l'utilisation des feuilles de style permet de réduire de beaucoup la quantité de code nécessaire à l'affichage d'une page HTML. Nous verrons ici un bref historique du procédé pour passer ensuite aux explications sur le fonctionnement et l'utilisation en contexte.
Rappelons qu'au départ le langage HTML n'était pas destiné à des effets de mise en page élaborés. Son but était d'offrir une façon simple de structurer des documents devant être lus par un interpréteur de documents, le navigateur.
La popularité de l'internet grandissant, sont apparus des concepteurs de page cherchant à rendre à l'écran du navigateur, les possibilités graphiques déjà gagnées pour l'imprimante et l'écran. Nous parlons ici de l'accès aux polices de caractères, taille, couleur, alignement etc.
Netscape le premier introduit la balise FONT avec ses divers attributs SIZE, COLOR. Si cet expédient permettait un plus grand contrôle de l'apparence de la page, c'était au prix d'un alourdissement du code considérable. Chaque nouvel effet demandait une nouvelle déclaration de la balise. Et pour compliquer encore la chose, l'introduction des TABLE, qui permettait des positionnements plus précis des divers blocs de texte commandaient à leur tour une répétition des commandes de mise en page. L'exemple suivant compare, pour un même affichage la présence et l'absence de feuiles de style.
La première incarnation des feuilles de style est proposée par Microsoft et acceptée par le W3 en 1997 sous le nom de CSS1. Suivra le CSS2 en 1998 qui en voulant ajouter de nouveaux éléments ajoutait aussi des problèmes dans l'organisation de l'ensemble ajoutant à la confusion d'implementation différentes chez les divers navigateurs. Une utilisation prudente des feuilles de style sera donc proposée ici, tablant sur les ressources les plus sûres, celle étant le mieux interprétées par les divers navigateurs (Internet Explorer et Netscape).
Le terme cascade dans l'appelation Cascading style sheet fait référence à la possibilité qu'ont ces feuilles de s'ajouter les unes aux autres, la dernière prenant préséance sur la précédente dans le cas de redéclaration.
Dans les feuilles les instructions se présentent sous la forme d'un sélecteur (P) suivi de sa déclaration. Une déclaration est composée d'une ou plusieurs propriété et de ses attributs:
Pourront être utilisés comme sélecteurs les diverses balises HTML ainsi que les éléments CLASS et ID. Les classes (CLASS) sont des définitions pouvant être ajoutées à divers sélecteurs. L'identificateur (ID) est semblable à la classe avec la particularité de ne pouvoir être utilisé qu'une seule fois. Ces items sont expliqués en détail dans la section des instructions.
IL y a deux principales façons d'utiliser une feuille de style selon qu'elle n'appartient qu'au document courant ou qu'elle est accessible à plusieurs documents.
Pour faire une déclaration de style dans une page HTML il faut utiliser l'instruction dans la section HEAD du document.
Cette instruction appartient au langage HTML et possède comme premier argument TYPE auquel il est accordé la valeur text/css c'est la définition qu'il faut employer pour indiquer au navigateur que les instructions qui suivent sont de type feuille de style.
Notez dans cette instruction, la présence de la balise de commentaire. Insérée à l'ouverture de l'instruction, elle assure qu'une page lue par un navigateur non familier avec les instructions de style ne soit pas dérouté, il ignorera simplement ces instructions.
Les instructions sont placées dans cette section avant la balise de fermeture de style.
L'un des grands avantages des feuilles de style est de pouvoir contrôler l'apparence d'un ensemble de documents HTML. En déclarant dans la zone prévue la feuille de style externe à utiliser, toutes les pages pourront bénéficier des déclarations qui s'y trouvent.
Une page de style externe est un simple document ascii dans lequel les instructions de style se succèdent. Ce document est ensuite nommé avec l'extension .css pour permettre au navigateur de le reconnaître. L'exemple simpleStyle vous permet de voir le contenu d'une feuille de style.
Par la suite la feuille de style sera appelée par le ou les documents qui veulent l'utiliser de la façon suivante:
Cette instruction, comme la précédente est généralement faite dans la section HEAD du document HTML. Elle se lit comme suit: l'instruction LINK possède l'attribut REL=STYLESHEET instruit le navigateur qu'il trouvera une feuille de style, de type TYPE="text/css" à l'adresse URL (HREF=)"simpleStyle.css".
