Pour réaliser des mises en page avancées et sophistiquées, les simples styles HTML ne suffisent plus. Maintenant vous devez effectivement adopter les feuilles de styles en cascade.
Ce chapitre constituera donc une présentation du langage css et vous indiquera les différentes façons de créer des feuilles de styles css avec les fonctionnalités d'un éditeur de texte comme le Notepad++ par exemple.
Les instructions des css
Les instructions d'une feuille de styles permettent de redéfinir le rôle d'une balise HTML en indiquant de nouvelles propriétés entre deux accolades ({ }). Chaque propriété s'énonce en deux parties immuables : d'abord le nom, puis la valeur en les séparant par un deux-points (:). Si vous faites appel à plusieurs propriétés, il est nécessaire de les distinguer dans ce cas par un point-virgule (;). Par exemple, la definition du tag <h2>, pour les titres, pourrait ressembler à ceci:
h2 {
font-size: 15pt;
color: blue;
}
Nous venons de définir deux nouvelles propriétés associés à la balise <h2>. Désormais, les titres qui l'utilisent apparaissent en bleu avec une taille de caractère de 15 points. Tout simplement.
Et la propriété font-size, définie en points, vous donne un contrôle bien plus puissance sur la taille d'un texte par rapport à celui dont vous disposiez avec l'ancien attibut HTML "font-size". Ainsi, vous pouvez créer vos propres définitions dans autant de balises HTML que vous voulez, et les personnaliser à loisir.
Une douzaine de propriétés peuvent être utilisées avec les feuilles de styles. Par exemple, les polices ont cinq propriétés principales, chacune d'elles s'accompagnant de valeurs spécifiques :
1.) font-family : identifie le type de police (Arial, Times...)
2.) font-style : le style de la police (normal, italique ou oblique).
3.) font-size : la taille de la police. On peut la déterminer précisément en points ou avec les termes small, medium, large et xlarge.
4.) font-variant : d'autres variations daffichage (small caps, par exemple).
5.) font-weight : la graisse de la police, Elle peut se définir en valeur numérique (400 pour normal, 700 pour gras...) ou avec une série de terme : bold, bolder...
Pour avoir une liste complète de ces propriétés, consultez les annexes, et plus particulièrement celle qui est consacrée aux instructions CSS2
