Vous êtes ici :  Accueil    Formations online    Webmaster pro
  Niveau 1    CSS    Introduction

Introduction aux Cascading Style Sheets

Un Webmaster qui a pris l'habitude de puiser dans les "profondeurs" du HTML ou, pire, qui a fait connaissance avec les premiers éléments des feuilles de style a besoin de beaucoup d'imagination pour se souvenir des premières idées des "pionniers" du Web. Mais il est vrai que, dans les jours de "l'invention" du Net, les internautes se seraient bien amusés si on leur avait dit que, un jour, un créateur de site aurait à s'occuper d'un problème tel qu'une mise en page plus ou moins "parfaite".
 
A l'époque où les scientifiques du monde se sont jetés sur le nouveau phénomène nommé World Wide Web, il n'y avait effectivement personne qui se faisait du souci pour la mise en page des sites. Les nouvelles possibilités de communication servaient exclusivement à l'échange d'information entre les universités et autres organismes de recherche - les scientifiques avaient trouvé ce dont ils avaient rêvé si longtemps : le moyen de recevoir immédiatement des réponses aux questions qu'ils avaient à poser à leurs collègues ou, alternativement, de leur faire part de leurs dernières trouvailles sans avoir besoin d'attendre l'arrivée d'une lettre "classique".

Ainsi, les premières pages sur Internet ne ciblaient que des objectifs scientifiques, et la seule question qui intéressait leurs créateurs était la quantité de texte qu'ils pouvaient y insérer.

Le prochain pas concernait les images. Les scientifiques étaient évidemment contents lorsqu'un moyen a été trouvé pour en ajouter au moins quelques-unes à leurs pages. Toutefois, l'esprit n'avait pas changé : on appréciait le support de transmission d'information, mais plus "sobre" la forme dans laquelle cette information était présentée, plus "pure" sa valeur informative...
 
Jusqu'à ce que les premiers outsiders commencent à découvrir le Net. Tout à coup, le surfing sur le Web était devenu moderne, et de plus en plus d'internautes réclamaient des pages plutôt cool. Avec les premiers marqueurs du genre <FONT> et les premiers attributs de couleur, le terrain a été préparé aux balises plus aptes à façonner une mise en page qu'à transmettre des informations - et finalement, il ne falait plus attendre longtemps jusqu'à ce que l'époque des sites "sobres" soit pratiquement révolue.
 
Mais les temps où tout le monde se contentait de l'utilisation du même navigateur étaient également passés. Le règne de Netscape qui avait affiné et exploité un browser appelé "Mosaic" - originairement développé par une équipe de l'université d'Illinois nommée NCSA (National Center for Supercomputing Applications) - a pris fin lorsque Microsoft a lancé son "Internet Explorer". C'est que, jusqu'à cet instant, personne n'avait eu besoin de se préoccuper de la compatibilité des balises et attributs qu'on avait employés pour "programmer" une page. Le HTML était tout à fait suffisant pour le goût "austère" des premiers internautes, et si l'introduction d'un nouveau marqueur était jugée nécessaire, l'équipe de Netscape n'avait qu'à l'inventer et insérer dans son navigateur.
 
Avec l'apparition de l'Internet Explorer, par contre, la situation s'était compliquée. La communauté des internautes se partageait en deux, la moitié du monde avait adopté le nouveau produit, l'autre était resté fidèle au "bon vieux" navigateur de Netscape. Lorsqu'on avait donc besoin d'une nouvelle balise, il était nécessaire de la faire accepter par deux browsers à la fois...

La suite est devenue histoire. Les "piliers" de l'univers de l'Internet ont créé le World Wide Web Consortium - le W3C - avec l'idée de se mettre d'accord sur chaque marqueur, chaque attribut et chaque valeur dont ils comptaient élargir le système préféré des Webmasters de la première heure, le HTML.

L'idée, évidemment, était excellente. Son exécution, par contre, s'avérait déjà plus difficile. C'est que les "grands" - Microsoft et Netscape - n'avaient pas trop envie d'adopter les trouvailles de l'autre, et chacun s'est mis à créer son propre "standard". C'est-à-dire que, tant qu'il y avait question des balises de base, le problème n'était pas énorme. Mais dès que les marqueurs plus "avancés" sont entrés en jeu, il est arrivé à l'un de refuser les idées de l'autre... Ainsi, <BGSOUND> ou <MARQUEE> sont des inventions de Microsoft jamais acceptées par les navigateurs de Netscape, tandis que <EMBED> ou <SPACER> n'ont pas été reconnus par les Internet Explorers.
 
Cette "bagarre" autour des marqueurs "avancés" ne mettait donc pas en danger la pure transmission des informations - textes et images s'affichaient toujours d'une manière plus ou moins impeccable. Les balises "douteuses" concernaient plutôt la mise en page - sans elles, il était pratiquement impossible de créer ces sites "cool" depuis peu si demandés. Il était donc temps de trouver une alternative...

Finalement, cette alternative a été trouvée - en forme des Cascading Style Sheets, des feuilles de style en cascade. Une fois acceptées par le W3C et associées au HTML, la plupart de leurs éléments ont été admis par les nouvelles générations des navigateurs courants et inclus dans leurs "répertoires".

Déjà dans le chapitre sur les bases des CSS lié au cours HTML, nous avons appris à quoi elles servent : elles nous donnent la possibilité de faire toute sorte de mise en page, c'est-à-dire de créer enfin tous ces fameux sites cool. Elles gèrent les couleurs des polices, des liens, des arrière-plans ou même celles de certaines parties d'un arrière-plan, elles insèrent des espaces, savent manipuler les polices, les alignements, les tailles, la manière comment les liens sont présentés (soulignés, non soulignés, sur un fond coloré...) - bref, tout ce qui peut rendre plus "sympathique" l'aspect d'une page.

Mais ce n'est pas tout. Non seulement qu'elles augmentent considérablement nos possibilités, elles nous épargnent aussi pas mal de travail. Il est vrai que, tant qu'il n'est question que de fixer le style d'une seule ligne ou d'un paragraphe, leur emploi ne sauve pas beaucoup de temps. Mais celui qui, en utilisant le HTML "classique", a jamais essayé de changer toutes les tailles de police sur une page ou, même, sur un site entier, est bien conscient du travail qu'une telle modification peut impliquer.

Ce qui nous mène à un des avantages les plus essentiels des style sheets : la possibilité de gérer la mise en page en dehors du code, sur une propre feuille. Une telle feuille peut occuper une sorte de "poste de contrôle" surveillant la mise en page du site entier. Mais nous sommes aussi libres de nous servir de plusieurs de ces style sheets externes en même temps, leur nombre est théoriquement illimité, et il suffit d'en appeler une à partir de la page qu'elle est censée gérer pour que ses instructions soient transmises au code.

Nous avons déjà appris que nous disposons de trois genres de feuille de style :
	les inline style sheets ou, en français, les feuilles de styles locales
	les embedded style sheets ou, en français, les feuilles de style internes
	les external style sheets ou, en français, les feuilles de style externes

Rappelons que les inline style sheets ont l'avantage de pouvoir être insérées partout dans notre code. Si, alors, nous n'avons que quelques mots ou quelques lignes à modifier, elles peuvent s'avérer bien pratiques.
 
Les embedded style sheets, par contre, sont situées dans la partie head d'une page et exercent leur "pouvoir" sur la page entière. Dans certaines situations, elles sont donc plus efficaces que les feuilles de style locales et nous offrent, de toute manière, la possibilité de gérer plus de code en même temps.
 
Les - selon quelques auteurs - "véritables" feuilles de style en cascade, par contre, les external style sheets, sont placées en dehors des pages HTML et ne contiennent que le code en CSS, censé gérer la mise en page d'une partie du site ou du site entier. Ce genre de style sheets nous offre beaucoup plus de possibilités que les autres et constitue le seul moyen pour appliquer à un document HTML une mise en page plus ou moins parfaite.

Mais posons d'abord la question, pour quelle raison on parle de feuilles de style en "cascade". - Ce terme bien romantique fait allusion à la "cascade" d'attributs qui, de tous les côtés, se répandent sur notre code. Il a effectivement affaire à quatre - ou même cinq - "espèces" d'attributs qui exercent leur influence sur lui :
	les attributs "classiques" du HTML liés directement aux marqueurs,
	ceux qui sont infligés par les trois types de feuilles de style et, finalement,
	ceux qui surgissent en forme de scripts

Face à cette "avalanche" (plutôt que cascade) de commandes différentes, il est évidemment la première tâche d'un navigateur d'y mettre une espèce d'ordre. C'est qu'il est inévitable que les divers attributs se "contredisent" et parfois, ce genre de contradiction peut même s'avérer utile : lorsque, par exemple, une feuille de style externe définit la link color d'un site entier, mais nous souhaitons qu'un seul lien apparaisse dans une autre couleur, il ne serait pas raisonnable de nous priver de l'emploi de la style sheet pour si peu. Dans un tel cas, il suffit de définir l'exception "sur place", au moyen d'une feuille de style locale. Seul problème : le navigateur doit savoir, à qui donner la priorité.

Heureusement, cette question a été réglée "d'office", par les "inventeurs" des feuilles de style. Dans la cascade d'attributs - ou de "propriétés" comme on dit en langage CSS -, ce sont toujours les expressions "classiques" du HTML qui gardent le dessus. Immédiatement après elles, les style sheets du type local sont prises en compte. Ensuite, les navigateurs s'occupent des commandes lancées par les embedded style sheets pour ne pas "obéir" aux feuilles de style externes qu'à la fin, lorsque aucune autre instruction ne s'y oppose.

Au cours de la formation des feuilles de style, nous remarquerons que ces règles ne "fonctionnent" pas dans toutes les situations. Mais ce sont les "bogues" et "astuces" d'une technique dont le pro prend rapidement l'habitude. Les étudiants de la formation apprennent rapidement à ne plus s'inquiéter pour ces problèmes - ils les maîtriseront dès qu'ils en auront pris connaissances. Pour le moment, par contre, nous nous contentons d'appliquer les règles qui ont le mérite de nous guider à travers l'apprentissage d'une technique riche et complexe.

Toutefois, si nous parlons des relations entre les embedded et les external style sheets, nous nous rendons compte que ces règles ne sont pas si évidentes qu'ils ont l'air à première vue.
 
C'est que nous disposons de deux méthodes différentes pour appeler une feuille de style externe : celle de la liaison et celle de l'importation. En principe, les deux méthodes entraînent des effets identiques - elles attachent une feuille de style externe à un document HTML. La seule différence consiste en la position sur l'échelle des priorités qu'elles procurent à la style sheet. C'est-à-dire que la technique de la liaison la place au niveau d'une feuille de style interne - les deux ont donc la même priorité -, tandis que la méthode de l'importation lui donne une position inférieure.
 
Les deux méthodes sont présentées dans le cadre du chapitre sur la syntaxe des CSS.

Nous ne devrions toutefois pas perdre de vue les autres aspects qui tiennent un rôle important dans le jeu de la priorité des valeurs :
	les préférences de l'internaute
	les préférences du navigateur et, finalement
	les héritages

Les préférences

Nous savons bien que, malgré toute la peine que nous nous donnons avec notre site, l'internaute a finalement toujours le dernier mot. S'il insiste à configurer son navigateur pour qu'il affiche le contenu de sa fenêtre d'une certaine manière - par exemple dans une taille de texte différente, en mode plein écran etc. - nous n'avons aucune chance de nous y opposer. Lors de la création d'une page, nous sommes donc obligés de prendre en compte les préférences de l'internaute qui dominent toujours les éléments de notre code - peu importe si nous nous servons du HTML "classique" ou des feuilles de style.
 
Mais les CSS connaissent encore une autre forme de préférences d'internaute. Leurs créateurs se sont dit que le visiteur de notre site pourrait, par exemple, ne pas partager notre goût pour certaines couleurs ou polices. Dans un tel cas, il devrait avoir le "droit" de choisir celles qu'il préfère.

Pour cette raison, la technique avancée des feuilles de style a été enrichie d'un user interface permettant à l'internaute de choisir entre deux options : accepter les préférences du programmeur ou introduire son propre style à la page qu'il visite.

Un autre facteur plus "fort" que notre code consiste dans le navigateur lui-même. Au cours de notre travail, nous ne devrions jamais oublier que ses priorités sont elles aussi plus fortes que les valeurs que nous attachons à nos balises et attributs. - Et quand nous pensons au nombre de navigateurs différents que les visiteurs de nos sites sont susceptibles d'employer, le problème nous apparaît dans sa vraie dimension. - Seule la configuration qu'un internaute impose à son navigateur garde la priorité sur les valeurs prédéfinies par les créateurs des browsers.

Héritages et priorités

Un aspect intéressant des CSS consiste aussi dans la capacité des sélecteurs - comme on appelle les balises dans la technique des feuilles de style - d'hériter des valeurs de leurs "ancêtres". Cette fonction suit un schème relativement simple : dès qu'une valeur a été déclarée, elle est automatiquement transférée à un sélecteur "fils" appelé plus tard. Cette technique peut s'avérer très pratique lorsque, par exemple, une valeur "contradictoire" est définie qui "relève" la première, mais ne s'applique qu'à une partie limitée de la page. C'est-à-dire qu'au moment où cette nouvelle valeur reperd ses "droits", nous n'avons pas besoin de redéfinir la précédente pour qu'elle soit rappliquée : le prochain sélecteur en "hérite" automatiquement.
 
Prenons l'exemple d'une feuille de style interne apte à démontrer l'utilité de cette fonction. Comme nous l'avons appris au cours de la formation HTML, nous la plaçons dans l'en-tête de notre document :

Attention : Vu la nature de la fonction de l'héritage, il va de soi que les valeurs héritées ne tiennent pas une position très élevée sur l'échelle des priorités. En général, nous pouvons partir du principe que toutes les valeurs définies dominent celles qui ont été héritées.

Au cours de la formation CSS, nous serons encore très souvent confrontés aux règles de l'héritage entre "ancêtres" et "enfants". Nous traiterons ces règles au fur et à mesure, toujours en relation avec la matière que nous étudions.

Nous sommes conscients qu'avec le mot clé ! important, nous créons automatiquement une nouvelle échelle de priorités : plusieurs propriétés qui portent toutes la mention ! important suivent entre elles les mêmes règles de "privilèges" que celles qui en sont dépourvues.

Mais attention : Lorsque nous travaillons avec la version CSS 1 et ajoutons  ! important  aux préférences du programmeur et, en même temps, à celles de l'internaute, celles du programmeur prennent le dessus. Si, par contre, nous employons les CSS 2, le contraire arrive : les préférences de l'internaute deviennent les plus fortes.

Il va de soi que la diversité de la "cascade" ne s'arrête pas à la différence entre une feuille de style locale et interne. C'est que les "inventeurs" des CSS ont prévu un tas de règles qui définissent chaque détail de l'échelle des priorités. Ainsi, nous y trouvons l'information que les sélecteurs simples sont moins "forts" que les sélecteurs descendants ou les classes qui, de leur part, prennent le dessous lorsqu'elles sont confrontées aux sélecteurs id...
 
Tous ces sujets sont traités dans le chapitre sur la syntaxe des CSS. Nous verrons qu'ils sont plus simples à maîtriser qu'ils n'ont l'air, à première vue : finalement, la différence entre les marqueurs plus "forts" ou "faibles" nous est déjà devenue familière au cours de notre apprentissage du HTML, et la différence entre les classes et l'attribut id n'a plus rien de secret pour nous.

Mais il peut aussi arriver que nous soyons confrontés avec deux valeurs qui, selon les normes, ont la même priorité. Dans un tel cas, les CSS suivent une règle très simple : le style que nous avons déclaré le dernier reste le plus fort.

Les diverses positions sur l'échelle des priorités seront expliquées au fur et à mesure au cours des différents chapitres de la formation.

Les scripts dans les CSS

Nous ne devrions évidemment pas oublier les instructions qui atteignent le navigateur en forme d'un script. - Lorsque, jusqu'à maintenant, nous avons étudié une balise ou un attribut, nous avons eu affaire à des commandes "pures". Ce genre de commandes ont l'avantage que leur traitement ne laisse pas de choix aux navigateurs, et si le code définit une link color ou un type de police, la forme de son exécution ne laisse aucun doute. Au moment où les styles sheets s'en mêlent, le travail du navigateur devient déjà moins réglementé - mais, heureusement, sa tâche reste claire grâce aux normes plus ou moins précises fixées par le W3C.
 
Mais, au regret des créateurs des navigateurs, les feuilles de style nous offrent encore une autre possibilité : la "cascade" des marqueurs et attributs n'entraîne pas seulement les commandes du genre HTML 4.01 et inline, embedded ou external style sheet, mais elle permet aussi aux scripts - rédigés en JavaScript, PHP, Perl ou tout autre langage adéquat - ou même au DHTML, la version dynamique du HTML, de s'associer au code. Ces techniques entrelacées ont l'immense avantage de permettre aux Webmasters de créer des pages actives, intéressantes et variées - bref, le rêve du fameux site "cool" est devenu réalité. Mais, en même temps, elles "condamnent" les navigateurs de développer de plus en plus de capacités diversifiées et performantes.

Les versions des CSS

Actuellement, nous pouvons partir du principe que tous les navigateurs de la nouvelle génération ont accepté la version 1 des feuilles de style. La dernière version, par contre, CSS 2, n'est toujours pas entièrement reconnue par tous les navigateurs. En ce qui concerne les deux "grands", la version 5.5 de l'Internet Explorer et Netscape 6.0 étaient les premiers à interpréter plus ou moins correctement les éléments des CSS 2.
 
Dans le cadre de ce chapitre, nous étudions évidemment la version la plus récente, les CSS 2, mais nous ne perdrons pas de vue les différences entre les deux versions pour, au besoin, rester capables de créer également des pages qui peuvent être affichées par un navigateur plus "ancien". Du point de vue didactique, la formation des feuilles de style en cascade base sur le principe que tous les étudiants qui s'y "attaquent" ont déjà acquis une base solide du HTML 4.01, correspondant à celle fournie par la première partie de ce module.

La syntaxe des feuilles de style

Avant de nous lancer dans l'explication des nombreuses facultés de la technique des CSS dont non seulement la quantité mais surtout la qualité a tout pour "révolutionner" notre conception initiale d'un document HTML, rappelons les règles de la syntaxe d'une feuille de style. Comme nous l'avons déjà appris dans le chapitre consacré à la base des cascading style sheets, la déclaration d'un style s'appuie d'abord sur un sélecteur ou identifiant librement choisi qui, en général, consiste en un marqueur du "répertoire" du HTML. A ce sélecteur, nous lions les propriétés et valeurs qui définissent la mise en page du site - ou de la partie du site - géré par la feuille de style.

Attention : N'oublions pas qu'un sélecteur, au contraire d'un marqueur HTML, n'est jamais entouré par des parenthèses du genre < et >.

Mais avant de continuer, il est peut-être temps de définir la différence exacte entre un marqueur et un sélecteur :
	Tant que l'élément fait partie du code HTML et est, par conséquent, placé dans le body du document, nous l'appelons marqueur ou balise et l'insérons entre des parenthèses genre HTML comme, par exemple, <P> ou </P>.
	Au moment où le même élément est attaché à une feuille de style interne ou externe, nous renonçons à l'emploi des parenthèses HTML, et il se transforme en sélecteur ou identifiant.
Bien que, à première vue, la différence ne semble pas énorme, elle suffit pour distinguer entre un élément HTML et CSS.

Les bases des CSS

Rappelons-nous les bases des CSS que nous avons acquises au cours de la formation HTML. Nous savons déjà que
	la déclaration du style proprement dite est toujours placée entre des accolades, donc { et }
	la propriété et sa valeur sont séparées l'une de l'autre par le caractère deux-points (:)
	les expressions complètes contenant propriété et valeur sont séparées par le caractère point-virgule (;)

Bien que la norme n'exige pas expressément le point-virgule (;) après la dernière valeur d'une déclaration, ce caractére apporte un plus de clarté et augmente la probabilité que le code soit correctement interprété par tous les navigateurs et sous tous les systèmes d'exploitation. Il est donc très fortement conseillé de l'utiliser.

Les "finesses" des styles appelés par id ainsi que d'autres détails sur la syntaxe des sélecteurs et propriétés des CSS prochain chapitre, la technique des feuilles de style externe.