Modifier l'aspect du texte

On peut appliquer les règles CSS suivantes à toutes les balises qui contiennent du texte.

Police d'écriture : font-family

Cette règle CSS permet de choisir la police d’écriture d'un texte. Il est possible d’indiquer plusieurs noms de polices, séparés par des virgules : si la police citée en premier n’est pas présente sur l’ordinateur de l’internaute, c’est la seconde police qui sera utilisée, etc...

font-family: Verdana, Arial, Helvetica, sans-serif;

Par défaut, utilisez toujours les polices “ serif ” ou “ sans-serif ” en fin de liste. Elles correspondent aux polices de base présentes sur tous les ordinateurs.
Sur un système d’exploitation Windows, cela correspond à Arial et Times New Roman.

Taille du texte : font-size

Ce paramètre permet de définir la taille de la police. La valeur est généralement exprimée en pixels (px) ou en pourcentage (%). Il existe également des noms de taille prédéfinis. Du plus petit au plus grand : xx-small, x-small, small, medium, large, x-large, xx-large.

font-size:15px;

Épaisseur / graisse : font-weight

Cette propriété permet de mettre un texte en gras (bold), très gras (bolder), ou au contraire plus fin (lighter). Par défaut, l’épaisseur de police est normale (normal).

font-weight: bold;

Mise en italique : font-style

La propriété font-style permet de mettre du texte en italique (italic) ou en oblique (oblique). Par défaut, le style est normal (normal).

font-style: italic;

La nuance entre italique et oblique est imperceptible dans Internet Explorer. Mais d’autres navigateurs font une différence.

Une variante d'écriture, les petites majuscules : font-variant

Cette propriété permet d’écrire en petites majuscules (small-caps). Par défaut, le texte est normal (normal).

font-variant: small-caps;

Casse, majuscules et minuscules : text-transform

Cette propriété transforme automatiquement un texte en minuscules (lowercase), ou tout en majuscules (uppercase). Il est aussi possible de mettre uniquement la première lettre de chaque mot en majuscule (capitalize). Par défaut, le texte est normal (normal).

text-transform: uppercase;

Soulignement, texte barré... : text-decoration

Plusieurs décorations de texte sont applicables au texte : souligné (underline), ligne supérieure (overline), barré (line-through), clignotant (blink) et aucune décoration (none).

Ces attributs sont cumulables, à l’exception de none qui annule tous les autres.

text-decoration: underline blink;

 

Dans l'exemple ci dessus, le texte clignotera et sera souligné.

La propriété text-decoration: none; est très souvent utilisée pour supprimer le soulignement bleu qui apparaît par défaut sous les liens.

Couleur du texte : color

Vous pouvez également indiquer la couleur souhaitée de 3 manières, avec :

• le code hexadécimal d’une couleur sous la forme #aabbcc, où aa indique la proportion de rouge, bb la proportion de vert et cc la proportion de bleu. Chacune de ces 3 valeurs est comprise entre 00 et FF.

• le code d’une couleur en notation RGB (rouge, vert, bleu) sous la forme rgb(aaa,bbb,ccc), avec chaque valeur comprise entre 0 et 255

• le nom de la couleur en anglais. Cette méthode fonctionne uniquement pour les couleurs les plus fréquentes, parmi lesquelles : white, black, blue, green, red, purple, pink, yellow, silver, gray, lime, ...

color: #570FA9;
color: rgb(255,63,120);
color: red;

 

Voici un tableau récapitulatif des couleurs les plus fréquentes et de leur code hexadécimal respectif :

 

Code hexadécimal et nom normalisé des couleurs de base

Propriété globale de choix de la police : font

La propriété font vous permet de définir en une seule ligne les paramètres font-family, font-weight, font-style, font-size et font-variant :

font: Verdana, Arial, bold italic 8px;

Notez que cette propriété est parfois capricieuse et n'est pas toujours prise en compte par les navigateurs.

Pour plus d'informations, vous pouvez nous contacter par mail.