fix(curriculum): Replace single-line blocks with multi-line blocks for Responsive Web Design (#41519)

* fix(curriculum) replace single-line block with multi-line blocks

* fix(curriculum) replace single-line block with multi-line blocks (missed blocks)

curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md

@@ -29,7 +29,9 @@ Create a class called `thick-green-border`. This class should add a 10px, solid,
 
 Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example:
 
-`<img class="class1 class2">`
+```html
+<img class="class1 class2">
+```
 
 # --hints--
 

curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md

@@ -17,7 +17,9 @@ The property that is responsible for the color of an element's text is the `colo
 
 Here's how you would set your `h2` element's text color to blue:
 
-`<h2 style="color: blue;">CatPhotoApp</h2>`
+```html
+<h2 style="color: blue;">CatPhotoApp</h2>
+```
 
 Note that it is a good practice to end inline `style` declarations with a `;` .
 

curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md

@@ -17,7 +17,9 @@ So, let's go ahead and import and apply a Google font (note that if Google is bl
 
 To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
 
-`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+```
 
 Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
 

curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md

@@ -23,7 +23,9 @@ Let's add the keyword `!important` to your pink-text element's color declaration
 
 An example of how to do this is:
 
-`color: red !important;`
+```css
+color: red !important;
+```
 
 # --hints--
 

curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md

@@ -19,7 +19,9 @@ Let's override your `pink-text` and `blue-text` classes, and make your `h1` elem
 
 Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this:
 
-`<h1 id="orange-text">`
+```html
+<h1 id="orange-text">
+```
 
 Leave the `blue-text` and `pink-text` classes on your `h1` element.
 

curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md

@@ -17,7 +17,9 @@ There are other ways that you can override CSS. Do you remember inline styles?
 
 Use an inline style to try to make our `h1` element white. Remember, in line styles look like this:
 
-`<h1 style="color: green;">`
+```html
+<h1 style="color: green;">
+```
 
 Leave the `blue-text` and `pink-text` classes on your `h1` element.
 

curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md

@@ -21,7 +21,9 @@ Apply the `blue-text` class to your `h1` element in addition to your `pink-text`
 
 Applying multiple class attributes to a HTML element is done with a space between them like this:
 
-`class="class1 class2"`
+```html
+class="class1 class2"
+```
 
 **Note:** It doesn't matter which order the classes are listed in the HTML element.
 

curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md

@@ -17,7 +17,9 @@ There are several benefits to using `id` attributes: You can use an `id` to styl
 
 Here's an example of how you give your `h2` element the id of `cat-photo-app`:
 
-`<h2 id="cat-photo-app">`
+```html
+<h2 id="cat-photo-app">
+```
 
 # --instructions--
 

curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md

@@ -13,7 +13,9 @@ Let's try this again, but with `margin` this time.
 
 Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this:
 
-`margin: 10px 20px 10px 20px;`
+```css
+margin: 10px 20px 10px 20px;
+```
 
 These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
 

curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md

@@ -11,7 +11,9 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
 
 Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this:
 
-`padding: 10px 20px 10px 20px;`
+```css
+padding: 10px 20px 10px 20px;
+```
 
 These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
 

curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md

@@ -13,11 +13,15 @@ Another way you can represent colors in CSS is by using `RGB` values.
 
 The `RGB` value for black looks like this:
 
-`rgb(0, 0, 0)`
+```css
+rgb(0, 0, 0)
+```
 
 The `RGB` value for white looks like this:
 
-`rgb(255, 255, 255)`
+```css
+rgb(255, 255, 255)
+```
 
 Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255.