Les progrès récents dans le support des feuilles de style par les navigateurs permettent d'envisager (enfin) la réalisation de sites sans artifices basés sur des imbrications complexes de tables et des images pour toute originalité graphique.
Avant d'aborder des mises en formes complexes, il est important de bien comprendre les principes de base. Les feuilles de style permettent de changer les propriétés de style des éléments de l'arbre (DOM) HTML. Certaines de ces propriétés sont spécifiques au type d'élément, d'autres sont génériques.
La plupart des éléments ont un cadre, délimité par une
bordure (
border). L'espace entre la bordure
et les autres éléments est la marge (
margin),
la distance entre le contenu de l'élément et la bordure est
le
padding.
Ce paragraphe est délimité par une bordure rouge. La distance
du texte à la bordure est de 5 pixels et la marge extérieure
de 20 pixels. Ce qui est défini par le style
border:solid 1px red;margin:20px;padding:5px;.
Le style du paragraphe suivant peut être modifié à volonté en changeant simplement les valeurs du formulaire :
Le style de chaque côté du cadre peux être spécifié indépendamment, via les styles :
-
*-top: haut -
*-bottom: bas -
*-left: gauche -
*-right: droite
Par exemple, les bordures du paragraphe suivant sont modifiables indépendamment :
Ce principe est aussi applicable aux marges et au padding.
Les exemples précédents sont basés sur des bordures sous forme de ligne continue. Il existe évidemment d'autres styles :
Dans cet exemple, les propriétés de la bordure sont spécifiées
au moyen des trois sous-propriétés *-style, *-width, *-color,
contrairement aux cas précédents qui utilisent la notation directe sur
la propriété border
