En ce qui concerne la stylisation, un élément de niveau bloc peut être vu comme un rectangle. Il sépare la page web en deux régions : l'intérieur du rectangle et l'extérieur. Entre les deux, il peut y avoir (ou ne pas y avoir) un cadre (en anglais : border).
Techniquement, comme on le verra, l'intérieur est en fait constitué de deux zones distinctes : le contenu proprement dit et la marge interne ou intérieure (en anglais : padding), une zone tampon qui sépare le contenu du cadre. Au niveau de la stylisation, cependant,
il n'y a pas de distinction entre les deux zones : elles partageront le même arrière plan.
Techniquement encore, une partie de l'extérieur fait aussi partie intégrante de l'élément : la marge externe ou extérieure (en anglais : margin), une autre zone tampon entre le cadre et le contenu de l'élément parent. Cette zone n'intervient pas vraiment dans la stylisation de l'élément, car elle partage la stylisation de l'élément parent.
Les concepts que nous devons examiner sont donc la stylisation de l'intérieur et celle du cadre.
La stylisation des éléments spécialisés comme les tableaux et les listes fait l'objet de pages séparées. Si on se restreint aux éléments de niveau bloc génériques, la stylisation se limte à la typographie, à la couleur d'avant-plan et à la stylisation de l'arrière-plan.
La typographie est examinée de manière détallée dans des pages subséquentes : nous n'en parlerons donc pas ici. Pour ce qui est la couleur d'avant-plan (utilisée pour le texte et le cadre, sauf
spécification contraire), les choses sont très simples : la propriété à utiliser est color, comme dans
color: blue;
Le tableau à droite donne les noms qu'on peut utiliser pour quelques couleurs de base (celles dont le nom était reconnus par le HTML 4¹). Les couleurs sont étudiées de manière beaucoup plus détaillée plus loin.
¹ Le CSS 2.1 ajoutait à la liste la couleur orange.
| Nom | Couleur | Nom | Couleur |
|---|---|---|---|
| aqua | black | ||
| blue | fuchsia | ||
| gray | green | ||
| lime | maroon | ||
| navy | olive | ||
| purple | red | ||
| silver | teal | ||
| white | yellow |
Pour l'arrière plan, on à le choix entre lui donner une couleur unie ou utiliser une image comme papier peint. La propriété à utiliser pour un fond (background, en anglais) de couleur unie est
background-color :
background-color: orange;
Pour utiliser une image en arrière-plan, on utilise la propriété background-image pour indiquer le nom et l'URL (relative ou absolue) de l'image. Voici un exemple :
background-image: url("../img/hc3.jpg");
À noter qu'il faut utiliser la macro url(). Si l'URL est relative, elle doit l'être par rapport au fichier HTML de la page web et non pas par rapport à la feuille de style CSS si celle-ci
est externe.
D'autres propriétés peuvent être utilisées en conjonction avec background-image. Voici les deux plus courantes :
| Propriété | Valeurs possibles |
|---|---|
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit |
| background-attachment | scroll | fixed | local | inherit |
background-repeat spécifie si l'image se répète dans les deux directions (repeat, le défaut), seulement horizontalement (repeat-x)
ou verticalement (repeat-y) ou pas du tout (no-repeat). La propriété peut aussi être héritée.
La propriété background-attachment n'est en général utilisée que si on veut que l'image soit fixe quand l'élément défile (valeur fixed) (par défaut,
l'image défile avec l'élément : valeur scroll).
Il est possible donner des valeurs à toutes ces propriétés en une seule déclaration qui fait intervenir la propriété background. La valeur correspondante doit indiquer dans l'ordre
les valeurs qu'on peut donner à background-color, background-image, background-repeat et background-attachment.
On peut omettre des valeurs à condition de respecter l'ordre :
background: gray url("pic.jpg") fixed;
Si on utilise à la fois une couleur d'arrière-plan et une image, celle-ci sera superposée à la couleur. Même si la couleur n'est pas visible à cause de l'image, on conseille d'en mettre toujours une. Ceci évite de se retrouver avec un fond blanc si l'image ne peut pas être affichée pour une raison ou une autre.
Il est également possible d'avoir des arrière-plans avec des dégradés. Le sujet est abordé plus loin.
La stylisation du cadre et celle des éléments de type en-ligne sont traitées dans les pages suivantes.