Update step 4

en/step_3.md

@@ -11,14 +11,15 @@ Underneath the CSS for `div`, add another CSS style that will apply to images.
 language: css
 line_numbers: true
 line_number_start: 1
-line_highlights: 8-10
+line_highlights: 9-11
 ---
 div {
   text-align: center;
   overflow: hidden;
   border: 2px solid black;
   width: 300px;
   background: yellow;
+  border-radius: 40px;
 }
 img {
 
@@ -37,8 +38,8 @@ Add this code to set the width of the image:
 ---
 language: css
 line_numbers: true
-line_number_start: 8
-line_highlights: 9
+line_number_start: 9
+line_highlights: 10
 ---
 img {
 	width: 100px;
@@ -59,8 +60,8 @@ Add a border around the image:
 ---
 language: css
 line_numbers: true
-line_number_start: 8
-line_highlights: 10
+line_number_start: 9
+line_highlights: 11
 ---
 img {
 	width: 100px;
@@ -82,8 +83,8 @@ Add some padding around the image:
 ---
 language: css
 line_numbers: true
-line_number_start: 8
-line_highlights: 11
+line_number_start: 9
+line_highlights: 12
 ---
 img {
 	width: 100px;

en/step_4.md

@@ -4,45 +4,107 @@ Let's improve the style of the heading.
 
 --- task ---
 
-Add another CSS style 
+Add another CSS style at the bottom of your file, this time for `h1` which is a heading:
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 9
+line_highlights: 14-16
+---
+img {
+	width: 100px;
+  	border: 1px solid black;
+  	padding: 10px;
+}
+h1 {
+
+}
+--- /code ---
 
-	```
-	h1 {
-
-	}
-	```
 --- /task ---
 
+--- task ---
+Add a style rule to change the font of the heading, then press **Run** to see the changes.
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 14
+line_highlights: 15
+---
+h1 {
+	font-family: Impact;
+}
+--- /code ---
 
-+ To change the font of your `<h1>` headings, add the following code between the curly brackets:
+--- /task ---
 
-	```
+--- task ---
+Now add another rule to change the size of the heading, then press **Run** to see the changes.
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 14
+line_highlights: 16
+---
+h1 {
 	font-family: Impact;
-	```
-
-+ You can also change the size of the heading:
+	font-size: 3em;
+}
+--- /code ---
 
-	```
-	font-size: 50pt;
-	```
+--- /task ---
 
-+ 	Have you noticed that there's a big space between the `<h1>` heading and the stuff around it?
 
-	![screenshot](images/wanted-h1-margin.png)
+Have you noticed that there's a big space between the `<h1>` heading and the other text?
 
-	This is because there's a margin around the heading. A margin is the space between the element (in this case a heading) and the other stuff around it.
+![A poster with the text 'Wanted' in a large font. There is a large gap between this text and other text below it.](images/wanted-margin.png)
 
-	You can make the margin smaller with this code:
+This is because there's a margin around the heading. A margin is the space between the element (in this case a heading) and the other things on the page.
 
-	```
+--- task ---
+Add a style to make the margin of the heading smaller, then press **Run** to see the changes.
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 14
+line_highlights: 17
+---
+h1 {
+	font-family: Impact;
+	font-size: 3em;
 	margin: 10px;
-	```
+}
+--- /code ---
 
-	![screenshot](images/wanted-h1-margin-small.png)
+--- /task ---
 
-+ You can also underline your heading:
 
-	```
+--- task ---
+Finally,  add a style to underline the heading, then press **Run** to see the changes.
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 14
+line_highlights: 18
+---
+h1 {
+	font-family: Impact;
+	font-size: 3em;
+	margin: 10px;
 	text-decoration: underline;
-	```
+}
+--- /code ---
+
+![A large heading reading 'Wanted!' underlined in a large black font on a yellow background.](images/wanted-finished-header.png)
 
+--- /task ---