Les feuilles de style en cascade (en anglais cascading style sheets, ou CSS) sont des documents permettant un affichage "intelligent" du contenu d'une page HTML. Elles permettent de définir clairement l'apparence d'une (ou plusieurs) page(s) en modifiant les caractèristiques visuelles des différentes balises. Ceci fait, elles permettent de modifier assez radicalement cette apparence en ne changeant que quelques lignes de la feuille de style.
Avant de se lancer dans l'écriture d'une feuille de style, voyons comment faire savoir au navigateur qu'elle existe et qu'il lui faut l'employer. Il existe quatre méthodes d'intégrations :
On peut, par exemple, redéfinir la balise HTML "EM" pour que son contenu soit en rouge en écrivant :
Comme on peut le voir sur cet exemple, il ne s'agit pas vraiment d'une redéfinition : on ajoute le style (ici, le fait que le texte soit en rouge) à l'effet normal de la balise, qui est de mettre le texte en italique. (À noter que l'on pourrait passer outre cette mise en italique et forçant le texte à apparaître normalement.)
On peut ainsi changer le style de plusieurs balises à la fois :
On peut bien sûr faire plusieurs changements de style dans une déclaration :
Les classes permettent de déclarer un style qu'on ne désire pas appliquer à toutes les occurences d'une balise, permettant ainsi une plus grande liberté dans le contrôle des différents éléments d'un document. On peut déclarer et utiliser une classe de la manière suivante :
Il est également possible de limiter la déclaration de la classe à une seule balise, en écrivant par exemple :
On peut remarquer que ce n'est pas à proprement parler une erreur d'employer l'attribut "class" avec la valeur "gras" sur les autres balises ; les classes non définies sont simplement ignorées. De même, les éventuelles erreurs dans la feuille de style ne sont pas catastrophiques : les règles incorrectes sont ignorées.
Il existe plusieurs pseudo-classes de liens : :link, :visited, :hover, et :active, qui correspondent respectivement aux liens ayant une balise "href" quand ils ne sont pas visités, quand ils le sont, quand la souris les survole et quand on clique dessus, ce qui permet de changer le style des liens selon la situation.
Remarques :
La pseudo-classe :hover n'existe en fait pas en CSS1, mais on peut s'attendre à ce que les navigateurs la comprenne nénmoins, bien qu'on puisse avoir quelques surprises au niveau des priorités des règles.
Attention à l'ordre dans lequel vous mettez ces définitions ; le plus souvent, la souris survole un lien pour cliquer dessus, et les règles de priorités ont tendance à imposer de mettre la déclaration concernant :active après celle concernant :hover.
On peut aussi multi-classer les balises, et définir des styles particuliers pour les multi-classages en question.
On peut également multi-classer avec des pseudo-classes.
Nous avons déjà vu comment modifier une balise ou créer une classe. Les feuilles de style permettent cependant des modifications contextuelles beaucoup plus puissantes : il est possible de ne modifier les styles ou de créer une classe uniquement valable que dans le domaine compris entre certaines balises ou à l'intérieur d'éléments d'une classe particulière.
La description de style associée à un sélecteur ne s'applique qu'à son élément le plus à droite, s'il est bien dans la situation décrite par le sélecteur. Ainsi :
Si l'on parle de feuilles de style en cascade, ce n'est pas pour rien. Ce terme de cascade fait référence à la possibilité d'intégrer et d'appliquer plusieurs feuilles de style à un document. Se pose alors le problème de savoir laquelle est appliquée en cas de déclarations désignant les mêmes éléments.
En règle générale, toutes les déclarations désignant un même élément s'appliquent. Ainsi, un tableau de classe "exemple" aura à la fois le style défini pour les tableaux et pour les éléments de classe "exemple". En ce qui concerne les styles en désaccord entre les deux, déterminer lequel s'applique est une chose relativement facile. En règle générale, c'est le style dont la déclaration est la plus spécifique qui prend le dessus.
Pour chaque élément, il suffit de regarder les nombre d'IDs (un truc dont je ne parle pas ici), de classes et de balises qui apparaissent dans chacune des règles qui s'y applique. La règle qui s'applique alors est la dernière des règles faisant intervenir un maximum de balises parmi celles qui ont le plus de classes parmi celles qui ont le plus d'IDs... ce qui est moins clair que je l'espèrais. Relisez la phrase en oubliant la partie sur les IDs, et vous devriez déjà y voir plus clair.
Par "dernière" règle, on entend celle qui, parmi les candidates maximisant ce qu'il faut, à été écrite/importée en dernier dans l'ordre de la cascade. Les règles écrites en ligne au moyen de l'attribut "style" sont toujours appliquées en priorité sur les autres. De même, dans les cas où certains attributs HTML sont déclarés et en contradiction avec la feuille de style, ce sont eux qui sont prioritaires.
Les propriétés ont chacunes deux caractèristiques importantes sur lesquelles je ne m'étends pas : il s'agit de leur valeur initiale, qui le plus souvent est "évidente", et du fait qu'elles héritent ou non leur valeur de l'élément parent quand elles ne sont pas définies, ce qui est assez souvent le cas pour les propriétés d'apparence du texte, par exemple, mais pas toujours. Les raisons pour lesquelles je ne les ai pas détailées sont simples : la première, c'est que c'est très pénible à documenter, et la seconde, c'est que le caractère hérité ou non est très facile à déterminer. (Par contre, les valeurs initales peuvent parfois être difficiles à récupérer si l'on veut les utiliser pour y revenir.)
Les différentes longueurs, largeurs et hauteur qui peuvent être mises comme valeurs de propriétés peuvent être exprimées notemment en pixels (par exemple, 14px) et en pourcentage de la longueur/largeur/hauteur du bloc parent (par exemple, 80%). Elles peuvent également être exprimées dans d'autres unités. (Je crois que les pouces et les centimètres sont admis.) Ces dimensions peuvent parfois être négatives, dans les cas de positionnement relatif par exemple.
Les couleurs peuvent être désignés de plusieurs façons :
| Mot-clé | Code hexadécimal | Couleur |
|---|---|---|
| Black | #000000 | Noir |
| Navy | #000080 | Bleu foncé |
| Blue | #0000FF | Bleu |
| Green | #008000 | Vert foncé |
| Teal | #008080 | Bleu-vert |
| Lime | #00FF00 | Vert clair |
| Aqua | #00FFFF | Bleu clair |
| Maroon | #800000 | Marron |
| Purple | #800080 | Violet |
| Olive | #808000 | Vert olive |
| Gray | #808080 | Gris |
| Silver | #C0C0C0 | Argent |
| Red | #FF0000 | Rouge |
| Fuchsia | #FF00FF | Rouge fuchsia |
| Yellow | #FFFF00 | Jaune |
| White | #FFFFFF | Blanc |
On peut aussi s'attendre à ce que d'autres noms de couleurs (en anglais), tels que orange et gold, marchent, mais ils ne sont pas par contre valides vis-à-vis des spécifications.
Des commentaires peuvent être insérés à peu près partout dans une feuille de style ; ils ont valeur d'espace. Il suffit de mettre le commentaire entre /* et */, de la même manière qu'en C.
Les propriétés de police et de texte sont celles qui permettent de modifier l'apparence du texte d'un document, et sont donc primordiales.
| Propriété | Valeurs | Détails |
|---|---|---|
| font-family | nom d'une police ou d'une "famille" de polices | Il peut être nécessaire de disposer la police en question dans le répertoire contenant le document s'il ne s'agit pas d'une police "standard". |
| font-style | normal, italic, oblique | Styles respectivement usuel (dit romain), italique ou oblique. |
| font-variant | normal, small-caps | La variante "small-caps" désigne un style où les minuscules sont des versions réduites des majuscules correspondantes. |
| font-weight | normal, bold ... | Épaisseur de trait : trait normal ou gras. Il existe un certain nombre de mots-clés désignant des valeurs absolues ou relatives. |
| font-size | hauteur ... | Il existe un certain nombre de mots-clés désignant des valeurs absolues ou relatives. |
| font | ... | Raccourci pour les propriétés de police. |
| text-decoration | none, ou des combinaisons de underline, overline, line-through et blink | Texte respectivement normal, souligné, avec une ligne au dessus, qui passe à travers, ou qui clignote. |
| text-transform | capitalize, uppercase, lowercase, none | Force l'apparence du texte avec la première lettre en majuscule seulement, tout en majuscule, tout en minuscule, ou tel quel. |
| text-align | left, center, right | Aligne le texte à gauche, au centre ou à droite. |
| text-ident | longueur | Crée un alinéa de la longueur choisie. |
Les couleurs des différents éléments d'une page, et en particulier de son texte et de son arrière-plan, sont ce qui ressortira en premier d'un document, et sont donc particulièrement importantes.
| Propriété | Valeurs | Détails |
|---|---|---|
| color | couleur | Couleur du texte. |
| background-color | couleur, transparent | Couleur de l'arrière-plan. Par défaut, sa valeur est transparent, ce qui laisse apparaître l'arrière-plan de l'élément parent. |
Les blocs sont des éléments particuliers qui, à l'inverse des éléments "normaux" ou "linéaires", sont implicitement précédé et suivi d'un retour à la ligne (sauf sous certaines conditions faisant intervenir un élément parent qui soit lui-même un bloc), ce qui les met à part. Les balises TABLE (ainsi que TR, TH et TD) et DIV sont les principales balises HTML qui créent des blocs, mais ce ne sont pas les seules : la balise FORM en crée aussi, ce qui m'a déjà posé problème.
Heureusement, ce formatage particulier n'est pas une fatalité : il existe une propriété permettant de changer le statut de bloc :
| Propriété | Valeurs | Détails |
|---|---|---|
| display | block, inline, none | Disposition en bloc, disposition "linéaire", élément non retranscrit à l'écran. |
Il vaut mieux employer cette propriété avec prudence, la plupart des balises étant assez heureuses telles qu'elles sont. Ainsi, il vaut mieux en général, quand on veut employer SPAN ou DIV, employer directement celui qui correspond à l'usage voulu. (La seule différence entre les balises SPAN et DIV est que SPAN est une balise linéaire, alors que DIV crée un bloc ; c'est pour cela qu'on utilise en général SPAN pour quelques mots dans un paragraphe, et DIV pour des paragraphes entiers.)
Un bloc est séparé en 4 régions : de l'intérieur vers l'extérieur, il y a son contenu, son "padding", son bord et sa marge. Son contenu est ce que vous mettez dedans. Son padding est l'espace supplémentaire entre le contenu et le bord. Sa marge est un espace supplémentaire autour du bord, qui n'est pas forcément vide : sur cette page, la barre de navigation à gauche "flotte" dans la marge.
Il existe des propriétés permettant de modifier ces différentes régions. Dans ce tableau, * est à remplacer par top (haut), left (gauche), right (droite), ou bottom (bas) selon le côté qui vous intéresse.
| Propriété | Valeurs | Détails |
|---|---|---|
| margin | largeur | Spécifie l'épaisseur de la marge. |
| margin-* | largeur | Spécifie l'épaisseur de la marge du côté choisi uniquement. |
| padding | largeur | Spécifie l'épaisseur du "padding". |
| padding-* | largeur | Spécifie l'épaisseur du "padding" du côté choisi uniquement. |
| border-width | largeur | Spécifie l'épaisseur du bord. |
| border-*-width | largeur | Spécifie l'épaisseur du bord du côté choisi uniquement. |
| border-color | couleur | Spécifie la couleur du bord. |
| border-style | solid ... | Spécifie le style du bord. |
| border-* | ... | Raccourci pour les propriétés du bord concerné. |
| border | ... | Raccourci pour les propriétés du bord. |
Il existe des propriétés permettant de modifier directement les dimensions d'un bloc :
| Propriété | Valeurs | Détails |
|---|---|---|
| width | largeur, auto | Définit la largeur du bloc, ou laisse la navigateur la déterminer. |
| heigth | largeur, auto | Définit la hauteur du bloc, ou laisse la navigateur la déterminer. |
Il existe une propriété très intéressante pour positionner "automatiquement" un bloc. Celle-ci "force" le contenu du bloc parent (dans lequel se trouve donc l'élément qui l'emploie), en général du texte, à se déformer pour lui laisser de la place, comme le montre l'exemple.
| Propriété | Valeurs | Détails |
|---|---|---|
| float | left, right, none | Fait flotter le bloc concerné à gauche, ou à droite, ou ne fait rien. |
Il existe également des propriétés permettant de définir directement la position d'un bloc. Celles-ci ne sont pas CSS1, mais semblent assez implémentées. Soyez prudents en utilisant ces propriétés, elles ont tendance à donner des résultats différents de ce que l'on peut imaginer avant de les avoir testées.
| Propriété | Valeurs | Détails |
|---|---|---|
| position | absolute, relative | Définit si les propriétés suivantes sont considérés comme absolues (c'est-à-dire exprimées par rapport au bord de la fenêtre), ou relatives (par rapport à la position normale du bloc). |
| top | longueur | Exprime la distance entre le bord haut de référence et le bord haut du bloc. |
| left | longueur | Exprime la distance entre le bord gauche de référence et le bord gauche du bloc. |
| right | longueur | Exprime la distance entre le bord droit de référence et le bord droit du bloc. |
| bottom | longueur | Exprime la distance entre le bord bas de référence et le bord bas du bloc. |
Attention, les propriétés top et bottom sont mutuellement exclusives, de même que les propriétés left et right.
Ce document est loin d'être complet vis-à-vis des CSS1, et ce n'est d'ailleurs pas son but. Un certain nombre de choses ont été omises, soit parce que je les trouve inutiles ou trop complexes, soit parce que j'ignore simplement leur existence ou leur usage, soit parce que je n'y ai simplement pas pensé, soit parce que, euh..., c'est quand même pas facile d'écrire un document de ce genre et que la fainéantise a eu raison de moi sur certains points.
Voici une liste non-exhaustive de ce dont je ne parle pas ici :
Tout cela peut bien sûr se trouver dans la spécification officielle des CSS1 (en anglais).