Chapitre 1: Concept et utilité

1.1 Présentation
Le concept des feuilles de style n’est pas à proprement parler une nouveauté dans le domaine de la publication Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena sous Unix), ces feuilles de style n’ont connu qu’un intérêt limité du fait que celles-ci n’étaient pas reconnues par Netscape Navigator 3.0.
Depuis les choses ont bien changé. D’abord les browsers 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1) et le recommande  d’ailleurs vivement aux « Web designers ».
1.2 Concept
Dans un document d’une certaine importance, il arrive fréquemment que l’on attribue à certains éléments des caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue.
On peut imaginer que l’on puisse donner à cette définition de mise en forme un nom soit « titre » et qu’à chaque nouveau chapitre, plutôt que d’écrire chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, bleu, l’on puisse dire à l’ordinateur, nom du chapitre mais dans la mise en forme que j’ai défini so us le nom de « titre ».
Cette définition de mise en forme particulière, on va l’appeler feuille de style.
1.3 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’un 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.
1.4 Compatibilité
Les feuilles de style fonctionnent sous :
Explorer 3.0 mais de façon incomplète
Explorer 4.0
Netscape 4.0
Attention !!! Les feuilles de style ne sont pas reprises par Netscape 3.0.

Chapitre 2 : Définition d’un style

La définition de base d’un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.
Simple! Mais de nombreux commentaires s’imposent :
–  Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY…
–  Les propriétés de style sont entourées par des « { » et pas des [ ou des parenthèses.
–  Le couple « propriété de style/valeur » est séparé par un double-point (:).
–  Chaque couple « propriété de style/valeur » est séparé par un point-virgule (;).
–  Il n’y a pas de limite pour le nombre de couples « propriétés de style/valeur ».
–  L’espace entre propriétés de style et valeur n’est pas obligatoire mais aide fortement à la lisibilité du code source.

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Les feuilles de style (911 Ko) (Cours DOC)