Merge branch 'main' into 20210818-Glossary/Type

11 files changed, 747 insertions, 613 deletions

diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
index 27b6617080..33bf88edac 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -6,24 +6,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
 
-<p>Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p>
+<p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
+<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2>
 
-<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
+<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
 
 <pre class="brush: css">.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
@@ -32,29 +32,29 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
 
-<h3 id="Couleur_de_fond">Couleur de fond</h3>
+<h3 id="background_colors">Couleurs d'arrière-plan</h3>
 
-<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
 
-<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
+<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>.</p>
 
 <p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p>
 
-<h3 id="Images_de_fond">Images de fond</h3>
+<h3 id="background_images">Images d'arrière-plan</h3>
 
-<p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p>
 
-<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
+<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p>
 
-<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
+<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
 
-<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
+<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4>
 
-<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
 
 <ul>
  <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li>
@@ -63,13 +63,13 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li>
 </ul>
 
-<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p>
+<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p>
 
-<h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4>
+<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4>
 
-<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
+<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
 
 <p>On peut aussi utiliser les mots-clé :</p>
 
@@ -90,9 +90,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
 
-<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
+<h4 id="positioning_the_background_image">Positionner l'image de fond</h4>
 
-<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
 
 <div class="blockIndicator note">
 <p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p>
@@ -100,7 +100,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
 
-<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
+<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>)&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: top center;
 }</pre>
 
-<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
+<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a>&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: 20px 10%;
 }</pre>
 
-<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
+<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -124,9 +124,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: top 20px;
 }</pre>
 
-<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
+<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
@@ -134,96 +134,96 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p>
 
 <div class="note">
-<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
+<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p>
 </div>
 
-<h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3>
+<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3>
 
-<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
+<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p>
 
-<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
+<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
 
 <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p>
 
-<h3 id="Images_de_fond_multiples">Images de fond multiples</h3>
+<h3 id="multiple_background_images">Images de fond multiples</h3>
 
 <p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p>
 
-<p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
+<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
 
 <div class="note">
-<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p>
+<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p>
 </div>
 
-<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
+<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
 
-<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;</pre>
 
-<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' <code>image3</code> recevra la première valeur, et l' <code>image4</code> recevra la seconde valeur.</p>
+<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p>
 
-<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.</strong></p>
+<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p>
 
-<h3 id="Attachement_du_fond">Attachement du fond</h3>
+<h3 id="background_attachment">Défilement de l'arrière-plan</h3>
 
-<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:</p>
+<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p>
 
 <ul>
- <li><code>scroll</code>: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.</li>
- <li><code>fixed</code>: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</li>
- <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li>
+ <li><code>scroll</code>&nbsp;: L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li>
+ <li><code>fixed</code>&nbsp;: L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li>
+ <li><code>local</code>&nbsp;: Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li>
 </ul>
 
-<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p>
 
-<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3>
+<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3>
 
-<p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p>
+<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p>
 
-<p>If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with <code>no-repeat</code> and a position, then a color.</p>
+<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p>
 
-<p>There are a few rules that need to be followed when writing background image shorthand values, for example:</p>
+<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p>
 
 <ul>
- <li>A <code>background-color</code> may only be specified after the final comma.</li>
- <li>The value for <code>background-size</code> may only be included immediately after <code>background-position</code>, separated with the '/' character, like this: <code>center/80%</code>.</li>
+ <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li>
+ <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li>
 </ul>
 
-<p>Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.</p>
+<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p>
 
-<h3 id="Arrière-plans_et_accessibilité">Arrière-plans et accessibilité</h3>
+<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3>
 
-<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
+<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
 
 <p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
 
-<h2 id="Bordures">Bordures</h2>
+<h2 id="borders">Bordures</h2>
 
-<p>When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.</p>
+<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p>
 
-<p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p>
+<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a>&nbsp;:</p>
 
 <pre class="brush: css">*.box {
   border: 1px solid black;
 }*</pre>
 
-<p>Or we can target one edge of the box, for example:</p>
+<p>On peut aussi cibler un seul des côtés de la boîte, par exemple&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-top: 1px solid black;
 }</pre>
 
-<p>The individual properties for these shorthands would be:</p>
+<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-width: 1px;
@@ -231,7 +231,7 @@ background-position: 10px 20px,  top right;</pre>
   border-color: black;
 }</pre>
 
-<p>And for the longhands:</p>
+<p>Pour la propriété qui concerne un des côtés&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-top-width: 1px;
@@ -240,34 +240,34 @@ background-position: 10px 20px,  top right;</pre>
 }</pre>
 
 <div class="note">
-<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
+<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p>
 </div>
 
-<p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p>
+<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p>
 
-<h3 id="Coins_arrondis">Coins arrondis</h3>
+<h3 id="rounded_corners">Coins arrondis</h3>
 
-<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
+<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p>
 
-<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
+<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
 
 <pre class="brush: css">.box {
   border-radius: 10px;
 }</pre>
 
-<p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
+<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
 
 <pre class="brush: css">.box {
   border-top-right-radius: 1em 10%;
 }</pre>
 
-<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p>
+<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p>
 
-<h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2>
+<h2 id="test_your_skills">Testez vos compétences&nbsp;!</h2>
 
 <p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p>
 
@@ -277,13 +277,13 @@ background-position: 10px 20px,  top right;</pre>
  <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
 </ol>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p>
 
 <div class="note">
 <p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
 </div>
 
-<h2 id="Résumé">Résumé</h2>
+<h2 id="summary">Résumé</h2>
 
 <p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
 
@@ -294,23 +294,23 @@ background-position: 10px 20px,  top right;</pre>
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+   <ul>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
+   </ul>
+  </li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+  <li>Arrières-plans et bordures</li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
+ </ol>
\ No newline at end of file
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
index a32606765a..94b5601bf6 100644
--- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -1,35 +1,29 @@
 ---
 title: Sélecteurs d'attribut
 slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
-tags:
-  - Apprendre
-  - Attribut
-  - CSS
-  - Débutant
-  - Sélecteurs
 translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
 original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 ---
 <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
 
-<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
+<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>
+<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>
 
-<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>
+<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>
 
 <table class="standard-table">
  <thead>
@@ -43,18 +37,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>]</code></td>
    <td><code>a[title]</code></td>
-   <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>
+   <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>=<em>value</em>]</code></td>
    <td><code>a[href="https://example.com"]</code></td>
-   <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>
+   <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
    <td><code>p[class~="special"]</code></td>
    <td>
-    <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>
+    <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>
 
     <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p>
    </td>
@@ -62,7 +56,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
    <td><code>div[lang|="zh"]</code></td>
-   <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>
+   <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>
   </tr>
  </tbody>
 </table>
@@ -70,16 +64,16 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 <p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p>
 
 <ul>
- <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les list items sauf le premier.</li>
- <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>
- <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>
+ <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li>
+ <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>
+ <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
 
-<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>
+<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>
 
-<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  <code>box-warning</code> et <code>box-error</code>,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>
+<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>
 
 <table class="standard-table">
  <thead>
@@ -93,18 +87,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
    <td><code>li[class^="box-"]</code></td>
-   <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>
+   <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
    <td><code>li[class$="-box"]</code></td>
-   <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>
+   <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>*=value<em> </em>]</code></td>
    <td><code>li[class*="box"]</code></td>
    <td>élément sélectionné quand la<br>
-    la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>
+    la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>
   </tr>
  </tbody>
 </table>
@@ -112,67 +106,51 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 <p>L'exemple suivant montre ces sélecteurs en action :</p>
 
 <ul>
- <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>
- <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>
- <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelquepart un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>
+ <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>
+ <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>
+ <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
 
 <h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2>
 
-<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>
+<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>
 
-<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>
+<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
-</div>
-
-<h2 id="À_faire_vous-mêmes">À faire vous-mêmes</h2>
-
-<p>Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :</p>
-
-<ul>
- <li>Cibler l'élément <code>&lt;a&gt;</code> ayant un attribut <code>title</code> et colorer sa bordure en rose (<code>border-color: pink</code>).</li>
- <li>Cibler l'élément <code>&lt;a&gt;</code> dont l'attribut <code>href</code> contient le mot <code>contact</code> quelque part dans sa valeur et colorer sa bordure en orange (<code>border-color: orange</code>).</li>
- <li>Cibler l'élément <code>&lt;a&gt;</code> dont la valeur <code>href</code> commence par <code>https</code> et colorer sa bordure en vert (<code>border-color: green</code>).</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> —  mais essayez d'abord de la trouver par vous-même !</p>
+<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
 </div>
 
 <h2 id="Pas_suivants">Pas suivants</h2>
 
-<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>
+<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
 
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+   <li>Sélecteurs d'attribut</li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html
index 5cfbb2cd4e..2ba25e54d4 100644
--- a/files/fr/learn/css/building_blocks/selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/index.html
@@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
 
-<p class="summary">Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
+<p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Quest_ce_quun_sélecteur">Qu'est ce qu'un sélecteur ?</h2>
+<h2 id="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2>
 
-<p>Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet </em>de ce sélecteur.</p>
+<p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p>
 
-<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p>
 
-<p>Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe  <code>.special</code>.</p>
+<p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p>
 
-<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, une spécification mature, la prise en charge par les navigateurs est donc complète.</p>
+<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</p>
 
-<h2 id="Listes_de_sélecteurs">Listes de sélecteurs</h2>
+<h2 id="selector_lists">Listes de sélecteurs</h2>
 
-<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>
+<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css">h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} </code></pre>
+}</pre>
 
-<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>
+<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>
 
-<pre class="brush: css notranslate"><code>h1, .special {
+<pre class="brush: css">h1, .special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p>
 
-<pre class="brush: css notranslate"><code>h1,
+<pre class="brush: css">h1,
 .special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p>
 
 <p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p>
 
-<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p>
+<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css">h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p>
 
-<pre class="brush: css notranslate"><code>h1, ..special {
+<pre class="brush: css">h1, ..special {
   color: blue;
-} </code></pre>
+}</pre>
 
-<h2 id="Types_de_sélecteurs">Types de sélecteurs</h2>
+<h2 id="types_of_selectors">Types de sélecteurs</h2>
 
 <p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p>
 
-<h3 id="Sélecteurs_de_type_de_classe_et_dID">Sélecteurs de type, de classe , et d'ID</h3>
+<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3>
 
-<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>
+<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>
 
-<pre class="brush: css notranslate">h1 { }</pre>
+<pre class="brush: css">h1 { }</pre>
 
 <p>On trouve aussi les sélecteurs ciblant une classe :</p>
 
-<pre class="brush: css notranslate">.box { }</pre>
+<pre class="brush: css">.box { }</pre>
 
-<p>ou une  ID :</p>
+<p>ou un ID :</p>
 
-<pre class="brush: css notranslate">#unique { }</pre>
+<pre class="brush: css">#unique { }</pre>
 
-<h3 id="Sélecteurs_dattribut">Sélecteurs d'attribut</h3>
+<h3 id="attribute_selectors">Sélecteurs d'attribut</h3>
 
 <p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p>
 
-<pre class="brush: css notranslate">a[title] { }</pre>
+<pre class="brush: css">a[title] { }</pre>
 
 <p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p>
 
-<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+<pre class="brush: css">a[href="https://example.com"] { }</pre>
 
-<h3 id="Pseudo-classes_et_pseudo-éléments">Pseudo-classes et pseudo-éléments</h3>
+<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3>
 
-<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p>
+<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p>
 
-<pre class="brush: css notranslate">a:hover { }</pre>
+<pre class="brush: css">a:hover { }</pre>
 
-<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <code>&lt;span&gt;</code>  et qu'après coup on appliquait un style sur cet élément.</p>
+<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code>&lt;span&gt;</code> et qu'après coup on appliquait un style sur cet élément.</p>
 
-<pre class="brush: css notranslate">p::first-line { }</pre>
+<pre class="brush: css">p::first-line { }</pre>
 
-<h3 id="Combinateurs">Combinateurs</h3>
+<h3 id="combinators">Combinateurs</h3>
 
-<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code>  grâce au combinateur enfant (<code>&gt;</code>) :</p>
+<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code> grâce au combinateur enfant (<code>&gt;</code>) :</p>
 
-<pre class="brush: css notranslate">article &gt; p { }</pre>
+<pre class="brush: css">article &gt; p { }</pre>
 
-<h2 id="À_faire_ensuite">À faire ensuite</h2>
+<h2 id="next_steps">À faire ensuite</h2>
 
-<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">sélecteurs de type, de classe, et d'ID</a>.</p>
+<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Table_de_référence_des_sélecteurs">Table de référence des sélecteurs</h2>
+<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2>
 
-<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.</p>
+<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p>
 
 <table class="standard-table">
  <thead>
@@ -142,83 +142,83 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
  </thead>
  <tbody>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a></td>
-   <td><code>h1 {  }</code></td>
-   <td><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">Sélecteurs de type</a></td>
+   <td><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a></td>
+   <td><code>h1 { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a></td>
-   <td><code>* {  }</code></td>
-   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
+   <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td>
+   <td><code>* { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a></td>
-   <td><code>.box {  }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td>
+   <td><code>.box { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d'ID</a></td>
+   <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td>
    <td><code>#unique { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></td>
-   <td><code>a[title] {  }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td>
+   <td><code>a[title] { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
    <td><code>p:first-child { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
   </tr>
   <tr>
-   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
    <td><code>p::first-line { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur descendant</a></td>
+   <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td>
    <td><code>article p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur enfant</a></td>
+   <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td>
    <td><code>article &gt; p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Combinateur_de_voisin_direct">Sélecteur de frére adjacent</a></td>
+   <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td>
    <td><code>h1 + p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de frère général</a></td>
+   <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td>
    <td><code>h1 ~ p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td>
   </tr>
- </tbody>
+ </tbody> 
 </table>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
index 2fdf39d902..47e0ee79a1 100644
--- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
 
-<div></div>
-
-<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.</div>
-
-<div></div>
+<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div>
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis:</th>
-   <td>
-    <p>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="La_taille_naturelle_ou_intrinsèque_des_choses">La taille naturelle ou intrinsèque des choses</h2>
+<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2>
 
-<p>Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle même.</p>
+<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p>
 
-<p>Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
+<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
 
-<p>Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.</p>
+<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
 
-<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.</p>
+<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p>
 
-<h2 id="Spécifier_une_taille">Spécifier une taille</h2>
+<h2 id="setting_a_specific_size">Spécifier une taille</h2>
 
-<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.</p>
+<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
 
 <p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p>
 
-<h3 id="Avec_les_pourcentages">Avec les pourcentages</h3>
+<h3 id="using_percentages">Avec les pourcentages</h3>
 
-<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.</p>
+<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
 
-<p>En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
+<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
 
-<h3 id="Marges_et_remplissage_en_pourcentages">Marges et remplissage en pourcentages</h3>
+<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3>
 
-<p>Si vous définissez les <code>margins</code> (marges exterieurs) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.</p>
+<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
 
-<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p>
 
-<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p>
 
-<h2 id="tailles_min-_et_max-">tailles min- et max- </h2>
+<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2>
 
-<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p>
 
-<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
 
-<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p>
 
-<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p>
 
-<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p>
 
-<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p>
 
-<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
 
-<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+<p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+<div class="notecard note">
+  <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p>
 </div>
 
-<h2 id="Unités_de_la_fenêtre_daffichage">Unités de la fenêtre d'affichage</h2>
+<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2>
 
-<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
+<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
 
-<p><code>1vh</code> correspond à 1% dela hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de {{cssxref("font-size")}} 10vh.</p>
+<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
 
-<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code>&lt;iframe&gt;</code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p>
+
+<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+
+<h2 id="test_your_skills">Testez vos compétences !</h2>
 
-<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+<p>Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p>
 
-<h2 id="Résumé">Résumé</h2>
+<h2 id="summary">Résumé</h2>
 
-<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Dans_ce_cours">Dans ce cours</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html
index 82b3ffdeff..a673fb36d6 100644
--- a/files/fr/learn/css/building_blocks/the_box_model/index.html
+++ b/files/fr/learn/css/building_blocks/the_box_model/index.html
@@ -1,52 +1,37 @@
 ---
-title: Le modèle de Boîte
+title: Le modèle de boîte
 slug: Learn/CSS/Building_blocks/The_box_model
-tags:
-  - Boîte
-  - CSS
-  - Disposition
-  - Débutant
-  - Mise en page
-  - Model
-  - Modèle
-  - Position
-  - Positionnement
-  - border
-  - box
-  - display
-  - margin
-  - padding
 translation_of: Learn/CSS/Building_blocks/The_box_model
 original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
 
-<p>En CSS, tout élement est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p>
+<p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Les_Boîtes_en_ligne_et_en_bloc">Les Boîtes "en ligne" et "en bloc"</h2>
+<h2 id="block_and_inline_boxes">Les boîtes en ligne et boîte de bloc</h2>
 
-<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em>). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :</p>
+<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em> en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :</p>
 
 <p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p>
 
 <ul>
  <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li>
  <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li>
- <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) sont toujours respectées.</li>
- <li>Les propriétés {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}} — correspondantes respectivement aux écarts de remplissage interne, externe et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li>
+ <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) sont toujours respectées.</li>
+ <li>Les propriétés <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a> — correspondantes respectivement aux écarts de <i lang="en">padding</i>, à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li>
 </ul>
 
 <p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code>&lt;h1&gt;</code>,<code>&lt;h2&gt;</code>, etc.) et les paragraphes (<code>&lt;p&gt;</code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p>
@@ -55,40 +40,40 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <ul>
  <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li>
- <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) ne s'appliquent pas.</li>
- <li>Le padding, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li>
- <li>Le padding, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li>
+ <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) ne s'appliquent pas.</li>
+ <li>Le <i lang="en">padding</i>, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li>
+ <li>Le <i lang="en">padding</i>, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li>
 </ul>
 
 <p>Les éléments <code>&lt;a&gt;</code>, utilisés pour les liens, ou encore <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p>
 
-<p>Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieur de positionnement (ou "<em>display</em>" en anglais).</p>
+<p>Le type de boîte appliqué à un élément est défini par la valeur de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieure de positionnement (ou "<em>display</em>" en anglais).</p>
 
-<h2 id="Aparté_Les_positionnements_intérieurs_et_extérieurs">Aparté : Les positionnements intérieurs et extérieurs</h2>
+<h2 id="aside_inner_and_outer_display_types">Aparté : les positionnements intérieurs et extérieurs</h2>
 
 <p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p>
 
-<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p>
+<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p>
 
-<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type depositionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p>
+<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p>
+<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p>
 </div>
 
-<p>Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+<p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
 
-<p>Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p>
+<p>Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p>
 
-<h2 id="Exemples_de_quelques_types_de_positionnement">Exemples de quelques types de positionnement</h2>
+<h2 id="examples_of_different_display_types">Exemples de quelques types de positionnement</h2>
 
-<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p>
+<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p>
 
-<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p>
+<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p>
 
 <p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code>&lt;span&gt;</code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code>&lt;span&gt;</code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}</p>
 
 <p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code>&lt;span&gt;</code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</p>
 
@@ -98,38 +83,38 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p>
 
-<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.</p>
+<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.</p>
 
 <p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p>
 
-<h2 id="Quest-ce_que_le_Modèle_de_Boîte_en_CSS">Qu'est-ce que le Modèle de Boîte en CSS ?</h2>
+<h2 id="what_is_the_css_box_model">Qu'est-ce que le modèle de boîte CSS ?</h2>
 
-<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le <em>margin</em> (remplissage extérieur), le <em>border</em> (cadre), le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p>
+<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la <em>marge</em>, la <em>bordure</em>, le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p>
 
-<h3 id="Les_composants_dune_boîte">Les composants d'une boîte</h3>
+<h3 id="parts_of_a_box">Les composants d'une boîte</h3>
 
 <p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p>
 
 <ul>
- <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS {{cssxref("width")}} et {{cssxref("height")}}.</li>
- <li><strong>La boîte de padding</strong> <strong>(marge intérieure) </strong>: Le padding est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("padding")}} et ses autres propriétés connexes.</li>
- <li><strong>La boîte du cadre </strong>: Le cadre englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés par la propriété {{cssxref("border")}} et ses propriétés sous-jacentes.</li>
- <li><strong>La boîte de margin (marge extérieure)</strong> : Le margin est la couche la plus à l'extérieur, englobant le contenu, le padding and le border. Comme le padding, il s'agit d'une zone vierge d'espacement mais qui est cette fois située a l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("margin")}} et ses autres propriétés connexes.</li>
+ <li><strong>La boîte de contenu&nbsp;</strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a>.</li>
+ <li><strong>La boîte de <i lang="en">padding</i></strong> <strong>(marge intérieure)&nbsp;</strong>: Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et ses autres propriétés connexes.</li>
+ <li><strong>La boîte de bordure&nbsp;</strong>: La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> et ses propriétés sous-jacentes.</li>
+ <li><strong>La boîte de marge&nbsp;</strong>: La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> et la bordure. Comme le <i lang="en">padding</i>, il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et ses autres propriétés connexes.</li>
 </ul>
 
 <p>Le schéma ci-dessous montre la structure de ces différentes couches:</p>
 
-<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+<p><img alt="Diagramme du modèle de boîte" src="box-model.png"></p>
 
-<h3 id="Le_Modèle_Standard_de_Boîte_CSS">Le Modèle Standard de Boîte CSS</h3>
+<h3 id="the_standard_css_box_model">Le modèle de boîte CSS standard</h3>
 
-<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p>
+<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p>
 
 <p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   width: 350px;
   height: 150px;
   margin: 10px;
@@ -140,166 +125,166 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p>
 
-<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.</p>
+<p><strong>Note </strong>: La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p>
 </div>
 
-<h3 id="Le_Modèle_Alternatif_de_Boîte_CSS">Le Modèle Alternatif de Boîte CSS</h3>
+<h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3>
 
-<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.</p>
+<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.</p>
 
-<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif." src="alternate-box-model.png"></p>
 
-<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut  définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte du cadre</strong> (la "<em>border box</em>") comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p>
+<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte de la bordure</strong> comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   box-sizing: border-box;
-} </code></pre>
+} </pre>
 
-<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code>&lt;html&gt;</code> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p>
+<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code>&lt;html&gt;</code> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p>
 
-<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: css">html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}</pre>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p>
+<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p>
 </div>
 
-<h2 id="Manipuler_les_modèles_de_boîtes">Manipuler les modèles de boîtes</h2>
+<h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2>
 
 <p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p>
 
 <p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p>
 
 <div class="blockIndicator note">
 <p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p>
 </div>
 
-<h3 id="Utiliser_les_DevTools_pour_voir_le_modèle_de_boîte">Utiliser les DevTools pour voir le modèle de boîte</h3>
+<h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3>
 
-<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit &gt; Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p>
+<p>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit &gt; Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p>
 
-<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+<p><img alt="Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox" src="box-model-devtools.png"></p>
 
-<h2 id="Margins_paddings_et_borders">Margins, paddings, et borders</h2>
+<h2 id="margins_padding_and_borders">Marges, remplissages (paddings), et bordures</h2>
 
-<p>Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.</p>
+<p>Nous avons déjà rencontré ensemble les propriétés <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.</p>
 
 <p>Regardons de plus près ces nouvelles propriétés.</p>
 
-<h3 id="Les_Margins_Marges_extérieures">Les Margins (Marges extérieures)</h3>
+<h3 id="Margin">Les marges</h3>
 
-<p>Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.</p>
+<p>La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.</p>
 
-<p>On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :</p>
+<p>On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :</p>
 
 <ul>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a></li>
 </ul>
 
-<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de <code>margin</code> pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}</p>
 
-<h4 id="La_fusion_des_marges">La fusion des marges</h4>
+<h4 id="margin_collapsing">La fusion des marges</h4>
 
-<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.</p>
+<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.</p>
 
-<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.</p>
+<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.</p>
 
-<p><strong>Vous pouvez tester cette propriété par vous même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du <code>margin-bottom</code> du premier paragraphe.</strong></p>
+<p><strong>Vous pouvez tester cette propriété par vous-même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété <code>margin-bottom</code> du premier paragraphe.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}</p>
 
-<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p>
+<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p>
 
-<h3 id="Les_Borders_Cadres">Les Borders (Cadres)</h3>
+<h3 id="borders">Les bordures</h3>
 
-<p>le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du <code>width</code> et <code>height</code> disponible.</p>
+<p>La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.</p>
 
-<p>Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.</p>
+<p>Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.</p>
 
-<p>Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété <code>border</code>.</p>
+<p>Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété <code>border</code>.</p>
 
 <p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p>
 
 <ul>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-top"><code>border-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right"><code>border-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left"><code>border-left</code></a></li>
 </ul>
 
 <p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p>
 
 <ul>
- <li>{{cssxref("border-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-color")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-width"><code>border-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-style"><code>border-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></li>
 </ul>
 
 <p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p>
 
 <ul>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li>
 </ul>
 
-<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}</p>
 
-<h3 id="Les_Paddings_Marges_intérieures">Les Paddings (Marges intérieures)</h3>
+<h3 id="padding">Le padding (remplissage)</h3>
 
-<p>Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).</p>
+<p>Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.</p>
 
-<p>On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p>
+<p>On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p>
 
 <ul>
- <li>{{cssxref("padding-top")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/padding-top"><code>padding-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-right"><code>padding-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a></li>
 </ul>
 
-<p><strong>Si vous modifiez les valeurs du padding sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p>
+<p><strong>Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p>
 
-<p><strong>Tentez aussi de modifier la valeur du padding dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.</strong></p>
+<p><strong>Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}</p>
 
-<h2 id="Le_modèle_de_boîte_et_la_disposition_en_ligne">Le modèle de boîte et la disposition en ligne</h2>
+<h2 id="the_box_model_and_inline_boxes">Le modèle de boîte et la disposition en ligne</h2>
 
 <p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code>&lt;span&gt;</code> par exemple ?</p>
 
 <p>Dans l'exemple ci-après, nous avons un élément <code>&lt;span&gt;</code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}</p>
 
-<h2 id="le_positionnement_display_inline-block">le positionnement display: inline-block</h2>
+<h2 id="using_display_inline-block">le positionnement display: inline-block</h2>
 
-<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p>
+<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p>
 
 <p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p>
 
@@ -312,44 +297,44 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code>&lt;span&gt;</code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}</p>
 
-<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code>&lt;a&gt;</code> est par défaut "en ligne", comme un <code>&lt;span&gt;</code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p>
+<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code>&lt;a&gt;</code> est par défaut "en ligne", comme un <code>&lt;span&gt;</code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p>
 
-<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <code>&lt;a&gt;</code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <code>&lt;ul&gt;</code>. Ceci est dû au fait que <code>&lt;a&gt;</code> est un élément en ligne.</p>
+<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens <code>&lt;a&gt;</code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément <code>&lt;ul&gt;</code>. Ceci est dû au fait que <code>&lt;a&gt;</code> est un élément en ligne.</p>
 
-<p><strong>Ajoutez la propriété <code>display: inline-block;</code>  en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du padding régler ce problème.</strong></p>
+<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du <i lang="en">padding</i> régler ce problème.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p>
 
-<h2 id="Conclusion">Conclusion</h2>
+<h2 id="summary">Résumé</h2>
 
 <p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p>
 
-<p>Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.</p>
+<p>Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+   <ul>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
+   </ul>
+  </li>
+  <li>Le modèle de boîte</li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
+ </ol>
diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html
index 4a23cb740a..9d28e265de 100644
--- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html
+++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html
@@ -45,7 +45,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
 }
 </pre>
 
-<p>Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.</p>
+<p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p>
 
 <div id="Multicol_1">
 <div class="hidden">
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
index c8dd73edb2..a5dca8a25a 100644
--- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
@@ -1,50 +1,38 @@
 ---
 title: Comment CSS est structuré
 slug: Learn/CSS/First_steps/How_CSS_is_structured
-tags:
-  - Apprendre
-  - CSS
-  - Commentaires
-  - Débutant
-  - HTML
-  - Propriétés
-  - Structure
-  - Sélecteurs
-  - espace
-  - raccourci
-  - valeurse
 translation_of: Learn/CSS/First_steps/How_CSS_is_structured
 ---
 <div>{{LearnSidebar}}</div>
 
 <div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
 
-<p class="summary">Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p>
+<p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Approfondir les structures syntaxiques fondamentales de CSS</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Appliquer_CSS_à_votre_document_HTML">Appliquer CSS à votre document HTML</h2>
+<h2 id="applying_css_to_html">Appliquer CSS à votre document HTML</h2>
 
-<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p>
+<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p>
 
-<h3 id="Feuille_de_style_externe">Feuille de style externe</h3>
+<h3 id="external_stylesheet">Feuille de style externe</h3>
 
-<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p>
+<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p>
 
-<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élement HTML <code>&lt;link&gt;</code> fait référence à ce fichier.</p>
+<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élément HTML <code>&lt;link&gt;</code> fait référence à ce fichier.</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -55,11 +43,11 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured
     &lt;h1&gt;Hello World!&lt;/h1&gt;
     &lt;p&gt;ceci est mon premier exemple CSS&lt;/p&gt;
   &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</pre>e
 
-<p>Le fichier CSS devrait ressembler à cela :</p>
+<p>Le fichier CSS devrait ressembler à cela :</p>
 
-<pre class="brush: css notranslate">h1 {
+<pre class="brush: css">h1 {
   color: blue;
   background-color: yellow;
   border: 1px solid black;
@@ -69,30 +57,30 @@ p {
   color: red;
 }</pre>
 
-<p>L'attribut <code>href</code> de l'élement {{htmlelement("link")}} doit pointer vers un fichier dans votre système de fichiers.</p>
+<p>L'attribut <code>href</code> de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> doit pointer vers un fichier dans votre système de fichiers.</p>
 
-<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p>
+<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p>
 
-<pre class="brush: html notranslate">&lt;!-- Dans un sous répertoire nommé styles dans le répertoire courant --&gt;
+<pre class="brush: html">&lt;!-- Dans un sous-répertoire nommé styles dans le répertoire courant --&gt;
 &lt;link rel="stylesheet" href="styles/style.css"&gt;
 
-&lt;!-- Dans un sous répertoire nommé general, lui-même dans un sous répertoire nommé styles, dans le répertoire courant --&gt;
+&lt;!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --&gt;
 &lt;link rel="stylesheet" href="styles/general/style.css"&gt;
 
-&lt;!-- Dans un sous répertoire nommé styles, un niveau plus haut --&gt;
+&lt;!-- Dans un sous-répertoire nommé styles, un niveau plus haut --&gt;
 &lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
 
-<h3 id="Feuille_de_style_interne">Feuille de style interne</h3>
+<h3 id="internal_stylesheet">Feuille de style interne</h3>
 
-<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML {{htmlelement("head")}} dans un élément {{htmlelement("style")}}. On parle alors de feuille de style interne.</p>
+<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>. On parle alors de feuille de style interne.</p>
 
-<p>Le code HTML ci-dessous illustre cette technique :</p>
+<p>Le code HTML ci-dessous illustre cette technique :</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mes experimentations CSS&lt;/title&gt;
+    &lt;title&gt;Mes expérimentations CSS&lt;/title&gt;
     &lt;style&gt;
       h1 {
         color: blue;
@@ -111,17 +99,17 @@ p {
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p>
+<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p>
 
-<h3 id="Styles_en_ligne">Styles en ligne</h3>
+<h3 id="inline_styles">Styles en ligne</h3>
 
-<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élement, elles sont déclarées grâce à l'attribut <code>style</code>:</p>
+<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut <code>style</code>:</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mes experimentations CSS&lt;/title&gt;
+    &lt;title&gt;Mes expérimentations CSS&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Hello World!&lt;/h1&gt;
@@ -129,17 +117,17 @@ p {
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS  avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p>
+<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p>
 
-<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du  HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d’être compatibles avec autant de clients de messagerie que possible.</p>
+<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.</p>
 
-<h2 id="Jouer_avec_le_CSS_de_cet_article">Jouer avec le CSS de cet article</h2>
+<h2 id="playing_with_the_css_in_this_article">Jouer avec le CSS de cet article</h2>
 
-<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p>
+<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p>
 
 <p><strong>index.html</strong> :</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -155,27 +143,27 @@ p {
 
 <p><strong>styles.css</strong> :</p>
 
-<pre class="brush: css notranslate">/* Créez votre test CSS ici */
+<pre class="brush: css">/* Créez votre test CSS ici */
 
 p {
   color: red;
 }</pre>
 
-<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code>&lt;body&gt;</code> ... <code>&lt;/body&gt;</code> dans le fichier  <code>index.html</code> ;  ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p>
+<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code>&lt;body&gt;</code>…<code>&lt;/body&gt;</code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p>
 
-<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p>
+<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} </p>
 
 <p>Bonne lecture !</p>
 
-<h2 id="Sélecteurs">Sélecteurs</h2>
+<h2 id="selectors">Sélecteurs</h2>
 
-<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr-FR/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>.  Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p>
+<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p>
 
 <p>Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.</p>
 
-<pre class="brush: css notranslate">h1
+<pre class="brush: css">h1
 a:link
 .manythings
 #onething
@@ -184,17 +172,17 @@ a:link
 .box p:first-child
 h1, h2, .intro</pre>
 
-<p><strong>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</strong></p>
+<p>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr-FR/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p>
+<div class="notecard note">
+<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p>
 </div>
 
-<h3 id="Spécificité">Spécificité</h3>
+<h3 id="specificity">Spécificité</h3>
 
-<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p>
+<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p>
 
-<pre class="brush: css notranslate">.special {
+<pre class="brush: css">.special {
   color: red;
 }
 
@@ -202,13 +190,13 @@ p {
   color: blue;
 }</pre>
 
-<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p>
+<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p>
 
-<pre class="brush: html notranslate">&lt;p class="special"&gt;De quelle couleur suis-je?&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p class="special"&gt;De quelle couleur suis-je?&lt;/p&gt;</pre>
 
-<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p>
+<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p>
 
-<pre class="brush: css notranslate">p {
+<pre class="brush: css">p {
   color: red;
 }
 
@@ -216,61 +204,61 @@ p {
   color: blue;
 }</pre>
 
-<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p>
+<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p>
 
-<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {...}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p>
+<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {…}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p>
 
-<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p>
+<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p>
 
-<h2 id="Propriétés_et_valeurs">Propriétés et valeurs</h2>
+<h2 id="properties_and_values">Propriétés et valeurs</h2>
 
 <p>Au niveau le plus fondamental, CSS se compose de deux blocs de construction :</p>
 
 <ul>
- <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li>
- <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l’arrière-plan).</li>
+ <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li>
+ <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan).</li>
 </ul>
 
 <p>L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est <code>color</code> et la valeur <code>blue</code>.</p>
 
-<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style=""></p>
+<p><img alt="Une déclaration surlignée au sein du code CSS" src="declaration.png"></p>
 
 <p>Une propriété associée à une valeur s'appelle une <em>déclaration CSS</em>. Les déclarations CSS sont placées dans des <em>blocs de déclaration CSS</em>. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.</p>
 
-<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style=""></p>
+<p><img alt="Un bloc de déclaration surligné" src="declaration-block.png"></p>
 
 <p>Enfin, les blocs de déclaration CSS sont associés à des <em>sélecteurs</em> pour produire des <em>ensembles de règles CSS</em> (ou <em>règles CSS</em>). L'image contient deux règles, une pour le sélecteur <code>h1</code> et une pour le sélecteur <code>p</code>. La règle pour <code>h1</code> est mise en surbrillance.</p>
 
-<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style=""></p>
+<p><img alt="La règle ciblant h1 est surlignée" src="rules.png"></p>
 
 <p>Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (<code>:</code>).</p>
 
-<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
+<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
 
 <ul>
- <li><strong>{{cssxref("font-size")}}</strong></li>
- <li><strong>{{cssxref("width")}}</strong></li>
- <li><strong>{{cssxref("background-color")}}</strong></li>
- <li><strong>{{cssxref("color")}}</strong></li>
- <li><strong>{{cssxref("border")}}</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/width"><code>width</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/border"><code>border</code></a></strong></li>
 </ul>
 
 <div class="warning">
-<p><strong>Important </strong>: Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p>
+<p><strong>Important :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p>
 </div>
 
 <div class="warning">
-<p><strong>Important </strong>: En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p>
+<p><strong>Important :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p>
 </div>
 
-<h3 id="Fonctions">Fonctions</h3>
+<h3 id="functions">Fonctions</h3>
 
-<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction  pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p>
+<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p>
 
 <div id="calc_example">
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;la boite interne vaut 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="outer"&gt;&lt;div class="box"&gt;la boite interne vaut 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
 
-<pre class="brush: css notranslate">.outer {
+<pre class="brush: css">.outer {
   border: 5px solid black;
 }
 
@@ -286,14 +274,14 @@ p {
 
 <p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
 
-<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p>
+<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p>
 
-<p>Un autre exemple serait les différentes valeurs de la propriété {{cssxref ("&lt;transform&gt;")}}, telles que <code>rotate()</code>.</p>
+<p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/&lt;transform&gt;"><code>&lt;transform&gt;</code></a>, telles que <code>rotate()</code>.</p>
 
 <div id="transform_example">
-<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="box"&gt;&lt;/div&gt;</pre>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   margin: 30px;
   width: 100px;
   height: 100px;
@@ -309,22 +297,22 @@ p {
 <p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
 
 <ul>
- <li><strong>{{cssxref("transform")}}</strong></li>
- <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li>
- <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>, en particulier les valeurs de dégradé</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a>, en particulier les valeurs rgb/rgba/hsl/hsla</strong></li>
 </ul>
 
 <h2 id="rules">@rules</h2>
+e
+<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/fr/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p>
 
-<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code>  simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera  <code>@import</code> :</p>
-
-<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+<pre class="brush: css">@import 'styles2.css';</pre>
 
-<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Requêtes_média">media queries</a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p>
+<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Media_Queries"><i lang="en">media queries</i></a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p>
 
-<p>Dans le CSS ci-dessous, une règle donne à l'élément <code>&lt;body&gt;</code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p>
+<p>Dans le CSS ci-dessous, une règle donne à l'élément <code>&lt;body&gt;</code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   background-color: pink
 }
 
@@ -334,56 +322,56 @@ p {
   }
 }</pre>
 
-<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p>
+<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p>
 
-<p><strong>Ajoutez une media query à votre CSS  pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p>
+<p><strong>Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p>
 
-<h2 id="Raccourcis">Raccourcis</h2>
+<h2 id="shorthands">Raccourcis</h2>
 
-<p>Certaines propriétés comme {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ou {{cssxref("margin")}} sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p>
+<p>Certaines propriétés comme <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/background"><code>background</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ou <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p>
 
-<p>Par exemple, la ligne suivante  :</p>
+<p>Par exemple, la ligne suivante :</p>
 
-<pre class="brush: css notranslate">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
-   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
-   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
-   pour top/bottom, puis left/right */
+<pre class="brush: css">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
+   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
+   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
+   pour top/bottom, puis left/right */
 padding: 10px 15px 15px 5px;</pre>
 
 <p>produit le même effet que les quatre lignes suivantes réunies :</p>
 
-<pre class="brush: css notranslate">padding-top: 10px;
+<pre class="brush: css">padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 5px;</pre>
 
 <p>Alors que :</p>
 
-<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
 
-<p>produit la même chose que tout ce qui suit :</p>
+<p>produit la même chose que tout ce qui suit :</p>
 
-<pre class="brush: css notranslate">background-color: red;
+<pre class="brush: css">background-color: red;
 background-image: url(bg-graphic.png);
 background-position: 10px 10px;
 background-repeat: repeat-x;
 background-scroll: fixed;</pre>
 
-<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p>
+<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p>
 
 <p><strong>Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.</strong></p>
 
-<div class="blockIndicator warning">
-<p><strong>Attention </strong>: Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le rccourci ne changeait que les valeurs passées en argument.</p>
+<div class="notecard warning">
+<p><strong>Attention :</strong> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.</p>
 </div>
 
-<h2 id="Commentaires">Commentaires</h2>
+<h2 id="comments">Commentaires</h2>
 
-<p>En CSS comme en HTML il est recomandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p>
+<p>En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p>
 
-<p>En CSS le début des commentaires est signalé par  <code>/*</code>  et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaire pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante— on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p>
+<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p>
 
-<pre class="brush: css notranslate">/* mise en forme des éléments de base */
+<pre class="brush: css">/* mise en forme des éléments de base */
 /* -------------------------------------------------------------------------------------------- */
 body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -394,8 +382,8 @@ body {
 
 @media (min-width: 70em) {
   /* On donne un traitement conditionnel de la taille de police globale.
-     sur de grands écrans, on augmente la valeur de font-size pour une
-     meilleure lisibilité */
+     sur de grands écrans, on augmente la valeur de font-size pour une
+     meilleure lisibilité */
   body {
     font-size: 130%;
   }
@@ -403,7 +391,7 @@ body {
 
 h1 {font-size: 1.5em;}
 
-/* mise en forme des éléments imbriqués dans le DOM  */
+/* mise en forme des éléments imbriqués dans le DOM */
 /* -------------------------------------------------------------------------------------------- */
 div p, #id:first-line {
   background-color: red;
@@ -419,9 +407,9 @@ div p + p {
   padding-top: 0;
 }</pre>
 
-<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur  <code>.special</code> a été désactivée par des commentaires :</p>
+<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p>
 
-<pre class="brush: css notranslate">/*.special {
+<pre class="brush: css">/*.special {
   color: red;
 }*/
 
@@ -431,13 +419,13 @@ p {
 
 <p><strong>Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.</strong></p>
 
-<h2 id="Espace">Espace</h2>
+<h2 id="white_space">Espace</h2>
 
-<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont làa plupart du temps là pour le rendre plus lisible.</p>
+<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.</p>
 
-<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p>
+<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   font: 1em/150% Helvetica, Arial, sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -470,9 +458,9 @@ div p + p {
 }
 </pre>
 
-<p id="Very_compact">On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p>
+<p>On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p>
 
-<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
 
 h1 {font-size: 1.5em;}
@@ -484,34 +472,34 @@ div p + p {padding-top: 0;}
 
 <p>La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.</p>
 
-<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p>
+<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p>
 
-<pre class="brush: css notranslate">margin: 0 auto;
+<pre class="brush: css">margin: 0 auto;
 padding-left: 10px;</pre>
 
-<p>Mais les suivantes sont invalides :</p>
+<p>Mais les suivantes sont invalides :</p>
 
-<pre class="brush: css notranslate">margin: 0auto;
+<pre class="brush: css">margin: 0auto;
 padding- left: 10px;</pre>
 
-<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code>  (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p>
+<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p>
 
-<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p>
+<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p>
 
-<p><strong>A votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p>
+<p><strong>À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p>
 
-<h2 id="À_suivre...">À suivre... </h2>
+<h2 id="À_suivre…">À suivre…</h2>
 
-<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p>
+<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
 
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est ce que CSS?</a></li>
- <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li>
+ <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">Qu'est ce que CSS?</a></li>
+ <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li>
+ <li>Comment CSS est structuré</li>
  <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li>
  <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos connaissances</a></li>
 </ol>
diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html
index 60fea45f7e..87618a86ca 100644
--- a/files/fr/learn/front-end_web_developer/index.html
+++ b/files/fr/learn/front-end_web_developer/index.html
@@ -35,7 +35,7 @@ original_slug: Apprendre/Front-end_web_developer
 
 <p>Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.</p>
 
-<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> avous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p>
+<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p>
 
 <p>Allons-y. Bonne chance !</p>
 
diff --git a/files/fr/learn/performance/html/index.html b/files/fr/learn/performance/html/index.html
new file mode 100644
index 0000000000..268d602662
--- /dev/null
+++ b/files/fr/learn/performance/html/index.html
@@ -0,0 +1,82 @@
+---
+title: Fonctionnalités de performances liées à HTML
+slug: Learn/Performance/HTML
+translation_of: Learn/Performance/HTML
+---
+<p>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}</p>
+
+<p>HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.</p>
+
+<table class="learn-box standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis&nbsp;:</th>
+      <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Objectifs&nbsp;:</th>
+      <td>En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="elements_attributes_impacting_performance">Éléments &amp; attributs ayant un impact sur les performances</h2>
+
+<ul>
+  <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code>&lt;picture&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code>&lt;video&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code>&lt;source&gt;</code></a></li>
+  <li>
+    <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code>&lt;img&gt; srcset</code></a>
+    <ul>
+      <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+    </ul>
+  </li>
+  <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li>
+  <li>Attributs <code>async</code> / <code>defer</code></li>
+  <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code>&lt;iframe&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code>&lt;object&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code>&lt;script&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li>
+</ul>
+
+<h2 id="conclusion">Conclusion</h2>
+
+<p>{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}</p>
+
+<h2 id="in_this_module">Dans ce module</h2>
+
+<ul>
+  <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li>
+  <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li>
+  <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li>
+  <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li>
+  <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li>
+  <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li>
+</ul>
+
+<h2 id="see_also">Voir aussi</h2>
+
+<ul>
+  <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code>&lt;picture&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code>&lt;video&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code>&lt;source&gt;</code></a></li>
+  <li>
+    <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code>&lt;img&gt; srcset</code></a>
+    <ul>
+      <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+    </ul>
+  </li>
+  <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li>
+  <li>Attributs <code>async</code> / <code>defer</code></li>
+  <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code>&lt;iframe&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code>&lt;object&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code>&lt;script&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li>
+</ul>
diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html
new file mode 100644
index 0000000000..8ac486bdab
--- /dev/null
+++ b/files/fr/learn/performance/measuring_performance/index.html
@@ -0,0 +1,101 @@
+---
+title: Mesure des performances
+slug: Learn/Performance/Measuring_performance
+translation_of: 'Learn/Performance/Measuring_performance'
+---
+<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div>
+
+<p>La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.</p>
+
+<p>Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.</p>
+
+<p>Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.</p>
+
+<table class="learn-box standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Pré-requis&nbsp;:</th>
+      <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif&nbsp;:</th>
+      <td>
+        <p>Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="performance_APIs">Les API de mesure des performances</h2>
+
+<p>Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre <a href="/fr/docs/Web/API">d'API Web</a> destinées à créer vos propres outils de mesure de performances.</p>
+
+<p>Vous pouvez utiliser <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de navigation</a> pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.</p>
+
+<p><img alt="Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais)&nbsp;: Prompt for unload&nbsp;; redirect&nbsp;; unload&nbsp;; App cache&nbsp;; DNS&nbsp;; TCP&nbsp;; Request&nbsp;; Response&nbsp;; Processing&nbsp;; onLoad&nbsp;; navigationStart&nbsp;; redirectStart&nbsp;; redirectEnd&nbsp;; fetchStart&nbsp;; domainLookupEnd&nbsp;; domainLookupStart&nbsp;; connectStart (secureConnectionStart)&nbsp;; connectEnd&nbsp;; requestStart&nbsp;; responseStart&nbsp;; responseEnd&nbsp;; unloadStart&nbsp;; unloadEnd&nbsp;; domLoading&nbsp;; domInteractive&nbsp;; domContentLoaded&nbsp;; domComplete&nbsp;; loadEventStart&nbsp;; loadEventEnd." src="navigationtimingapi.jpg"></p>
+
+<p><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">L'API de performances</a> propose un accès aux informations liées aux performances, ce qui comprend <a href="/fr/docs/Web/API/Performance_Timeline">l'API de chronologie des performances</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de la navigation</a>, <a href="/fr/docs/Web/API/User_Timing_API">l'API d'horodatage du visiteur</a> ainsi que <a href="/fr/docs/Web/API/Resource_Timing_API">l'API d'horodatage des ressources</a>. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.</p>
+
+<p>L'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> fait partie de la <em>chronologie des performances</em>. Une entrée <em>performance</em> peut directement être créée en utilisant <em>{{domxref("PerformanceMark","PerformanceMark")}}</em> ou une <em>{{domxref("PerformanceMeasure","PerformanceMeasure")}}</em> (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.</p>
+
+<p><a href="/fr/docs/Web/API/PerformanceObserver">L'API PerformanceObserver</a> peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> lorsqu'elles enregistrent la chronologie des performances dans le navigateur.</p>
+
+<p>Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant <a href="/fr/docs/Web/Performance/Navigation_and_resource_timings">l'horodatage de navigation</a> pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.</p>
+
+<h2 id="tools_and_metrics">Outils de mesure</h2>
+
+<p>Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories&nbsp;:</p>
+
+<ul>
+  <li>Les outils qui indiquent ou mesurent les performances, tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> ou le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> et le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.</li>
+  <li>Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.</li>
+</ul>
+
+<p>Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.</p>
+
+<h3 id="general_performance_reporting_tools">Outils de rapport de performances génériques</h3>
+
+<p>Les outils tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.</p>
+
+<p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN&nbsp;:</p>
+
+<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px;"></p>
+
+<p>Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.</p>
+
+<p><a href="https://webpagetest.org">webpagetest.org</a> est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.</p>
+
+<p>Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.</p>
+
+<h3 id="network_tools">Outils réseau</h3>
+
+<p>La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.</p>
+
+<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px;"></p>
+
+<p>Vous pouvez aussi utiliser le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.</p>
+
+<p><img alt="" src="perf-monitor.png" style="border-style: solid; border-width: 1px;"></p>
+
+<h2 id="conclusion">Conclusion</h2>
+
+<p>Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.</p>
+
+<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p>
+
+<h2 id="in_this_module">Dans ce module</h2>
+
+<ul>
+  <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le «&nbsp;pourquoi&nbsp;» des performances web</a></li>
+  <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web&nbsp;?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances&nbsp;?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia&nbsp;: images</a></li>
+  <li><a href="/fr/docs/Learn/Performance/video">Multimédia&nbsp;: vidéos</a></li>
+  <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li>
+  <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li>
+  <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li>
+</ul>
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
index 19933cfd0d..9905d1e7ae 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
@@ -481,7 +481,7 @@ printMe(myObj);</pre>
 
 <ul>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li>
- <li><a href="https://wiki.developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li>