Fixes #3288 (#3330)

* Fixes #3288, removes tags and most flaws

* Various typofixes

* Fix embedlivesample

4 files changed, 79 insertions, 117 deletions

diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md
index bf49bc6db6..49b70df024 100644
--- a/files/fr/learn/css/css_layout/flexbox/index.md
+++ b/files/fr/learn/css/css_layout/flexbox/index.md
@@ -1,18 +1,6 @@
 ---
 title: Flexbox
 slug: Learn/CSS/CSS_layout/Flexbox
-tags:
-  - Apprentissage
-  - Article
-  - Boîtes modulables
-  - CSS
-  - Codage
-  - Disposition
-  - Débutant
-  - Guide
-  - Mise en page avec les CSS
-  - Mises en page
-  - flexbox
 translation_of: Learn/CSS/CSS_layout/Flexbox
 original_slug: Apprendre/CSS/CSS_layout/Flexbox
 ---
@@ -47,7 +35,7 @@ Flexbox est une méthode de mise en page selon un axe principal, permettant de d
 
 Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les [flotteurs (boîtes flottantes)](/fr/docs/Learn/CSS/CSS_layout/Floats) et le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.
 
-Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :
+Les simples exigences de mise en page suivantes sont difficiles sinon impossibles à réaliser de manière pratique et souple avec ces outils :
 
 - centrer verticalement un bloc de contenu dans son parent ;
 - faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;
@@ -57,11 +45,11 @@ Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérab
 
 ## Voici un exemple simple
 
-Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi.
+Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt GitHub —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi.
 
 Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.
 
-![Échantillon d'utilisation de flexbox](Exemple_flexbox_1.png)
+![Échantillon d'utilisation de flexbox](bih741v.png)
 
 ## Détermination des éléments à disposer en boîtes flexibles
 
@@ -75,21 +63,21 @@ section {
 
 Voici le résultat :
 
-![Échantillon d'utilisation de flexbox](Exemple_flexbox_1.png)
+![Échantillon d'utilisation de flexbox](flexbox-example2.png)
 
 Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.
 
-> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.
+> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.
 
 ## Aparté sur le modèle flex
 
 Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :
 
-![Terminologie pour les boîtes modulables](termes_flex.png)
+![Terminologie pour les boîtes modulables](flex_terms.png)
 
 - L'**axe principal** **(main axis)** est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'**origine principale** **(main start)** et la **fin principale (main end)**.
-- L'**axe croisé** \*\* **est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début **(cross start)** et la fin (**cross end\*\*) de l'axe croisé.
-- L'élément parent dont la propriété est `display: flex`  ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**).
+- L'**axe croisé** est l'axe perpendiculaire à l'axe principal, c'est-à-dire à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début (**cross start**) et la fin (**cross end**) de l'axe croisé.
+- L'élément parent dont la propriété est `display: flex` ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**).
 - Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (flex items)** (les éléments {{htmlelement("article")}}} dans notre exemple).
 
 Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.
@@ -110,9 +98,9 @@ Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant
 
 ## Enveloppement
 
-Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :
+Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :
 
-![Débordement des éléments modulables](Exemple_flexbox_2.png)
+![Débordement des éléments modulables](flexbox-example3.png)
 
 Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour `section` :
 
@@ -122,7 +110,7 @@ flex-wrap: wrap;
 
 Essayons ; la disposition est bien meilleure avec cet ajout :
 
-![Conditionnement des éléments modulables](Exemple_flexbox_3.png)Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration `flex: 200px` pour les éléments `article` signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.
+![Conditionnement des éléments modulables](flexbox-example4.png)Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration `flex: 200px` pour les éléments `article` signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.
 
 Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en `row-reverse` — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.
 
@@ -143,7 +131,7 @@ flex-flow: row wrap;
 
 ## Taille modulable des éléments flex
 
-Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)).
+Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)).
 
 Ajoutez d'abord la règle ci-dessous en fin de la CSS :
 
@@ -153,7 +141,7 @@ article {
 }
 ```
 
-Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.
+Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, c'est-à-dire que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.
 
 Maintenant ajoutons cette règle en-dessous de la précédente :
 
@@ -181,7 +169,7 @@ En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace
 
 Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.
 
-![Modulation de la largeur](Exemple_flexbox_4.png)
+![Modulation de la largeur](flexbox-example1.png)
 
 Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.
 
@@ -197,9 +185,9 @@ Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue
 
 ## Alignement horizontal et vertical
 
-Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.
+Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.
 
-![Alignement](Exemple_flexbox_5.png)
+![Alignement](flexbox-example5.png)
 
 D'abord, faites une copie locale de cet exemple.
 
@@ -213,6 +201,8 @@ div {
 }
 ```
 
+![](flexbox_center_space-around.png)
+
 Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.
 
 {{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).
@@ -229,6 +219,8 @@ button:first-child {
 }
 ```
 
+![](flexbox_first-child_flex-end.png)
+
 Voyez l'effet obtenu, puis supprimez ensuite la règle.
 
 {{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.
@@ -257,7 +249,7 @@ Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé
 
 - par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;
 - les éléments flex avec des valeurs `order` plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;
-- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.
+- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4e, 2e, 3e et premier.
 - Le troisième élément suit le deuxième, car il a la même valeur pour `order` et qu'il est placé après dans le code source.
 
 Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :
@@ -270,9 +262,9 @@ button:last-child {
 
 ## Boîtes flex imbriquées
 
-Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
+Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
 
-![Imbrications avec flexbox](Exemple_flexbox_6.png)
+![Imbrications avec flexbox](flexbox-example7.png)
 
 Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :
 
@@ -320,7 +312,7 @@ article:nth-of-type(3) div:first-child {
 }
 ```
 
-Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.
+Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, ils "descendent" pour créer de nouvelles lignes.
 
 ```css
 button {
diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md
index 56e323f1d8..dc12326fbc 100644
--- a/files/fr/learn/css/css_layout/grids/index.md
+++ b/files/fr/learn/css/css_layout/grids/index.md
@@ -1,20 +1,6 @@
 ---
 title: Grilles
 slug: Learn/CSS/CSS_layout/Grids
-tags:
-  - Apprendre
-  - Article
-  - CSS
-  - Codage
-  - Didacticiel
-  - Débutant
-  - Guide
-  - Mise en page
-  - Trames
-  - Trames CSS
-  - quadrillage du design
-  - structure du quadrillage
-  - système de trames
 translation_of: Learn/CSS/CSS_layout/Grids
 original_slug: Apprendre/CSS/CSS_layout/Grids
 ---
@@ -51,7 +37,7 @@ Une trame est simplement un ensemble de lignes horizontales et verticales créan
 
 La trame est constituée généralement de **rangées** (**colonnes** ou **lignes)**. L'espace entre chaque ligne ou colonne est communément appelé **gouttière**.
 
-![Schéma du quadrillage](grille.png)
+![Schéma du quadrillage](grid.png)
 
 ## Création d'une trame CSS
 
@@ -59,7 +45,7 @@ Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser
 
 ### Définition d'une trame
 
-Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.
+Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au-dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.
 
 Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :
 
@@ -177,7 +163,7 @@ body {
 </div>
 ```
 
-{{ EmbedLiveSample('Trames_adaptables_avec_lunité_fr', '100%', 400) }}
+{{ EmbedLiveSample("", '100%', 400) }}
 
 > **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.
 
@@ -259,9 +245,9 @@ Nous obtenons 3 chaînes de `1fr` de large, comme précédemment. La première v
 
 ### Trame implicite et explicite
 
-Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.
+Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.
 
-Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.
+Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que les rangées créées ont maintenant 100 pixels de haut.
 
 ```css hidden
 body {
@@ -307,7 +293,7 @@ body {
 
 Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.
 
-La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle  s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` :
+La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` :
 
 ```css
 .container {
@@ -320,9 +306,9 @@ La fonction `minmax` nous permet de fixer une taille maximale et minimale pour u
 
 Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.
 
-### Autant de chaînes que possibles
+### Autant de chaînes que possible
 
-Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.
+Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génération automatique crée autant de chaînes que possible dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.
 
 Essayez ceci dans le fichier avec la CSS ci-dessous :
 
@@ -370,7 +356,7 @@ Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le co
 
 ## Placement sur les lignes
 
-Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.
+Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.
 
 Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :
 
@@ -477,11 +463,11 @@ aside {
 
 {{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}
 
-> **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite.
+> **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite.
 
 ## Placer avec grid-template-areas
 
-Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.
+Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.
 
 Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.
 
@@ -580,7 +566,7 @@ footer {
 </div>
 ```
 
-{{ EmbedLiveSample('Placer_avec_grid-template-areas', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 400) }}
 
 Les règles pour `grid-template-areas` sont les suivantes :
 
@@ -596,7 +582,7 @@ Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il n
 
 Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.
 
-[Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.
+[Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.
 
 ```css
 header {
@@ -689,7 +675,7 @@ aside {
 
 Si vous utilisez [Firefox Grid Inspector](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.
 
-![A 12 column grid overlaid on our design.](trames.png)
+![A 12 column grid overlaid on our design.](learn-grids-inspector.png)
 
 ## Résumé
 
@@ -697,7 +683,7 @@ Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mi
 
 ## Voir également
 
-- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#Guides)
+- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#guides)
 - [CSS Grid Inspector: Examine grid layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md
index 132132d24b..1e0e49e9c1 100644
--- a/files/fr/learn/css/first_steps/what_is_css/index.md
+++ b/files/fr/learn/css/first_steps/what_is_css/index.md
@@ -1,19 +1,12 @@
 ---
-title: Qu'est ce que CSS ?
+title: Qu'est-ce que CSS ?
 slug: Learn/CSS/First_steps/What_is_CSS
-tags:
-  - Apprendre
-  - CSS
-  - Débutant
-  - Modules
-  - Specifications
-  - Syntaxe
 translation_of: Learn/CSS/First_steps/What_is_CSS
 original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS
 ---
 {{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
 
-**{{Glossary("CSS")}}** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.
+**{{Glossary("CSS")}}** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.
 
 <table class="standard-table">
   <tbody>
@@ -27,8 +20,8 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS
         >,
         <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"
+        >, connaissance de base de HTML (cf. <a
+          href="/fr/docs/Learn/HTML/Introduction_to_HTML"
           >Introduction à HTML</a
         >.)
       </td>
@@ -40,9 +33,9 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS
   </tbody>
 </table>
 
-Dans le cours [Introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.
+Dans le cours [Introduction à HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.
 
-![La mise en forme par défaut appliquée par un navigateur.](basic_styling_fr.png)
+![La mise en forme par défaut appliquée par un navigateur.](html-example.png)
 
 Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.
 
@@ -50,25 +43,25 @@ Pour plus d'informations sur les styles de navigateur/par défaut, consultez la
 
 {{EmbedYouTube("spK_S0HfzFw")}}
 
-## À quoi sert CSS ?
+## À quoi sert CSS ?
 
 Comme mentionné plus haut, CSS est un langage de mise en forme des documents.
 
-Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.
+Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.
 
-**"Présenter** un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.
+**"Présenter** un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Apple Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.
 
-> **Note :** Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.
+> **Note :** Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.
 
-CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/Type_color) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/Animations_CSS). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.
+CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.
 
 ## Syntaxe de CSS
 
-CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.
+CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.
 
 Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."
 
-Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :
+Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :
 
 ```css
 h1 {
@@ -77,9 +70,9 @@ h1 {
 }
 ```
 
-La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).
+La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).
 
-Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages) comme valeurs.
+Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages) comme valeurs.
 
 Une feuille de style CSS est constituée d'une succession de telles règles :
 
@@ -96,45 +89,45 @@ p {
 
 On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.
 
-> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn _nom-de-propriété-ou-fonctionnalité-css_" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !
+> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn _nom-de-propriété-ou-fonctionnalité-css_" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !
 
 ## Modules CSS
 
-L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).
+L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).
 
 À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).
 
-Prenons un exemple précis et revenons au module *Backgrounds and Borders* — les propriétés [`background-color`](/fr/docs/Web/CSS/background-color) et [`border-color`](/fr/docs/Web/CSS/border-color) qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.
+Prenons un exemple précis et revenons au module *Backgrounds and Borders* — les propriétés [`background-color`](/fr/docs/Web/CSS/background-color) et [`border-color`](/fr/docs/Web/CSS/border-color) qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.
 
 ### Spécifications CSS
 
-Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.
+Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.
 
-CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.
+CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.
 
 De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le _CSS Working Group_ a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel !
 
-Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).
+Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).
 
 ## Prise en charge par les navigateurs
 
 Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.
 
-Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.
+Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.
 
-Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family).
+Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family).
 
 {{Compat("css.properties.font-family")}}
 
 ## Où continuer
 
-Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started).
+Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started).
 
 {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
 
 ## Dans ce cours
 
-1.  [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS)
+1.  [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS)
 2.  [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
 3.  [La façon dont CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
 4.  [Le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works)
diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md
index d21469eda6..21adc02ed2 100644
--- a/files/fr/learn/css/styling_text/styling_lists/index.md
+++ b/files/fr/learn/css/styling_text/styling_lists/index.md
@@ -1,20 +1,11 @@
 ---
 title: Style de listes
 slug: Learn/CSS/Styling_text/Styling_lists
-tags:
-  - CSS
-  - Débutant
-  - Guide
-  - Listes
-  - Numeros
-  - Puces
-  - Styles
-  - Texte
 translation_of: Learn/CSS/Styling_text/Styling_lists
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
 
-Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes) se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.
+Les [listes](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#listes) se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.
 
 <table class="standard-table">
   <tbody>
@@ -46,7 +37,7 @@ Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#List
 
 ## Un exemple de liste simple
 
-Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur Github](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)).
+Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur GitHub](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)).
 
 Le code HTML pour nos exemples de liste ressemble à ceci :
 
@@ -102,7 +93,7 @@ Si vous allez à l'exemple réel maintenant, et examinez les éléments de la li
 
 ## Gestion d'espacement des listes
 
-Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur Github et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.)
+Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](https://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur GitHub et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.)
 
 Le CSS utilisé pour le style et l'espacement du texte est le suivant :
 
@@ -165,13 +156,13 @@ ol {
 
 Cela donne l'apparence suivante :
 
-![une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.](ex_1.png)
+![une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.](outer-bullets.png)
 
 Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.
 
 ### Position des puces
 
-La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaîssent comme ci-dessus.
+La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaissent comme ci-dessus.
 
 Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne :
 
@@ -182,7 +173,7 @@ ol {
 }
 ```
 
-![une liste ordonnée avec les puces intégrées au texte des éléments de la liste.](ex_2.png)
+![une liste ordonnée avec les puces intégrées au texte des éléments de la liste.](inner-bullets.png)
 
 ### Utilisation d'une puce image personnalisée
 
@@ -194,7 +185,7 @@ ul {
 }
 ```
 
-Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites). Pour l'instant, voici un avant-goût !
+Cependant, cette propriété est un peu limitée en termes de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module [Styliser les boîtes](/fr/docs/Learn/CSS/Building_blocks). Pour l'instant, voici un avant-goût !
 
 Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :
 
@@ -215,7 +206,7 @@ ul li {
 
 Voici ce que nous avons fait :
 
-- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi,  l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.
+- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.
 - défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.
 - inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes :
 
@@ -226,7 +217,7 @@ Voici ce que nous avons fait :
 
 Ceci nous donne le résultat suivant :
 
-![une liste non ordonnée avec les puces définies comme de petites images d'étoiles.](ex_3.png)
+![une liste non ordonnée avec les puces définies comme de petites images d'étoiles.](list_formatting.png)
 
 ### Raccourci de style de liste
 
@@ -250,11 +241,11 @@ Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en m
 
 ## Contrôle du numérotage des listes
 
-Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.
+Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par exemple, à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.
 
 ### Numéro de départ
 
-L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :
+L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombre autre que 1. L'exemple suivant :
 
 ```html
 <ol start="4">
@@ -288,7 +279,7 @@ donne cette sortie :
 
 ### Valeurs individualisées
 
-L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :
+L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix. L'exemple suivant :
 
 ```html
 <ol>
@@ -303,7 +294,7 @@ vous donne cette sortie :
 
 {{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}
 
-> **Note :** Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`.
+> **Note :** Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`.
 
 ## Apprentissage actif : définir le style d'une liste imbriquée
 
@@ -400,8 +391,8 @@ Les listes sont relativement faciles à saisir lorsque vous connaissez les quelq
 
 
 
-- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte)
+- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals)
 - [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists)
-- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens)
+- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Styling_links)
 - [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts)
 - [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)