fix: use dfn instead of code tag (#36640)

* Use dfn tags

* remove misused <dfn> tags

* Revert "remove misused <dfn> tags"

This reverts commit b24968a968.

* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Make "array" lowercase

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Fix dfn usage

* Address last dfn tags

curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md

@@ -8,7 +8,7 @@ forumTopicId: 301086
 
 ## Description
 <section id='description'>
-To create a CSS variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
+To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:
 
 ```css
 --penguin-skin: gray;

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

@@ -14,7 +14,7 @@ There are other ways that you can override CSS. Do you remember inline styles?
 
 ## Instructions
 <section id='instructions'>
-Use an <code>inline style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:
+Use an inline style to try to make our <code>h1</code> element white. Remember, in line styles look like this:
 <code>&#60;h1 style="color: green;"&#62;</code>
 Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
 </section>

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

@@ -16,7 +16,7 @@ These four values work like a clock: top, right, bottom, left, and will produce
 
 ## Instructions
 <section id='instructions'>
-Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
+Use Clockwise Notation to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
 </section>
 
 ## Tests

curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md

@@ -8,9 +8,9 @@ forumTopicId: 18349
 
 ## Description
 <section id='description'>
-With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.
-When you entered <code>&#60;h2 style="color: red;"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
-That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
+With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
+When you entered <code>&#60;h2 style="color: red;"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were styling that individual <code>h2</code> element with inline CSS, which stands for Cascading Style Sheets.
+That's one way to specify the style of an element, but there's a better way to apply CSS.
 At the top of your code, create a <code>style</code> block like this:
 
 ```html
@@ -18,7 +18,7 @@ At the top of your code, create a <code>style</code> block like this:
 </style>
 ```
 
-Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
+Inside that style block, you can create a <dfn>CSS selector</dfn> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
 
 ```html
 <style>

curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md

@@ -8,8 +8,8 @@ forumTopicId: 18350
 
 ## Description
 <section id='description'>
-Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.
-We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
+Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
+We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
 In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.
 
 ```css
@@ -22,7 +22,7 @@ body {
 
 ## Instructions
 <section id='instructions'>
-Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>.
+Replace the word <code>black</code> in our <code>body</code> element's background-color with its hex code representation, <code>#000000</code>.
 </section>
 
 ## Tests