Webmaster: le CSS
Le HTML, par sa simplicité, a rendu la publication de documents HTML sur Internet accessible à tous. Cependant, les concepteurs de pages Web ont vite voulu dépasser les limites imposées par ce langage de marqueurs. En effet, pour réaliser une mise en page appropriée, nous devons recourir très souvent aux tableaux ainsi qu’au marqueur <FONT>.
Il fallait donc trouver un moyen d’améliorer l’aspect mise en page du HTML. Le Consortium W3, l’organisme chargé de standardiser les technologies Web, a donc recommandé l’adoption de la norme CSS1, c’est-à-dire « Cascading Style Sheet » ou feuilles de style en cascade. Voilà une bonne nouvelle pour les concepteurs de pages Web qui peuvent désormais bâtir une mise en page plus élaborée. Néanmoins, le fait que seules les versions récentes de Microsoft Internet Explorer et Netscape supportent la norme CSS1 constitue un inconvénient important. Ainsi, MIE4 et Netscape 4 intègrent pleinement les feuilles de style, tandis que MIE3 ne le fait que partiellement. Toutefois, nous allons nous contenter d’exposer ici le principe des feuilles de style.
Le principe des CSS
Le principe de base
Le but des feuilles de style consiste à associer différents styles aux marqueurs HTML. Habituellement, aux marqueurs comme H1 (Titre 1), <B> (caractère gras) et <P> (paragraphe) correspond un style bien défini. Les feuilles de style offrent donc la possibilité de modifier les styles prédéfinis à l’aide de règles dont voici un exemple:
H1 { color: blue } La règle ci-dessus assigne la couleur bleu au marqueur H1. Ainsi, tous les titres de niveau 1 s’afficheront dorénavant en bleu. Une règle de style comporte deux parties: le sélecteur (H1 dans notre exemple) et la déclaration ( { color: blue } ). La déclaration se décompose à son tour en deux, soit la propriété (color) et la valeur (blue). Notons que n’importe quel marqueur HTML peut constituer le sélecteur. En plus, une multitudes de propriétés sont proposées dans la norme CSS1.
Les différentes façons d’associer les feuilles de style
Il existe plusieurs façons d’incorporer les feuilles de style au document HTML. Nous retrouvons les méthodes suivantes:
Intraligne
Imbriquée
Liée
Importée
La méthode intraligne
La méthode intraligne consiste à définir le style à même le marqueur HTML dans le document comme ceci:
H1 { color:blue }
Le style s’applique ici au marqueur de paragraphe. Ainsi, tout le paragraphe s’affichera en blanc.
La méthode imbriquée
Dans le cas de la méthode imbriquée, les styles sont tous définis dans l’en-tête du document HTML de la façon suivante:
Comme la règle de style se situe dans l’en-tête, nous n’avons qu’à utiliser normalement le marqueur <B> (caractère gras) dans le reste du document. Par exemple, ce texte sera affiché en gras et en vert.
La méthode liée
Cette méthode consiste à lier au document HTML une ou plusieurs feuilles de style situées dans un fichier externe,. La même feuille de style peut alors aisément s’appliquer à plusieurs documents HTML. Nous définissons la liaison de la manière suivante:
La méthode importée
Cette méthode, comme son nom l’indique importe les styles provenant d’un fichier externe de façon à les fusionner au document HTML. La définition se fait comme suit:
Les bénéfices quant à l’utilisation des feuilles de style
Nous avons présenté jusqu’à présent le principe de base des feuilles de style ainsi que les différentes méthodes d’utilisation. Aussi, est-il temps d’exposer quels bénéfices nous apportent les feuilles de style.
Une plus grande flexibilité
D’abord, les feuilles de style procurent une plus grande flexibilité au programmeur Web quant à la mise en page des documents HTML. Ainsi, le style de tous les marqueurs HTML peut se modifier selon les besoins du concepteur.
Consistance
Les feuilles de style aident le concepteur à assurer des styles consistants d’une page à l’autre d’un site Web. En appliquant des feuilles de styles externes (méthodes liées et importée) aux mêmes pages d’un site Web, nous nous assurons que celui-ci présentera la même apparence.
Facilité d’entretien
L’entretien d’un site Web devient extrêmement facile à l’aide des feuilles de styles, puisqu’il suffit de modifier les styles en un seul endroit pour changer l’apparence des marqueurs. Les feuilles de styles externes rendent le processus encore plus facile. En effet, nous n’avons qu’à faire le changement dans le fichier externe pour modifier l’apparence de marqueurs à travers toutes les pages d’un site HTML.
Voilà, nous devrions maintenant connaître quel est l’utilité des feuilles de styles. Celles-ci constituent une amélioration substantielle par rapport aux marqueurs HTML statiques. Cependant, nous devons garder à l’esprit le problème de compatibilité selon les différents navigateurs, ce qui rend la tâche un peu plus complexe.
Le principe de l’héritage
Certains éléments de la page HTML héritent des propritétés des styles définis. Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise H1:
Lorsque nous appliquons la balise H1 dans le corps de la page, il arrive fréquemment que nous y combinions d’autres balises comme ceci:
<H1> Le principe de <I> l’héritage </I> </H1>
Nous nous retrouvons avec la balise italique à l’intérieur de la balise H1. En conséquence, la balise italique héritera des propriétés du style H1 et affichera également la couleur de fond turquoise. Le même principe s’applique à beaucoup d’autres styles. Lorsque nous désirons des styles par défaut, nous pouvons les inscrire dans le BODY de la façon suivante:
Les feuilles de style en cascade
Plusieurs feuilles de styles peuvent caractériser un même document HTML. Par conséquent, un ordre de préséance doit être déterminé. Par exemple, les styles intra-ligne ont préséance sur les styles imbriqués. À leur tour, ces derniers sont traités en priorité par rapport aux feuilles de styles importées. Plusieurs règles légiférant le mécanisme de cascade existent. Cependant, la règle générale est que les styles plus spécifiques ont priorités sur les styles plus généraux.
Conclusion
Nous avons vu quel est le principe derrière les feuilles de style. Plus particulièrement, nous avons exposé le principe de base à l’aide de règles simples. Nous avons énumérer également les différentes façons d’inclure des feuilles de style au document HTML Nous avons traité des avantages des feuilles de style par rapport au HTML pur que sont la flexibilité, la consistance et la facilité d’entretien. Finalement, nous connaissons le principe général de l’héritage et du mécanisme de cascade lorsque plusieurs feuilles de style sont définies. Lors d’une prochaine chronique nous pourrons accorder plus de détails à l’aspect technique des feuilles de styles.