Lors de la dernière étape des préparatifs, nous avons créé une page de test. C’est un magnifique nouveau-né, mais il est nu. Et si on l’habillait un peu ?

Pour aborder les CSS on aurait pu commencer par une série d’articles théoriques puis engager une suite d’exercices d’application de ces nouvelles connaissances. On va faire autrement en nous jetant dans le bain et en pataugeant directement. Quand on sera bien à l’aise dans l’eau, on se mettra à la brasse et au crawl. C’est d’ailleurs ainsi que nous (les « monos » qui jouent aux CSS) avons tous appris : un savoir empirique qu’on consolide peu à peu par des lectures éclairées et l’étude des Grands Maîtres ;-)

Le principe de base

Nous n’évoquerons donc aujourd’hui sur le plan théorique que le principe de base. C’est la grande avancée du début de notre siècle, qui a bouleversé la pratique du design web : séparer le contenu de ses règles de présentation. Cette méthode apporte des tas d’avantages sur lesquels nous aurons l’occasion de revenir. Le plus visible pour des néophytes c’est la possibilité de présenter de mille et une façons un même contenu en ne modifiant que le fichier contenant les instructions de présentation. Ce fichier s’appelle une feuille de style. Il est rédigé dans un langage nommé CSS (acronyme de cascading style sheet).

Pour promouvoir cette méthode qui désormais représente l’une des bonnes pratiques essentielles des faiseurs de web actuels, il existe un site de démonstration : un seul fichier html, une multitude de variantes de présentation via les CSS. Il s’agit du site CSS Zen Garden.[1] Allez donc y faire un tour et cliquez sur l’un des liens de la rubrique « Choisissez une conception » (elle se trouve à droite sur le design affiché à la première visite). Voyez comme le contenu reste identique tandis que la présentation, elle, est radicalement différente. C’est grâce à cette articulation contenu/présentation que cela est rendu possible.

Ici même, ceux qui nous suivent dès le début ont pu noter le changement de présentation de ce blog intervenu au bout de quelques jours. Encore la magie des CSS. De même, le blog de démonstration des thèmes pour Dotclear change d’apparence au gré de la démonstration demandée mais présente toujours le même contenu. Vous pouvez aussi le voir sur mon blog personnel dans le menu « Choisissez un thème ».

Décorons la page de test

Sautons à l’eau maintenant. Tout d’abord, créez dans le répertoire mon_blog de votre ordinateur un sous-répertoire nommé jeux-css. Lancez votre éditeur de texte (Notepad++, Smultron ou gEdit selon votre plate-forme) et créez dans ce répertoire un fichier nommé style.css.

Placez-y les lignes suivantes :

body {
  background-color: #fffff0;
  color: #555555;
  font-family: helvetica, arial, sans-serif;
  }
h1 {
  font-family: georgia, "times new roman", serif;
  margin-top: 60px;
  margin-bottom: 90px;
  font-size: 180%;
  text-align: center;
  font-weight: normal;
  }
p {
  margin-left: 60px;
  text-indent: 30px;
  }
ul {
  margin-left: 90px;
  }
a {
	color: #cd3333;
  }

Votre feuille de style est prête. Transférez-la à côté de votre fichier test.html chez votre hébergeur (à l’avenir on emploiera plutôt le terme « au même niveau » que « à côté », plus informatiquement correct).

Il faut maintenant indiquer à test.html qu’il doit aller chercher ses règles de présentation dans ce fichier et les appliquer. Ouvrez le fichier test.html qui est chez votre hébergeur avec votre éditeur de texte. Repérez la ligne :

</head>

(Souvenez-vous, la partie comprise entre <head> et </head> sert à donner des informations et instructions non lisibles par vos visiteurs.)

Placez au-dessus de cette ligne, la ligne suivante :

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Cette ligne dit :

  • link_rel : indique qu’il existe une relation entre le présent fichier et une feuille de style
  • type : précise que le fichier mis en relation est de type texte en syntaxe CSS
  • href : lieu de ce fichier (là comme on est au même niveau on a juste à donner le nom du fichier)
  • media : ce fichier est à appliquer lorsque le média de lecture est l’écran (on pourrait faire une autre feuille en cas d’impression par exemple)

Tant que vous y êtes, ajoutez donc un ou deux paragraphes de votre crû dans la partie comprise entre <body> et </body>. Je rappelle qu’un paragraphe doit commencer par la balise <p> et finir par la balise </p>.

Admirez votre page

A l’aide de votre navigateur, rendez-vous sur votre page de test. Avant, votre page de test avait à peu près cette tête-là. Si tout s’est bien passé, vous devriez voir maintenant quelque chose qui ressemble à celle-ci.

Comprendre les règles

Détaillons un peu cette feuille de style toute neuve. On ne verra pas tout aujourd’hui, ça serait indigeste, mais on va tracer les grandes lignes et prendre quelques repères.

Notez d’abord la structure de chaque règle : un nom ou une lettre, suivi d’une paire d’accolades à l’intérieur desquelles figurent une ou plusieurs lignes. Marc Herzog, tenancier du blog marcarea, a fait un article très complet sur ce sujet, d’où j’extrais l’image détaillant la terminologie :

Descripteurs CSS

Correspondance des balises html et des sélecteurs CSS

Nous avons défini dans notre feuille de style des règles pour les sélecteurs body, h1, p, ul et a. Regardez donc de plus près le code de votre page de test : oh oh, ça par exemple, il y a un <body>, un <h1>, un ou plusieurs <p> et un <ul> ! Eh oui, les sélecteurs correspondent bien à des balises html. C’est grâce à cette correspondance que les règles s’appliquent. La règle de p {} s’appliquera à tous les éléments compris entre <p> et </p> de notre page html. Classe non ?

Il ne vous reste maintenant qu’à comprendre les propriétés et leurs valeurs et vous pourrez commencer à jouer !

Les règles de notre page de test

Je vous rappelle que la lecture de ce tutoriel est optionnelle et qu’il ne va pas disparaître en fumée au bout de deux jours, ni même deux mois ou deux ans. Lisez la suite tranquillement, absorbez ce que vous comprenez et réservez le reste pour plus tard, en y revenant ou à travers les tutoriels CSS à venir. Ou pas du tout si tout cela ne vous inspire que l’envie de faire demi-tour ! J’ai volontairement simplifié et condensé les explications parce qu’on aura le temps d’y revenir et que ces indications vous permettent déjà de jouer un peu et modifier votre feuille de style pour apporter quelques aménagements à votre page de test.

Nous avons donc dans notre CSS toute neuve quelques exemples de propriétés CSS :

De règles d’espacement :

  • margin-top : marge supérieure ; sur h1 je lui ai donné une valeur de 60 pixels ;
  • margin-bottom : marge inférieure.
  • margin-left : devinez ? et pour la marge droite ça serait quoi ?

De couleurs :

  • background-color : couleur de fond ; s’exprime en valeur hexadécimale (six chiffres).
  • color : couleur des caractères, en valeur hexadécimale.

Pour choisir vos couleurs et connaître leur code, vous pouvez par exemple vous servir de cet outil pour les choix de couleur (il faut déplacer le carré avec la croix au milieu, puis choisir dans les codes en bas (ceux à six chiffres précédés d’un dièse).

De mise en forme des caractères :

  • font-family : famille de caractères ; il serait trop long de tout détailler mais retenez
    • que vous pouvez indiquer autant de fontes[2] que vous le voulez, séparées par des virgules,
    • qu’elles seront utilisées dans l’ordre de leur disponibilité sur l’ordinateur de vos visiteurs (s’il n’a pas la première il utilisera la deuxième, si ni l’une ni l’autre la troisième, etc.)
    • qu’il faut toujours finir cette liste par une famille générique (serif, sans-serif, fantasy, monospace - autrement dit avec empattements, sans empattements, fantaisie, à espacement fixe),
    • que lorsque le nom de la fonte comporte plusieurs mots il faut le mettre entre guillemets ;
  • font-size : taille des caractères, est exprimée ici en pourcentage de la taille de base ;
  • font-weight : graisse des caractères - on peut choisir normal ou bold (gras)

L’héritage, la cascade

Ah, last but not least, j’attire votre attention sur la propriété font-family présente pour body et pour h1, notez que la seconde donne d’autres indications que la première. C’est la mise en œuvre de la notion d’héritage ou de cascade que Marc explique bien dans son article. Les règles indiquées pour un élément quelconque (ici body) s’appliquent à tous les éléments qu’il contient, sauf si l’on précise des règles spécifiques, qui deviennent alors prioritaires pour cet élément.

À vous de jouer !

Modifiez des règles, ajoutez des lignes propriété: valeur; (pensez bien au point-virgule à la fin de chaque ligne du bloc de déclaration), pataugez tant que vous voudrez et montrez-nous votre résultat, nous sommes sur les gradins et nous attendons vos exploits :-)

Pour ceux qui souhaitent dès maintenant en apprendre plus, le site du zéro offre un tutoriel qui m’a l’air bien fichu et complet.

Notes

[1] Une initiative lancée et maintenue par le webdesigner Dave Shea, l’un des Grands Maîtres que j’évoquais tout à l’heure, qui tient le blog Mezzoblue.

[2] Improprement appelées « polices » par beaucoup, et notamment Microsoft, mais il s’agit de la même chose.