L'apparence d'un texte contenu dans une zone CSS peut principalement être personnalisée selon onze attributs :

  1. la couleur;
  2. la taille;
  3. la police (typographie);
  4. l'épaisseur;
  5. le style (inclinaison);
  6. la décoration;
  7. la variance;
  8. la casse des caractères;
  9. l'espacement entre chaque caractère;
  10. l'espacement entre les lignes;
  11. l'espacement entre les mots;

1. Pour modifier la couleur

L'attribut 'COLOR' est utilisé ici. Il peut prendre deux types de valeurs:

  1. un code de couleur, composé de trois séries de deux caractères représentant respectivement la quantité de Rouge, de Vert et de Bleu  (il vous faut un logiciel de dessin pour visualiser les codes couleurs dans une palette)
  2. un nom de couleur, en anglais (ex: red, green, black, lemon, ...)

Quelques exemples:

  • #articleBody {COLOR: orange;}
  • #articleDetails {COLOR: blue;}
  • #blogDescription {COLOR: #ff8888;}  /* saumon */
  • #commentBody {COLOR: #808080;}  /* gris */ 

 

2. Pour modifier la taille

L'attribut 'FONT-SIZE' est utilisé ici. Vous devez indiquer l'unité de calcul ainsi que la valeur de cette unité. Elle peut être en valeurs absolues (pixels ou en points) , ou en valeur relative (un pourcentage).

Quelques exemples:

  • #articleItems {FONT-SIZE: 14px;}  /* des lettres de 14 pixels */
  • #articleDetails {FONT-SIZE: 80%;}  /* 80% de la valeur par défaut dans cette zone */
  • #blogDescription {FONT-SIZE: 30pt}

 

3. Pour modifier la police

L'attribut 'FONT-FAMILY' est utilisé ici. Vous pouvez indiquer plusieurs typos l'une après l'autre. Le navigateur du client choisira par ordre d'apparation celle qu'il a à disposition. 

Quelques exemples:

  • #articleBody {FONT-FAMILY: Verdana;}  /* police Verdana uniquement */
  • #articleTitle {FONT-FAMILY: Trebuchet, Comic, Verdana;}  /* police Trebuchet si disponible, Comic si la Trebuchet n'est pas disponible, sinon Verdana */

 

4. Pour modifier l'épaisseur

L'attribut 'FONT-WEIGHT' est utilisé ici. Plusieurs valeurs sont possible mais je n'en indique que deux, les plus utilisées:

  • #articleBody {FONT-WEIGHT: normal;}  /* caractères avec un poids normal */
  • #articleBody {FONT-WEIGHT: bold; } /* caractères lourds, apparaissent en gras à l'écran */

 

 

5. Pour modifier le style (l'inclinaison)

L'attribut  'FONT-STYLE' est utilisé ici. Il permet d'afficher les caractères en italique, normal ou en oblique:

  • #articleBody {FONT-STYLE: italiy; }
  • #articleTitle {FONT-STYLE: normal; }
  • #articleDetails {FONT-STYLE: oblique; }

 

6. Pour modifier la décoration (sous-ligné)

L'attribut 'TEXT-DECORATION' est utilisé ici. Je vous propose 5 valeurs :

  • 'none' : pour annuler tous les effets;
  • 'underline' : pour souligner le texte;
  • 'overline' : pour surligner le texte;
  • 'line-through' : pour barrer le texte;

En exemple:

  • #articleTitle {TEXT-DECORATION: underline;}
  • #articleDetails {TEXT-DECORATION: none;}
  • #articleBody {TEXT-DECORATION: line-through;} 

 

7. Pour modifier la variance

Deux valeurs disponibles pour l'attribut 'FONT-VARIANT'. Soit l'on annule tout, soit l'on affiche des petites majuscules:

  • #articleTitle {FONT-VARIANT: none;}
  • #articleBody {FONT-VARIANT: small-caps;}

 

8. Pour modifier la casse

L'attribut 'TEXT-TRANSFORM' s'applique ici. Il peut prendre quatre valeurs:  

  • 'uppercase' : transforme le tout en majucules;
  • 'lowercase' : transforme le tout en minuscules;
  • 'capitalize' : chaque première lettre d'un mot est en majuscule;
  • 'none' : annulation des effets;

Exemples:

  • #articleTitle {TEXT-TRANSFORM: capitalize; }

 

9. Pour modifier l'espacement entre chaque caractère

L'attribut 'LETTER-SPACING' nous intéresse ici. Il peut prendre la valeur 'normal' pour rétablir l'espacement par défaut, ou une valeur unitaire en points, pixels ou pourcents:

  • #articleBody{LETTER-SPACING: 2px; }
  • #articleTitle {LETTER-SPACING: normal;}

 

10. Espacement entre lignes

'LINE-HEIGHT' est ici l'attribut important. Il prend pour valeur une grandeur unitaire, en points, pixels ou pourcents:

  • #articleBody {LINE-HEIGHT: 8px; }
  • #articleBody {LINE-HEIGHT: 2pt;}
 

11. Espacement entre les mots

L'attribut ici est 'WORD-SPACING'. Il prend également pour valeur une grandeur unitaire en points, pixels ou pourcents:

  • #articleBody {WORD-SPACING: 1.5px; }
  • #articleBody {WORD-SPACING: 2pt; }