Tout est dans la boîte !

Modèle de boîte

Il est nécessaire pour un site sophistiqué de pouvoir contrôler la présentation des éléments, ainsi que leur position relative. Le secret des pages web impressionnantes réside dans le modèle de boîte: ce modèle correspond à la manière dont CSS perçoit tous les éléments HTML

Les CSS permettent de contrôler tous les aspects de la boîte: la taille de l'espacement autour du contenu, la présence ou non d'une bordure et la taille de la marge qui sépare les différents éléments:

• Le contenu (content)
  Chaque élément commence avec un contenu qu'il s'agisse de texte ou d'image. Ce contenu se place dans une boîte dont la taille s'adapte à sa quantité. Il n'existe aucun espace entre le contenu et les bords de cette boîte.
  

  Le contour du contenu n'est jamais visible dans un navigateur

• L'espacement (padding)
  Une boîte peut avoir une couche d'espacement autour de son aire de contenu. L'espacement est optionnel, il est transparent et ne possède aucune couleur, ni décoration d'aucune sorte.
  

  Les CSS permettent de contrôler la largeur de l'espacement qui se situe autour de l'aire de contenu

• La bordure (border)
  Les éléments peuvent être entourés d'une bordure. Celle-ci encadre l'espacement et comme il s'agit d'un trait, les bordures séparent visuellement le contenu des autres éléments de la page. Les bordures ont une épaisseur, une couleur et un style variables.
  
• La marge (marging)
  La marge est également optionnelle et elle encadre la bordure. Elle fournit le moyen d'ajouter de l'espace entre plusieurs éléments sur une même page. Quand deux boîtes sont côte à côte, les marges servent à les espacer. Tout comme les espacements, les marges sont transparentes, incolores et sans décoration.
  

Utilisons ce modèle pour mettre en page le paragraphe très stylé qui contient le texte de l'engagement que le Bar donne à ses clients:

Commençons par apporter quelques modifications au style du paragraphe engagement, histoire de voir comment s'organise la boîte. A ce dessein, nous allons créer une classe particulière «engagement» et lui assigner un style sur mesure. Nous lui ajouterons une bordure ainsi qu'une couleur d'arrière-plan afin que vous voyez clairement qu'il s'agit d'une boîte. Procédez donc comme suit:

Ouvrez le fichier bar.html, trouvez le paragraphe qui commence par «Notre engagement» puis ajoutez-lui une classe «engagement». Ajoutez une bordure et une couleur de fond au paragraphe «engagement». Tapez ce qui suit en bas de votre feuille de style, enregistrez-la puis testez la page dans votre navigateur.

Voici ce que donnerait schématiquement l'aspect du paragraphe:

La propriété padding permet d'avoir le même espacement sur les quatres côtés du contenu. Celle-ci peut s'exprimer en pixels ou en pourcentage:

A l'instar de celles des espacements, les dimensions des marges s'expriment en pourcentage ou en pixels et sont gérées par la propriétés margin:

Nous devons maintenant positionner l'image de l'étoile dans le paragraphe et retravailler la bordure pour avoir un trait noir continu. L'image qui figure sur le modèle se trouve dans le dossier images et s'intitule fond.gif. Pour l'ajouter en arrière-plan d'un élément, il suffit d'utiliser la propriété background-image avec l'adresse de l'image en valeur. Dans ce cas, l'image d'arrière-plan se répète plusieurs fois

Par défaut, les images de fond se répètent. Fort heureusement, il existe une valeur qui les en empêchent: no-repeat qui se déclare dans la propriété background-repeat. Par défaut également, les navigateurs placent les images de fond en haut à gauche de l'élément, ce qui correspond à ce que nous voulons mais utilisons tout de même la propriété background-position pour essayer. Celle-ci détermine la position de l'image et peut s'exprimer en pixels, en pourcentage ou avec un mot-clé comme top (haut), left (left), right (droite), bottom (bas) et center (centre).

Cette fois, l'image est plus conforme à ce que nous souhaitons. Mais de par sa nature, le texte la recouvre. Pour corriger ce défaut, il suffit d'utiliser l'espacement de gauche géré par la propriété padding-left:

Pour décaler un peu plus le paragraphe, on pourrait ajouter un peu plus de marge sur sa droite grâce à la propriété margin-right:

Finalement, rajoutons au paragraphe «engagement» une bordure. La propriété border-style (dont les valeurs possibles sont solid (trait continu), double (trait double), groove (trait gravé sur la page), outset (trait avec relief), dotted (pointillés), dashed (tirets), inset (effet incrusté) et ridge (élément en relief)) permet de contrôler l'aspect de la bordure, la propriété border-width (dont les valeurs s'expriment à l'aide de mots-clefs ou en pixels) permet de contrôler l'épaisseur de la bordure et border-color (dont les valeurs sont données à l'aide d'un nom, de valeurs rgb ou de code hexadécimal) détermine sa couleur. Finalement, comme les marges et les espacements, les quatre côtés sont indépendants qu'il s'agisse de leur épaisseur, de leur couleur ou de leur style (top, right, bottom ou left). A titre d'exemple, dotons le paragraphe «engagement» d'une bordure dentelée. Pour y parvenir, nous nous servirons d'une bordure avec tirets dont la couleur est blanche:

Vous avez certainement remarqué qu'un certain nombre de propriétés marchent ensemble, comme padding-left, padding-right, padding-bottom et padding-top. Pour les marges ainsi que pour background-image, background-color et background-repeat, c'est pareil. Devoir taper chacune d'entre elles est fastidieux. Heureusement, il existe des raccourcis permettant de réunir plusieurs de ces propriétés à condition de respecter toujours un ordre précis:

Si les marges ou les espacements sont identiques sur les quatre côtés ou alors par couple, il est possible d'abréger davantage:

Il existe également des abréviations pour les bordures et l'arrière-plan

Finalement, les polices de caractères peuvent être réglées à l'aide d'un raccourci couvrant toutes les propriétés y ayant trait:

Ces quelques modifications nous ont montré qu'un banal paragraphe HTML pouvait vite se transformer en quelque chose de bien plus sexy grâce à quinze lignes de CSS.

L'attribut id

Comme nous l'avons vu précédemment, l'attribut class permet de regrouper des éléments différents en leur donnant un même nom de classe et leur appliquer ainsi une ou plusieurs mêmes propriétés de style. Les classes sont censées servir à styler plusieurs éléments de la même façon. Dans le cas d'un élément unique, les classes ne sont pas vraiment adaptées. Il est alors préférable d'utiliser l'attribut id qui est un identifiant unique destiné à un seul élément.

Prenons l'exemple d'un pied de page: il n'y en a généralement qu'un seul par page, ce qui fait le candidat idéal à un id:

Donnez un id à un élément revient à ajouter un élément à une classe. La seule différence est qu'il ne peut y avoir plus d'un élément par page portant le même id. Comme nous le verrons bientôt, il existe plusieurs raisons pour lesquelles l'usage de id est important. Par exemple, lorsque vous positionnerez des éléments sur une page, il sera nécessaire que chacun d'eux soit doté d'un id unique.

Pour sélectionner un élément par son id , il suffit de mettre le caractère «#» devant l'id (avec une classe, on met un « . »):

Remarquons finalement que le paragraphe «engagement» devrait porter un id puisqu'il est censé ne servir qu'une seule fois. Nous aurions dû le concevoir ainsi depuis le départ. Heureusement, effectuer la modification est simplissime. Nous vous laissons la faire.