Mettre des textes en majuscules et minuscules

Les propriétés CSS permettent de mettre automatiquement des textes en majuscules dans un texte. Pour cela, il y a 2 sortes de propriétés.

Premièrement, voyons la propriété font-variant. Elle peut prendre 2 valeurs différentes :

  • small-caps qui donnera un texte en petites majuscules
  • normal qui est la valeur par défaut et donnera un texte normal

Code CSS :

p.normale {
font-variant: normal;
}

p.petite {
font-variant: small-caps;
}

Code XHTML :

<p class="normale">texte normale<p>
<p class="petite">texte en capitale </p>

Il y a aussi une autre propriété CSS qui permet de forcer les majuscules: text-transform d'un texte. Elle peut prendre ces valeurs :

  • none : ne met aucun effet sur le texte
  • lowercase : met toutes les lettres de chaque mot en minuscules
  • uppercase : met toutes les lettres de chaque mot en majuscules
  • capitalize : met uniquement la première lettre de chaque mot en majuscule

Code CSS :

.aucun {
text-transform:none;
}

.minuscule {
text-transform: lowercase;
}

.majuscule {
text-transform: uppercase;
}

.capitale {
text-transform: capitalize;
}

Code XHTML :

<p class="aucun">None : ne met aucun effet sur le texte</p>
<p class="minuscule">Lowercase : met toutes les lettres de chaque mot en minuscules</p>
<p class="majuscule">Uppercase : met toutes les lettres de chaque mot en majuscules</p>
<p class="capitale">Capitalize : met uniquement la première lettre de chaque mot en majuscule</p>

Espacement entre les caractères : letter-spacing

La propriété letter-spacing permet de spécifier l'espacement entre les caractères du texte. Les règles d'héritage sont applicables pour cette propriété. Elle peut prendre 2 valeurs :

Normal :

La valeur "normale" est la valeur par défaut de la propriété letter-spacing. Elle correspond à l'espacement normal de la police en question.

Valeur de longueur :

C'est une valeur numérique qui détermine la quantité d'espacement entre les lettres. Elle s'ajoute à la valeur normal. Elle peut être exprimée avec des unités de mesure ou en pourcentage. Celle-ci peut prendre une valeur négative. Voici un exemple d'utilisation de la propriété letter-spacing.

Code CSS :

.espace1 {
letter-spacing: -2px;
}

.espace2 {
letter-spacing: 1cm;
}

Code XHTML :

<p class="espace1">ESPACE</p>
<p class="espace2">ESPACE</p>
<p>ESPACE</p>

Le mot ESPACE est écrit de façons différentes. Les caractères de la classe espace 1 sont beaucoup plus serrés entre eux que ceux de la normale.

Espacement entre les mots : word spacing

Si la propriété letter-spacing définit l'espace inter-lettrage, la propriété word-spacing quant à elle définit le comportement de l'espace entre les mots. Les valeurs applicables sont pareilles que celles de letter-spacing:

  • Normal : La valeur normale correspond à l'espacement normal entre les mots pour une police bien déterminée.
  • Valeur de Longueur : Cette valeur indique la quantité d'espacement qui s'ajoute à l'espace mot par défaut c'est-à-dire normal. Une valeur négative est acceptée.

Exemple d'espace entre les mots :

Code CSS :

.espacemot1 {
word-spacing:20px; /*espace de 20 px entre les mots*/
}

.espacemot2{
word-spacing:1cm;/*espace de 1 cm entre les mots*/
}

Code XHTML :

<p class="espacemot1">Je vais chez ce cher Serge si sage et si chaste.</p>
<p class="espacemot2">Je vais chez ce cher Serge si sage et si chaste.</p>
<p>Je vais chez ce cher Serge si sage et si chaste.</p>

Une question ? Venez la poser sur notre forum développement web !

A propos de l'auteur

Nicolas Galle

Nicolas Galle est développeur indépendant.

Newsletter Marketing

Vous consultez la page Texte En CSS : Majuscule, Espacement Caractères Et Mots, Gras.. Comment mettre en forme un texte via CSS ? Un tutoriel pour apprendre à jouer avec les majuscules et les minuscules ainsi qu'avec les espacements entre les lettres et les mots.