CSS Débutant .com

Mettre en forme un texte en CSS

En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style.

• color: Gestion de la couleur du texte
• letter-spacing: Espace entre les lettres
• text-align: Alignement d'un texte
• text-decoration: Habiblement d'un texte

A savoir

Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien)

Couleur

Vous pouvez fixer la couleur d'un texte comme suivant :
color: valeur;

Les différentes valeurs sont :

• Nom de la couleur - exemple:(red, black...)
• Nombre hexadecimal - exemple:(#ff0000, #000000)
• Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))

Voir un exemple

Voici un texte en bleu

Voir le code CSS

.bleutext{ color: #336699; }

Voir le code dans l'élément

<span class="bleutext">Voici un texte en bleu</span>

Vous pouvez ajuster les espaces entre les lettres dans un texte.
Vous pouvez mettre une valeur négative.
letter-spacing: valeur;

Les valeurs possibles sont :

• normal
• une valeur en px

Voir un exemple

Voici des lettres espacées de 5px

Voir le code CSS

.espace5px{ letter-spacing: 5px; }

Voir le code dans l'élément

<span class="espace5px">Voici des lettres espacées de 5px</span>

Vous pouvez ajuster la position d'un texte

text-align: valeur;

Les valeurs possibles sont :

• Gauche
• droite
• centre
• justifié

Voir un exemple

Voir le code CSS

.align_left{ text-align: left; }
.align_right{ text-align: right; }
.align_center{ text-align: center; }
.align_justify{ text-align: justify; }

Voir le code dans l'élément

<span class="align_left">Ce texte est aligner à gauche.</span>
<span class="align_center">Ce texte est aligner centre.</span>
<span class="align_right">Ce texte est aligner à droite.</span>
<span class="align_justify">Ce texte est aligner justifier.</span>

Vous pouvez habiller (barré, souliger...) un texte comme suivant :
text-decoration: valeur;

Les valeurs possibles sont :

• none (rien)
• underline (souligner
• overline (ligne au dessus)
• line through (barrer)
• blink (clignoter)

Voir un exemple

Voir le code CSS

.underline { text-decoration:underline; }
.overline { text-decoration:overline; }
.line_through { text-decoration:line-through; }
.blink { text-decoration:blink; }

Voir le code dans l'élément

<div class="underline">ce texte est souligner.</div>
<div class="line_through">Texte barré</div>
<div class="blink">Ce texte cligniote (ne marche pas avec internet explorer).</div>
<div class="overline">Il ya une ligne au dessus de ce texte.</div>

Suite >>>