path: root/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html

---
title: Mise en forme basique du texte avec CSS
slug: >-
  conflicting/Learn/CSS/Styling_text/Fundamentals_9e7ba587262abbb02304cbc099c1f0d8
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Example
  - Guide
  - Learn
  - NeedsActiveLearning
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Learn/CSS/Basic_text_styling_in_CSS
original_slug: Apprendre/CSS/formatage_texte_CSS
---
<div>{{IncludeSubnav("/fr/Apprendre")}}</div>

<div class="summary">
<p>Cet article explique comment mettre en forme le texte de documents {{Glossary("HTML")}} en utilisant les propriétés {{Glossary("CSS")}} les plus communes.</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td>Vous devez être familier avec <a href="/fr/Apprendre/CSS/CSS_properties">les propriétés CSS et comment les utiliser</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectif :</th>
   <td>Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates.</td>
  </tr>
 </tbody>
</table>

<p>Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.</p>

<p>Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :</p>

<ul>
 <li>{{cssxref("color")}}</li>
 <li>{{cssxref("font-family")}} (pour utiliser différentes polices)</li>
 <li>{{cssxref("font-size")}}</li>
 <li>{{cssxref("font-weight")}}</li>
 <li>{{cssxref("font-style")}} (pour, par exemple, mettre en italique)</li>
 <li>{{cssxref("line-height")}}</li>
 <li>{{cssxref("text-align")}}</li>
 <li>{{cssxref("text-decoration")}} (pour ajouter des lignes dessous, dessus et en travers du texte)</li>
 <li>{{cssxref("text-transform")}} (pour modifier la casse du texte)</li>
 <li>{{cssxref("text-shadow")}}</li>
</ul>

<p>Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que {{cssxref("hyphens")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-indent")}}, {{cssxref("text-overflow")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-spacing")}}), les sélecteurs spécifiques ({{cssxref("::first-letter")}} ou {{cssxref("::first-line")}}), ou les unités CSS utilisées pour la taille du texte ({{cssxref("length","em","#em")}} et {{cssxref("length","rem","#rem")}}). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à {{cssxref("@font-face")}}.</p>

<h2 id="Pédagogie_active">Pédagogie active</h2>

<p><em>Il n'y a actuellement pas de contenu pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>

<h2 id="Aller_plus_loin">Aller plus loin</h2>

<h3 id="color"><code>color</code></h3>

<p>La propriété {{cssxref("color")}} modifie la couleur du texte en faisant appel à divers {{cssxref("color_value","systèmes de notation","#rgb()")}} : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour <em>red-green-blue</em>), teinte-saturation-lumière (ou HSL pour <em>hue-saturation-lightness</em>). Vous pouvez aussi utiliser un {{cssxref("color_value","mot-clé désignant une couleur","#Mots-cl.C3.A9s")}}. Voici un exemple illustrant comment colorer le texte en vert.</p>

<p>Pour commencer, intéressons nous au fragment de code HTML suivant :</p>

<pre class="brush: html">&lt;p&gt;Je suis un paragraphe vert.&lt;/p&gt;</pre>

<p>Maintenant appliquons le style ci-dessous :</p>

<pre class="brush: css">p {
  color: green;              /* C'est vert avec le mot clé "green" */
  color: <code>#008000;            /* C'est vert avec la notation hexadecimale */</code>
  color: rgb(0,128,0);       /* <code>C'est vert avec la notation RGB</code> */
  color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
}</pre>

<div class="note">
<p><strong>Astuce de pro :</strong> le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.</p>
</div>

<p>Voici le résultat :</p>

<p>{{EmbedLiveSample('color','100%')}}</p>

<h3 id="font-family"><code>font-family</code></h3>

<p>La propriété {{cssxref("font-family")}} est très utile pour ajouter une touche personnelle à votre site, <code>font-family</code> définit en effet une liste de polices dans lesquelles votre texte peut apparaître.</p>

<p>La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être <code>serif</code>, <code>sans-serif</code> ou <code>monospace</code>. Voici un exemple :</p>

<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p>

<pre class="brush: html">&lt;p class="serif"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
&lt;p class="sansserif"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;</pre>

<p>Appliquons lui le style suivant :</p>

<pre class="brush: css" style="font-size: 14px;">.sansserif {
  font-family: Helvetica, Arial, sans-serif;
}

.serif {
  font-family: "Times New Roman", Times, serif;
}
</pre>

<p>Voici le résultat :</p>

<p>{{EmbedLiveSample('font-family','100%')}}</p>

<h3 id="font-size"><code>font-size</code></h3>

<p>La propriété {{cssxref("font-size")}} ajuste la taille du texte, en utilisant une de ces unités :</p>

<dl>
 <dt>{{cssxref("length","px","#px")}}</dt>
 <dd>L'unité <code><strong>px</strong></code> détermine la hauteur en pixels de votre texte.</dd>
 <dt>{{cssxref("length","em","#em")}}</dt>
 <dd><code><strong>em</strong></code> spécifie la largeur de la lettre "M" avec la police utilisée. Les <em>ems</em> sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de <code>1.5em,</code> on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, <code>1em</code> vaut par défaut <code>16px</code>.</dd>
 <dt>{{cssxref("length","rem","#rem")}}</dt>
 <dd><code><strong>rem</strong></code> est beaucoup plus facile à utiliser comme unité qu'<em>em</em> car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.</dd>
 <dt>{{cssxref("length","pt","#pt")}}</dt>
 <dd><code><strong>pt</strong></code> est l'abréviation de <strong>point</strong>, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.</dd>
</dl>

<p>Voici une illustration de la différence entre <code>em</code> et <code>rem</code>, grâce à ce fragment de code HTML :</p>

<pre class="brush: html">&lt;div&gt;Je mesure 1rem (par défaut)
  &lt;div class="rem"&gt;Je mesure 0.8rem.
    &lt;div class="rem"&gt;Je mesure aussi 0.8rem.
      &lt;div class="rem"&gt;Ici, je mesure également 0.8rem.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;hr&gt;

&lt;div&gt;Je mesure 1em (par défaut)
  &lt;div class="em"&gt;Je mesure 0.8em.
    &lt;div class="em"&gt;Je mesure aussi 0.8em.
      &lt;div class="em"&gt;Ici, je mesure également 0.8em.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<p>En utilisant le style suivant :</p>

<pre class="brush: css">.rem {
  font-size: 0.8rem;
}

.em {
  font-size: 0.8em
}
</pre>

<p>Le résultat obtenu est le suivant :</p>

<p>{{EmbedLiveSample('font-size','100%')}}</p>

<h3 id="font-weight"><code>font-weight</code></h3>

<p>La propriété {{cssxref("font-weight")}} définit l'épaisseur des caractères, généralement à l'aide des valeurs <code>normal</code> ou <code>bold</code>. Voici un exemple :</p>

<pre class="brush: css">.bold {
  font-weight: bold;
}</pre>

<h3 id="font-style"><code>font-style</code></h3>

<p>La propriété {{cssxref("font-style")}} détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à <code>normal</code>, <code>italic</code>, et <code>oblique</code> :</p>

<pre class="brush: css">.italic {
  font-style: italic;
}</pre>

<h3 id="line-height"><code>line-height</code></h3>

<p>La propriété {{cssxref("line-height")}} définit la hauteur de la ligne en utilisant les mêmes unités que la propriété <code>font-size</code>.</p>

<pre class="brush: css">.line {
  line-height: 80%;
}</pre>

<div class="note">
<p><strong>Astuce de pro :</strong> Vous pouvez appliquer les propriétés {{cssxref("font-style")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}} à l'aide d'une seule propriété « parente » : {{cssxref("font")}}</p>

<p>Les deux exemples suivants afficheront donc exactement la même chose :</p>

<pre class="brush: css">body {
  font: bold 1em/150% Helvetica, Arial, sans-serif;
}</pre>

<pre class="brush: css">body {
  font-weight: bold;
  font-size  : 1em;
  line-height: 150%;
  font-family: Helvetica, Arial, sans-serif;
}</pre>
</div>

<h3 id="text-transform"><code>text-transform</code></h3>

<p>La propriété {{cssxref("text-transform")}} modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :</p>

<pre class="brush: css">.transform {
  text-transform: uppercase;
}</pre>

<h3 id="text-align"><code>text-align</code></h3>

<p>La propriété {{cssxref("text-align")}} contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (<code>left</code>, <code>right</code>, <code>center</code>, ou <code>justified)</code> : </p>

<pre class="brush: css">.center {
  text-align: center;
}</pre>

<h3 id="text-decoration"><code>text-decoration</code></h3>

<p>La propriété {{cssxref("text-decoration")}} permet de faire apparaitre une ligne <u>en dessous</u>, <span style="text-decoration: overline;">au dessus</span>, ou <s>à travers  de votre texte</s>. La valeur par défaut <code>none</code> supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :</p>

<pre class="brush: css">.strike {
  text-decoration: line-through;
}</pre>

<h3 id="text-shadow"><code>text-shadow</code></h3>

<p>La propriété {{cssxref("text-shadow")}} fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :</p>

<pre class="brush: html">&lt;p class="simple"&gt;COUCOU&lt;/p&gt;
&lt;p class="double"&gt;COUCOU&lt;/p&gt;
&lt;p class="feu"&gt;COUCOU&lt;/p&gt;
</pre>

<p>Si on applique maintenant ces différents styles :</p>

<pre class="brush: css">p {
  /* basic font setting */
  font: bold 3em Impact, sans-serif;
  text-align: center;
  letter-spacing: 2px
}

.simple {
  text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
}

.double {
  text-shadow: 2px 2px 0 white,
               4px 4px 0 black;
}

.feu {
  color: white;
  text-shadow: 0    0   2px #fefcc9,
               1px -1px 3px #feec85,
              -2px -2px 4px #ffae34,
               2px -4px 5px #ec760c,
              -2px -6px 6px #cd4606,
               0   -8px 7px #973716,
               1px -9px 8px #451b0e;
}
</pre>

<p>Voici le résultat final :</p>

<p>{{EmbedLiveSample('text-shadow','100%', 400)}}</p>

<h2 id="Prochaines_étapes">Prochaines étapes</h2>

<p id="CSS_text_styling">Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'<a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">utiliser le CSS dans une page web</a> ou à notre <a href="/fr/docs/Web/CSS/Tutorials">tutoriel CSS</a>.</p>