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.

• text-indent: Espace avant un texte
• text-transform: Transformation du texte
• white-space: Controle des espaces blancs
• word-spacing: Espace entre les mots

A savoir

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

Espace avant la première ligne de texte (Text Indent)
text-indent: valeur;

Valeurs possibles

• valeur en px
• pourcentage

Voir un exemple

Texte avec un espace de 10px pixels.

Voir le code CSS

.indent { text-indent: 10px; }

Voir le code dans l'élément

<p class="indent">
Texte avec un espace de 10px pixels.
</p>

Vous pouvez aussi controller la taille des lettres dans un texte.
text-transform: value;

Valeurs possibles :

• none (rien)
• capitalize (capitale)
• lowercase (minuscule)
• uppercase (tout en capitale)

Voir un exemple

Voir le code CSS

.transform_caps {text-transform: capitalize;}
.transform_up {text-transform: uppercase;}
.transform_low {text-transform: lowercase;}

Voir le code dans l'élément

.transform_caps {text-transform: capitalize;}
.transform_up {text-transform: uppercase;}
.transform_low {text-transform: lowercase;}

Vous pouvez controler les espaces blancs dans un texte.
white-space: valeur;

Valeurs possibles

• normal
• pre
• nowrap

Voir un exemple

NORMAL Le texte passera à la ligne en fonction de son contenant, pour s'ajuster à celui-ci et rester dans ses limites. Valeur par défaut.

PRE Le formatage du source est conservé par le navigateur, et s'il contient un retourà la ligne celui-ci sera interprété comme un <br> (identique à <pre> ... <pre> du HTML) : Le texte dans ce cas reste bien cadré dans sa boîte qui contient l'élément texte. 

Voir le code CSS

.normal{ white-space: normal };
.pre { white-space: pre; }
.nowrap { white-space: nowrap ;}

Voir le code dans l'élément

.normal{ white-space: normal };
.pre { white-space: pre; }
.nowrap { white-space: nowrap ;}

Vous pouvez ajuster les espaces entre les mots dans un texte
word-spacing: value;

  

Valeurs possibles

• normal
• valeurs en px

Voir un exemple

Mots espacés de 5px.

Voir le code CSS

.word_space {word-spacing: 5px;}

Voir le code dans l'élément

<p> class="word_space">Mots espacés de 5px.</p>