Les feuilles de style

Les feuilles de style permettent de décrire la présentation d'une page web. Elles remplacent avantageusement l'ancienne méthode, qui consistait à mettre des balises avec des attributs partout dans le texte. Elles permettent de centraliser toute la mise en forme, et donc d'avoir à peu de frais une mise en page cohérente. De plus, les possibilité sont beaucoup plus intéressantes.

Qui fait quoi, où, comment ?

Le principe

Le principe d'une feuille de style est d'associer certains paramètres à certaines balises. Vous avez probablement remarqué que votre navigateur considère, par exemple, que tous les éléments <strong> doivent être représentés en gras. C'est précisément le principe des feuilles de style : d'une seule ligne, vous pouvez demander à ce que tous les éléments <em> soient en rouge. Pour vous donner une idée, la feuille de style de la présente page demande à ce que les éléments <pre> soient représentés avec un fond de cet inimitable lemmonchiffon2.

Il est possible d'être plus sélectif que ça. Le HTML fournit deux éléments, <div> au niveau bloc et <span> au niveau inline, qui n'ont aucune présentation particulière, et servent précisément à se voir attacher un style.

Où mettre une feuille de style

Il est possible d'inclure une feuille de style de deux manières différentes dans un document. La première possibilité, qui est probablement la plus simple, est de mettre la feuille de style directement dans l'entête du document, entre une paire de balises <style type="text/css">...</style>.

La seconde possibilité est de mettre le code dans un fichier séparé, souvent nommé en .css, et de l'inclure avec dans l'entête une balise de la forme <link rel="stylesheet" type="text/css" href="fichier.css">.

Ces deux méthodes peuvent d'ailleurs être utilisées ensemble dans le même document. Dans ces conditions, si elles se contredisent, c'est la feuille écrite directement dans le document qui a raison. Le mieux est en général d'avoir une feuille de style dans un fichier séparé pour donner la présentation de tout un site, et de rajouter dans chaque page ce qui est nécessaire uniquement là.

Comment on écrit une feuille de style

Une feuille de style s'écrit dans le langage appelé CSS, pour Cascading Stylesheet. Le terme cascading souligne une propriété importante du langage : les caractéristiques de présentations se propagent « en cascade » d'un élément à ses fils. Par exemple, si un élément de type <a>, dont on ne sait rien de la police, se trouve dans un élément de type <em>, qui est en italique, alors le <a> va hériter de son père <em> le fait d'être en italique.

Le langage CSS est très simple, et le mieux est de commencer par un exemple. Voici comment on décrirait, si ce n'était déjà fait, que les éléments de type <strong> doivent être en gras : 

strong { font-weight: bold; }

C'est limpide, n'est-ce pas ?

Le point-virgule à la fin servirait à séparer d'une autre caractéristique donnée, comme par exemple : 

strong {
  font-weight: bold;
  color: red;
}

Le point-virgule final n'est pas indispensable, mais le mettre tout de suite évite de l'oublier plus tard.

Il est possible de mettre des commentaires presque n'importe où dans une feuille de style CSS en les encadrant de /* et */, comme dans le langage C.

Nous allons maintenant voir les deux grandes parties de CSS : les sélecteurs, qui décident à quel(s) élément(s) une règle s'applique (le strong de l'exemple), et les déclarations, qui indiquent l'apparence que ces éléments doivent prendre (le font-weight: bold de l'exemple). Ces deux parties sont tout à fait indépendantes, et il est possible de les lire dans un ordre quelconque.

Les sélecteurs

Quelques règles de bases

L'essentiel des sélecteurs sera formé de noms d'éléments, ce qui désigne tous, ou certains éléments de ce type.

Il est possible de mettre plusieurs sélecteurs par règle, en les séparant par une virgule. La règle s'applique alors à tous les sélecteurs, comme si plusieurs règles avaient été écrites.

Un même élément du document peut recevoir différentes mises en forme par différentes règles. En général, les règles sont simplement combinées : par exemple du bleu parce que c'est un lien, et du gras parce que c'est dans un <strong>, ça donne du bleu gras.

Si les règles portent sur le même attribut (par exemple la couleur), c'est la règle la plus précise qui l'emporte. Ainsi, on peut définir l'apparence de tous les liens de la page, mais revenir ensuite pour définir l'apparence des liens de la barre de navigation.

Les sélecteurs hiérarchiques

Considérons par exemple : 

table p { par-indent: 0; }

Ce sélecteur s'applique à tous les éléments de type p contenus dans un élément de type table, et seulement ceux-là. Dans cet exemple, p et table auraient pu être des sélecteurs plus compliqués (mais vous ne savez pas encore en faire). Et il est également possible de mettre trois sélecteurs à la suite ou plus.

Ce genre de règle s'applique à n'importe quel degré de descendance : dans l'exemple, le p ne sera pas directement dans le table, il y aura certainement un tr et un td entre les deux. Ça n'a pas d'importance.

Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans sélecteur1, ce qui peut être utile dans quelque chose de la forme : 

ul > li { margin-left: 1em; }

si on n'a pas envie que la règle s'applique à un li qui serait contenu dans une sous-liste de type ol.

La classe d'un élément

En HTML, n'importe quel élément peut être affublé d'un attribut class, qui n'a aucune signification, et sert uniquement à faire le lien avec une feuille de style.

Ainsi, il peut me prendre l'envie, quand un paragraphe est un exemple, d'écrire non pas <p> tout court, mais <p class="exemple">. Si je ne fais rien de plus, ça ne servira à rien. Mais je peux ajouter une règle CSS comme par exemple : 

p.exemple { font-family: sans-serif; }

et alors tous ces paragraphes apparaîtront dans une police différente.

L'attribut class s'utilise souvent en conjonction avec les éléments div et span, qui deviennent ainsi des balises à tout faire. Il peut être plus pratique de travailler au niveau abstrait de div. Supposons que je veuille mettre un filet bleu à gauche de mes exemples. Je peux écrire : 

p.exemple { border-left: solid blue 2px; }

Mais si je fais ainsi, je ne peux pas mettre un exemple de plusieurs paragraphes, parce que le filet bleu serait interrompu dans l'espace entre les paragraphes. Je ne peux pas non plus mettre une énumération ou une table dans l'exemple. Il vaut mieux alors écrire : 

div.exemple { border-left: solid blue 2px; }
...
<div class="exemple">
<p>Ici mon exemple.</p>
<p>Il peut faire plusieurs paragraphes</p>
</div>

Je peux également utiliser .exemple tout court comme sélecteur, ce qui s'applique alors à tous les éléments de classe exemple, quel que soit leur type, et me laisse ainsi la liberté d'écrire <p class="exemple"> dans les cas simples, et de recourir à un div dans les cas plus compliqués.

Les classes peuvent bien sûr être utilisée avec des sélecteurs hiérarchiques.

Les pseudo-classes

HTML et CSS ont un mécanisme similaire aux classes, mais ad-hoc, pour faire le lien avec certaines fonctionnalités spécifiques, et en particulier les liens.

Le HTML a deux utilisation pour l'élément <a> : faire un lien et poser une ancre (cette dernière utilisation est obsolescente, mais encore indispensable pour compatiblité). S'il est légitime de changer l'apparence d'un lien (le soulignement usuel est quand même très laid), il n'est probablement pas souhaitable que les ancres apparaissent de la même manière. Le sélecteur a:link désigne un lien par opposition à une ancre.

Vous avez sans doute remarqué que certains navigateurs affichent de couleur différente les liens déjà visités. CSS permet de changer ça en utilisant un sélecteur a:visited. Attention, :visited s'utilise à la place de :link : un lien déjà visité n'est pas reconnu par a:link.

Dans le même genre d'idée, il existe la pseudo-classe :hover, qui désigne un élément (souvent un lien, mais ce n'est pas indispensable) que l'utilisateur « touche », avec le pointeur de la souris par exemple (la signification exacte dépend des navigateurs). On trouve également les pseudo-classes :focus et :active, qui ont des significations proches (pour un navigateur à la souris habituel, :hover dit que le curseur est dessus, :active que l'utilisateur est en train de cliquer, et :focus désigne le fait d'être actif pour le clavier).

Les pseudo-classes se combinent. Ainsi, pour changer le fond d'un lien quand le pointeur passe dessus, on écrira : 

a:link:hover, a:visited:hover { background-color: yellow; }

Il existe encore quelques autres pseudo-classes, comme :lang, mais elles sont souvent mal reconnues par les navigateurs, et moins utiles.

Les déclarations

Les déclarations sont toujours de la forme nom: valeur; (le point-virgule final peut être omis), et permettent de changer énormément d'aspects de la présentation d'un élément.

Dans beaucoup de cas, la valeur peut être inherit, ce qui revient à ne pas spécifier de valeur et utiliser celle de l'élément parent (ainsi, un lien est de la même police que le paragraphe qui l'englobe). Cette valeur est souvent le défaut, et il n'est utile de la préciser que pour annuler une autre déclaration (ce qui peut se voir comme une mauvaise conception, mais vous êtes libres).

Police et couleur

La première chose qu'on veut apprendre à changer, c'est évidemment l'apparence des caractères : la police et la couleur, ainsi que la taille. L'utilisation de CSS fait complètement disparaître l'usage de l'antique élément <font>. Voici l'essentiel des déclarations de police :

Pour changer la taille de la police, c'est font-size qu'il faut utiliser. On peut lui donner une valeur descriptive (xx-small, x-small, small, medium, large, x-large, xx-large), une valeur relative à la taille actuelle (larger, smaller ou un pourcentage), ou une longueur fixée (voir plus bas pour les unités possibles). Ce dernier choix est à éviter car il prive l'utilisateur de sa liberté de choix sur la taille des polices (quelqu'un qui a de bons yeux peut préférer des polices petites pour tout avoir sur une page, quelqu'un qui a des problèmes de vue voudra de gros caractères).

Il est possible de spécifier plusieurs propriétés d'un coup avec font:. Il faut alors mettre d'éventuels style, variante et graisse, puis une taille, puis une famille.

La couleur se règle avec color:. Une couleur peut s'indiquer de plusieurs manières :

Cadres et marges

Un bloc (un paragraphe, un titre, une table) est entouré de trois zones : de l'intérieur vers l'extérieur, du remplissage (padding), une bordure (souvent fine ou absente) et une marge. Les marges d'objets voisins fusionnent, mais ça s'arrête à la bordure. Quand on définit une couleur de fond, celle-ci s'étend dans le remplissage jusqu'à la bordure.

Dans le cas des marges, seule leur étendue peut être définie. On utilise pour ça margin-top, margin-right, margin-bottom et margin-left. On peut indiquer les quatre d'un coup avec margin, en les indiquant dans cet ordre (dans le sens des aiguilles d'une montre, en partant de midi). Si on ne met que deux longueurs elles définissent les marges haute et basse d'une part et gauche et droite d'autre part, et si on n'en met qu'une, les quatre marges sont égales.

Les longueurs sont indiquées par des nombres avec des unités. Les unités possibles sont in (pouce), cm, mm, pt (point, 1/72 pouce), pc (pica, 12 points). On a également em et ex, qui dépendent de la police active, et surtout de sa taille ; l'em est plutôt à utiliser pour les longueurs horizontales, l'ex pour les longueurs verticales ; ce sont de bonnes unités pour les espaces entre les lignes de texte par exemple. On a pour finir px, qui désigne un pixel à l'écran.

Les dimensions des marges et du remplissage peuvent être également un pourcentage, relatif au bloc qui emboîte celui dont on définit les caractéristiques (souvent la page elle-même, mais pas toujours). Enfin, on peut indiquer auto pour les marges, pour qu'elles s'ajustent au mieux.

Le remplissage se règle exactement comme les marges, à ceci près qu'il faut mettre padding- à la place de margin-.

Pour la bordure, on a trois caractéristiques qu'il est possible de régler, width (l'épaisseur), color et style (les styles possibles sont none, hidden, dotted, dashed, solid, double, groove, ridge, inset et outset, essayez-les pour voir ce qu'ils font), ce qui donne 12 propriétés, de la forme border-côté-caractéristique (par exemple border-left-color).

On a également les raccourcis border-côté, qui permettent de définir tout ou partie des trois caractéristiques d'un coup, et border tout court qui définit une bordure identique pour les quatre côtés d'un coup. Il est d'ailleurs souvent préférable d'utiliser border tout court ; en particulier, pour un effet de relief, il vaut mieux utiliser les styles adaptés que changer manuellement les couleurs des différents côtés.

Maintenant, le fond. Il est possible de choisir une couleur unie avec background-color. La valeur transparent est également possible, et parle d'elle-même. On peut également mettre une image de fond avec background-image: url(http://some.where/image.png (il est bien sûr possible de mettre un chemin relatif) ; la valeur none permet d'enlever une image déjà présente. On peut contrôler la position de l'image, avec background-repeat, qui peut prendre les valeurs repeat, repeat-x, repeat-y ou no-repeat, pour choisir si l'image se répète ou pas, background-position, qui prend deux longueurs ou pourcentages, et enfin background-attachment, qui vaut scroll ou fixed (l'image défile avec la page ou pas).

Le raccourci background permet de fixer tout ou partie de ces caractéristiques d'un coup. Exemple : 

body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }

L'apparence des tables

À suivre...

Auteur : Nicolas George. Dernière modification le .