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(/ 0, 'Your 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)" ],