diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json
index 3cc32e985d..e5e376317d 100644
--- a/challenges/html5-and-css.json
+++ b/challenges/html5-and-css.json
@@ -3117,7 +3117,7 @@
"difficulty": 1.46,
"description": [
"Now let's start fresh and talk about CSS inheritance.",
- "Every HTML page has body
element.",
+ "Every HTML page has a body
element.",
"We can prove that the body
element exists here by giving it a background-color
of black.",
"We can do this by adding body { background-color: black; }
to our style
element."
],
@@ -3235,7 +3235,8 @@
"Our \"pink-text\" class overrode our body
element's CSS declaration!",
"We just proved that our classes will override the body
element's CSS. So the next logical question is, what can we do to override our pink-text
class?",
"Create an additional CSS class called blue-text
that gives an element the color blue. Make sure it's below your pink-text
class declaration.",
- "Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins."
+ "Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins.",
+ "Applying multiple class attributes to a HTML element is done with a space between them like this: class=\"class1 class2\"
"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1
element should have the class pink-text
.')",
@@ -3387,7 +3388,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1
element should have the class blue-text
.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your h1
element should have the id of orange-text
.')",
"assert(editor.match(/
h1
element should have the inline style of color: white
.')",
- "assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your pink-text
class should have the !important
keyword to override all other declarations.')",
+ "assert(editor.match(/pink.*\\!important;/gi), 'Your pink-text
class should have the !important
keyword to override all other declarations.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1
element should be pink.')"
],
"challengeSeed": [
@@ -3431,7 +3432,7 @@
"description": [
"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.",
"Decimal
means the numbers zero through nine - the numbers that people use in everyday life. Hexadecimal
includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
- "With CSS, we use 6 hexidecimal number to represent colors. For example, #000000
is the lowest possible value, and it represents the color black.",
+ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000
is the lowest possible value, and it represents the color black.",
"Replace the word black
in our body
element's background-color with its hex code
representation, #000000
. "
],
"tests": [
@@ -3749,7 +3750,7 @@
"description": [
"Another way you can represent colors in CSS is by using rgb
values.",
"RGB values look like this: rgb(0, 0, 0)
for black and rgb(255, 255, 255)
for white.",
- "Instead of using six hexadecimal digits like you do with hex code, with rbg
you specify the brightness of each color with a number between 0 and 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.",
"If you do the math, 16 times 16 is 256 total values. So rgb
, which starts counting from zero, has the exact same number of possible values as hex code.",
"Let's replace the hex code in our body
element's background color with the RGB value for black: rgb(0, 0, 0)
"
],