Voyons les différentes propriétés qui servent à le mettre en forme.
Les propriétés de police
font-family: valeur;
La première chose à faire pour formater du texte, c'est indiquer une police de caractères. Cela se définit par la propriété font-family. La valeur possible est le nom d'une police. Contentez-vous d'utiliser les polices de base, qui seront lisibles par tous vos visiteurs :
"Times New Roman" - Arial - "Trebuchet MS" - Verdana - Geneva - sans-serif
Ici, on met comme valeur un nom spécifique de fonte, tel qu'il apparaît dans votre traitement de textes. Les noms de polices qui comportent une espace devront être mis entre guillemets. Vous pouvez mettre plusieurs noms, séparés par une virgule ( , ) ; ceci permettra à votre visiteur, s'il n'a pas la première fonte de la liste, d'utiliser la seconde... jusqu'à la fin de la liste.
Pour vous assurer que vos visiteurs "verront" votre texte, mettez au moins une fonte générique à la fin de votre liste :
serif - sans-serif - cursive - fantasy - monospace.
Note : sachez rester sobre dans le choix de vos polices.
Exemples :
Code:
font-family: "Trebuchet MS", Arial, Verdana, Geneva, sans-serif; font-family: "Times New Roman", serif;
Avec cette propriété, vous choisirez la taille de votre police. La liste des valeurs est longue, je me contenterai de vous mettre les valeurs les plus courantes :
pt
px
Une taille en points (pt), c'est celle à laquelle vous êtes habitués dans votre traitement de textes.
Une taille en pixels (px), par comparaison, une taille de 14px équivaut à peu de chose près à 12pt.
Les pixels vous permettent d'aller beaucoup plus loin que les points. Car les polices sont souvent limitées à 72pt.
Alors qu'en pixels, vous pouvez aller jusqu'où vous voulez. Bon, n'abusez pas quand même !
On est très loin des tailles de 1 à 7 du html, hein ?
Exemple :
Code:
font-size: 14px;
Vous allez appliquer un style à votre texte. Les valeurs possibles sont trois :
normal
italic
oblique
normal est la valeur par défaut.
italic donne un texte en italique.
oblique donne le même résultat que la précédente (certains navigateurs ne prennent même pas cette valeur en compte et l'affichent en normal).
Exemple :
Code:
font-style: italic;
Cette propriété définit la graisse de votre texte. Les valeurs possibles sont :
normal
bold
lighter
bolder
100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900
normal est la valeur par défaut.
bold donne un texte en gras.
lighter et bolder donneront respectivement un texte moins gras et plus gras que le texte où se trouvera appelée la classe. En réalité, après maints essais, je n'ai jamais vu aucune différences entre bold et bolder. Donc je n'utilise plus bolder. Il en est de même pour lighter.
100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900. Théoriquement, ces valeurs permettent de définir plus souplement une valeur de graisse. Le 400 correspond à du texte "normal" et 700 à du texte "bold". En fait, les navigateurs interprètent très mal ces valeurs. Elles ne sont donc pas d'une grande utilité.
Exemple :
Code:
font-weight: bold;
Cette propriété vous permettra d'afficher une petite portion de texte en petites capitales. N'en abusez surtout pas, car elle peut devenir très fatiguante à la vue. Limitez cet effet à quelques titres. Valeurs possibles :
normal
small-caps
Pas besoin d'explication, c'est soit l'un, soit l'autre.
Exemple :
Code:
font-variant: small-caps;
text-align: valeur;
Cette propriété va vous servir pour aligner votre texte. Valeurs possibles :
left
right
center
justify
left est l'option par défaut et donne du texte aligné à gauche.
right donne du texte aligné à droite.
center vous permet de centrer votre texte.
justify vous donne du texte aligné à la fois à gauche et à droite, en jouant sur les espaces entre les mots.
Exemple :
Code:
text-align: center;
Cette propriété sert à "décorer" votre texte. Valeurs possibles :
none
underline
overline
line-through
blink
none est l'option par défaut.
underline soulignera votre texte.
overline mettra une ligne au-dessus de votre texte.
line-through barrera votre texte.
blink permet de faire clignoter votre texte. Cette valeur n'est plus à utiliser et les navigateurs ne la prennent en compte que très rarement.
Exemple :
Code:
text-decoration: underline;
Cette propriété sert à mettre votre texte en couleur. Sa valeur peut être de trois sortes :
un nom de couleur (ex.: black; white; blue; ...)
une valeur hexadécimale (ex.: #000000; #ffffff; #0000ff; ...)
un code RGB (ex.: rgb(0,0,0); rgb(255,255,255); rgb(0,0,255); ...)
Les trois types de valeurs ci-dessus vous donnent dans l'ordre : du noir, du blanc, du bleu.
Les noms de couleurs sont très précis et peu nombreux (il en existe environ 140).
Une valeur hexadécimale est la plus usitée dans le monde CSS et html.
Un code RGB peut être très précieux quand on ne connaît pas la valeur hexadécimale d'une couleur. Il faut noter toutefois que la plupart des logiciels de retouche d'images permet d'avoir la valeur hexadécimale de toute couleur RGB.
Exemple :
Code:
color: #008080;
Code:
p { font-family: "Trebuchet MS", Arial, Verdana, Geneva, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; text-align: justify; text-decoration: none; color: #000000; margin-left: 50px; margin-right: 20px; }