CSS - Texte

Qu'est-ce que le texte CSS ?

Le texte CSS fait référence au style et à la mise en forme du contenu textuel dans les pages web à l'aide des feuilles de style en cascade (CSS). Il comprend un ensemble de propriétés CSS qui permettent aux développeurs web de contrôler divers aspects de la présentation du texte, tels que la couleur, l'alignement et l'espacement. Avec le texte CSS, vous pouvez rendre votre texte visuellement attrayant et lisible sur différents appareils et navigateurs.

Le texte CSS est une partie importante de la conception web car il influence l'expérience utilisateur et la lisibilité de votre site. En choisissant les couleurs du texte, en alignant les paragraphes, en ajustant l'espacement des lettres et des mots, et en appliquant d'autres techniques de style de texte, vous pouvez créer un aspect professionnel pour votre contenu textuel. Un texte bien stylisé améliore l'apparence générale de votre site web.

Le texte CSS joue également un rôle dans la typographie. Avec les propriétés de texte CSS, vous pouvez choisir les polices, définir les tailles de police et contrôler les hauteurs de ligne pour améliorer la lisibilité de votre texte. Ceci est important pour les passages plus longs comme les articles ou les billets de blog où un formatage approprié améliore l'expérience de lecture de l'utilisateur.

Dans les sections suivantes, nous aborderons diverses propriétés et techniques de texte CSS qui vous aideront à styliser votre texte. De la définition des couleurs à l'alignement du texte horizontalement et verticalement, en passant par l'application de décorations, de transformations et d'ombres, vous apprendrez à créer un contenu visuellement attrayant pour vos pages web.

<p>Voici    un   paragraphe   avec    des   espaces   supplémentaires.</p>

Voici un paragraphe avec des espaces supplémentaires.

<p>Ceci est un paragraphe.</div>

<p>Ceci est un paragraphe.</p>

Définir la couleur du texte

En CSS, vous pouvez définir la couleur du texte en utilisant la propriété color. Il existe plusieurs façons de spécifier la couleur souhaitée :

1. Utilisation des noms de couleurs : Le CSS propose un ensemble de noms de couleurs prédéfinis que vous pouvez utiliser pour définir la couleur du texte. Par exemple, vous pouvez utiliser color: red; pour définir la couleur du texte en rouge. D'autres noms de couleurs couramment utilisés incluent blue, green, yellow, purple, et black. Cependant, la liste des noms de couleurs est limitée.

2. Utilisation des valeurs hexadécimales : Les valeurs hexadécimales sont un moyen populaire de représenter les couleurs en CSS. Elles commencent par un symbole dièse (#) suivi de six chiffres hexadécimaux (0-9 et A-F). Chaque paire de chiffres représente l'intensité du rouge, du vert et du bleu (RVB) respectivement. Par exemple, color: #FF0000; définit la couleur du texte en rouge vif.

3. Utilisation des valeurs RVB : RVB signifie Rouge, Vert, Bleu, et représente les couleurs en spécifiant l'intensité de chaque composante. En CSS, vous pouvez utiliser la fonction rgb() pour définir les couleurs en utilisant les valeurs RVB. Par exemple, color: rgb(255, 0, 0); définit la couleur du texte en rouge.

4. Utilisation des valeurs TSL : TSL signifie Teinte, Saturation et Luminosité. C'est une autre façon de représenter les couleurs en CSS. La fonction hsl() vous permet de spécifier les couleurs en utilisant les valeurs TSL. La teinte représente le cercle chromatique et varie de 0 à 360 degrés, tandis que la saturation et la luminosité sont représentées en pourcentages.

<p style="color: blue;">Ce texte est bleu en utilisant un nom de couleur.</p>
<p style="color: #00FF00;">Ce texte est vert en utilisant une valeur hexadécimale.</p>
<p style="color: rgb(255, 0, 255);">Ce texte est magenta en utilisant des valeurs RVB.</p>
<p style="color: hsl(60, 100%, 50%);">Ce texte est jaune en utilisant des valeurs TSL.</p>

En utilisant différents formats de valeurs avec la propriété 'color' dans les feuilles de style de vos éléments de page web ou dans les styles en ligne comme dans les exemples ci-dessus, vous obtiendrez les résultats souhaités.

Alignement horizontal du texte

CSS fournit des propriétés pour aligner le texte horizontalement dans un élément. La propriété la plus couramment utilisée est text-align, qui vous permet de définir l'alignement du texte. Voici les différentes valeurs que vous pouvez utiliser avec text-align :

1. Alignement à gauche : Par défaut, le texte est aligné sur le côté gauche de son conteneur. Vous pouvez explicitement définir l'alignement à gauche en utilisant :

   text-align: left;

Cela garantit que le texte commence à partir du bord gauche de l'élément et se poursuit vers la droite.

2. Alignement au centre : Pour centrer le texte dans son conteneur, vous pouvez utiliser :

   text-align: center;

Cela centrera horizontalement le texte, le plaçant à égale distance des bords gauche et droit de l'élément.

3. Alignement à droite : Pour aligner le texte sur le côté droit de son conteneur, vous pouvez utiliser :

   text-align: right;

Cela garantira que le texte commence à partir du bord droit de l'élément et se poursuit vers la gauche.

Souligner le texte

Une utilisation courante de la décoration de texte est le soulignement. Par défaut, les liens en HTML sont soulignés pour indiquer qu'ils sont cliquables. Cependant, vous pouvez également souligner du texte ordinaire en utilisant la propriété text-decoration :

p {
  text-decoration: underline;
}

Cela ajoutera un soulignement à tous les paragraphes de votre page web.

Si vous souhaitez supprimer le soulignement par défaut des liens, vous pouvez utiliser le CSS suivant :

a {
  text-decoration: none;
}

Cela supprimera le soulignement de tous les liens, vous donnant plus de contrôle sur leur apparence.

Surlignement et barré

En plus des soulignements, vous pouvez également ajouter des surlignements et des barrés à votre texte en utilisant la propriété text-decoration.

Pour ajouter un surlignement à votre texte, vous pouvez utiliser :

h1 {
  text-decoration: overline;
}

Cela dessinera une ligne au-dessus du texte de tous les éléments <h1>.

Pour barrer du texte, vous pouvez utiliser :

span {
  text-decoration: line-through;
}

Cela tracera une ligne au milieu du texte dans les éléments <span>.

Vous pouvez également combiner plusieurs décorations en les séparant par des espaces :

p {
  text-decoration: underline overline;
}

Cela ajoutera à la fois un soulignement et un surlignement aux paragraphes.

Utilisez les décorations de manière réfléchie pour transmettre du sens ou attirer l'attention sans encombrer votre contenu.

Majuscules et minuscules

Pour convertir le texte en majuscules, vous pouvez utiliser le CSS suivant :

h1 {
  text-transform: uppercase;
}

Cela transformera tout le texte dans les éléments <h1> en majuscules, quelle que soit sa forme initiale dans le HTML.

De même, vous pouvez convertir le texte en minuscules en utilisant :

p {
  text-transform: lowercase;
}

Cela transformera tout le texte dans les éléments <p> en minuscules.

Mise en majuscule des mots

Si vous souhaitez mettre en majuscule la première lettre de chaque mot dans un texte, vous pouvez utiliser la valeur capitalize pour la propriété text-transform :

h2 {
  text-transform: capitalize;
}

Cela mettra en majuscule la première lettre de chaque mot dans les éléments <h2>, laissant les autres lettres dans leur casse d'origine.

Exemple de différentes transformations de texte

<h1>ceci est un titre</h1>
<p>Ceci Est Un Paragraphe.</p>
<h2>un autre titre ici</h2>

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

h2 {
  text-transform: capitalize;
}

• L'élément <h1> s'affichera comme "CECI EST UN TITRE" (tout en majuscules).
• L'élément <p> s'affichera comme "ceci est un paragraphe." (tout en minuscules).
• L'élément <h2> s'affichera comme "Un Autre Titre Ici" (première lettre de chaque mot en majuscule).

La transformation de texte aide à maintenir un style de capitalisation cohérent sur certains éléments ou sections de votre page web.

Espacement des lettres

La propriété letter-spacing en CSS permet d'ajuster l'espace entre les caractères individuels dans un texte. Par défaut, le navigateur définit l'espacement des lettres en fonction de la police utilisée. Cependant, vous pouvez remplacer cet espacement pour créer l'effet souhaité.

Pour augmenter ou diminuer l'espacement des lettres, vous pouvez utiliser une valeur de longueur positive ou négative :

p {
  letter-spacing: 2px;
}

Cela ajoutera 2 pixels d'espace entre chaque caractère dans tous les éléments <p>. Les valeurs négatives rapprocheront les caractères.

Espacement des mots

Vous pouvez également contrôler l'espace entre les mots en utilisant la propriété word-spacing. Cette propriété accepte une valeur de longueur qui représente l'espace supplémentaire ajouté entre les mots.

h2 {
  word-spacing: 1em;
}

Un espace supplémentaire de 1em (relatif à la taille de la police) est ajouté entre chaque mot dans les éléments <h2>.

Hauteur de ligne

La propriété line-height définit la hauteur de chaque ligne de texte. Elle détermine l'espacement vertical entre les lignes. Vous pouvez spécifier la hauteur de ligne en utilisant des valeurs de longueur, des pourcentages ou des nombres sans unité.

p {
  line-height: 1.5;
}

Les paragraphes ont une hauteur de ligne fixée à 1,5 fois leur taille de police. Si la taille de la police est de 16px, alors la hauteur de ligne sera de 24px (16px * 1,5). Ajuster la hauteur de ligne améliore la lisibilité en empêchant les lignes d'être trop rapprochées ou trop éloignées.

Indentation

L'indentation fait référence à l'espace au début d'une ligne de texte. En CSS, vous pouvez indenter la première ligne d'un paragraphe en utilisant la propriété text-indent, qui accepte une valeur de longueur spécifiant la quantité d'indentation :

p {
  text-indent: 20px;
}

Cette règle indente la première ligne de chaque paragraphe de 20 pixels. Voici la traduction en français :

Ajouter une ombre au texte

Pour ajouter une ombre à un texte, utilisez la propriété text-shadow suivie d'un ensemble de valeurs :

h1 {
  text-shadow: 2px 2px 4px #000000;
}

L'élément <h1> aura une ombre avec ces propriétés :

• La première valeur (2px) spécifie le décalage horizontal de l'ombre. Une valeur positive déplace l'ombre vers la droite ; une valeur négative la déplace vers la gauche.
• La deuxième valeur (2px) spécifie le décalage vertical de l'ombre. Une valeur positive déplace l'ombre vers le bas ; une valeur négative la déplace vers le haut.
• La troisième valeur (4px) définit le rayon de flou de l'ombre. Une valeur plus grande donne une ombre plus floue et plus douce.
• La quatrième valeur (#000000) définit la couleur de l'ombre.

Vous pouvez ajuster ces valeurs pour obtenir différents effets :

p {
  text-shadow: -1px -1px 2px #FF0000;
}

Cela créera une ombre rouge décalée de 1 pixel vers le haut et vers la gauche, avec un rayon de flou de 2 pixels.

Vous pouvez également appliquer plusieurs ombres à un même texte en séparant chaque définition par une virgule :

h2 {
  text-shadow: 1px 1px 2px #000000, 0 0 10px #0000FF;
}

L'élément <h2> a deux ombres :

• La première est noire, décalée d'un pixel vers le bas et la droite, avec un rayon de flou de deux pixels.
• La seconde est bleue sans décalage et a un rayon de flou de dix pixels.

En combinant différentes valeurs et couleurs, vous pouvez créer des ombres attrayantes pour votre contenu textuel.