Cours CSS : introduction

Qu'est-ce qu'une feuille de style ?

Une feuille de style est un document numérique qui va pouvoir spécifier toutes les caractéristiques de mises en formes du document lié à la balise à laquelle elle s'applique.

Concrètement, vous allez pouvoir définir pour chaque balise HTML, une mise en forme spécifique qui lui sera attachée.

Exemple 1 :

A la balise <H1> je vais pouvoir rattacher la police Arial, de taille 18 pixels, de couleur blanche. Chaque fois que j'utiliserai la balise <H1> dans mon document, tout le texte situé dans les limites de la balise recevra cette mise en forme.
Ainsi j'utiliserai les balises HTML uniquement pour spécifier le contenu du document. A une balise H1, je rattacherai un Titre, mais dont je serai libre de choisir la police, la taille, la couleur ... sans faire appel à d'autres balises qui alourdiraient mon document. La balise H2 indiquera un sous Titre, etc...
Toutes les balises HTML retrouveront leur sens premier.
Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un ordre de priorité sera déterminé par le browser.

Exemple 2 :

Je veux mettre une partie de mon texte dans une balise <H1> d'une autre couleur que celle définie par <H1>. J'utilise alors un autre marqueur de style (en l'occurrence peut être une classe dont on parlera plus loin), et le tour est joué. De même je peux vouloir étendre les propriétés d'H1, par exemple sur le style du caractère, il me suffira là encore de rajouter une mention de style par une balise ou un autre marqueur.
Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.

Utilité et avantages

• Séparation du contenu et de la mise en forme.
• Cohésion de la présentation tout au long du site avec les feuilles de style externes.
• Modifier l'aspect d'une page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises.
• Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions.
• Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
• Réduire le temps de chargement des pages.
• Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise <DD>...) et ainsi augmenter la créativité des écrivains du Web.
• Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à Netscape 4.0.