diff --git a/recettes/02-creer-un-journal.html b/recettes/02-creer-un-journal.html
index 694dbe5..99a3eb1 100644
--- a/recettes/02-creer-un-journal.html
+++ b/recettes/02-creer-un-journal.html
@@ -104,7 +104,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
     <style>
         body {
             padding: 25px;
-            max-width: 1500px;
+            max-width: 800px;
             width: 100%;
             box-sizing: border-box;
             margin-left: auto;
@@ -123,6 +123,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
             <article>
                 <p>Ajouter le code suivant dans l'élément <code>style</code> définit précédemment.</p>
                 <pre><code>img {
+    display: block;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
@@ -130,6 +131,67 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
             </article>
         </section>
 
+        <section class="guide">
+            <h2>Ajuster les couleurs de la page</h2>
+            
+            <article>
+                <p>Ajuster la couleur de l'arrière plan de la page en ajoutant le code suivant dans l'élément <code>style</code> précédente:</p>
+                <pre><code>body {
+    background-color: hsl(35.2, 69%, 83.5%);
+}</code></pre>
+            </article>
+
+            <article>
+                <p>Définir la police de la page en <em>Sans-serif</em> et la police des titres en <em>Serif</em> en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
+                <pre><code>body {
+    font-family: sans-serif;
+}
+
+h1, h2, h3 {
+    font-family: serif;
+}</code></pre>
+            </article>
+        </section>
+
+        <section>
+            <h2>Mettre en avant le premier paragraphe</h2>
+
+            <article>
+                <p>Contrer le titre principal de la page en ajoutant le code suivant a l'élément <code>style</code> précédent:</p>
+                <pre><code>
+h1 {
+    text-align: center;
+}</code></pre>
+            </article>
+
+            <article>
+                <p>Contrer le paragraphe suivant le titre principal de la page en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
+                <pre><code>
+h1 + p {
+    text-align: center;
+}</code></pre>
+            </article>
+
+            <article>
+                <p>Ajouter un style particulier a ce meme paragraphe en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
+                <pre><code>h1 + p {
+    font-size: 1.1rem;
+    font-style: italic;
+}</code></pre>
+            </article>
+
+            <article>
+                <p>Ajouter de la marge au dessus du titre principal et au dessous du paragraphe qui le suit en ajoutant le code suivant dans l'élément <code>style</code> de la plage:</p>
+                <pre><code>h1 {
+    margin-top: 100px;
+}
+
+h1 + p {
+    margin-bottom: 100px;
+}</code></pre>
+            </article>
+        </section>
+
         <section class="ressource">
             <h2>Pour aller plus loin</h2>
             <ul>
@@ -172,6 +234,27 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
                     <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing"></qr-code>
                     box-sizing
                 </a></li>
+                <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-family" target="_blank">
+                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-family"></qr-code>
+                    font-family
+                </a></li>
+                <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-style" target="_blank">
+                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-style"></qr-code>
+                    font-style
+                </a></li>
+                <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-size" target="_blank">
+                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-size"></qr-code>
+                    font-size
+                </a></li>
+                <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/background-color" target="_blank">
+                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/background-color"></qr-code>
+                    background-color
+                </a></li>
+                <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" target="_blank">
+                    <qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl"></qr-code>
+                    hsl()
+                </a></li>
+                
             </ul>
         </section>