3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aedf08746 | Inherit Styles from the Body Element | 0 | https://scrimba.com/c/c9bmdtR |
Description
body
element, and that its body
element can also be styled with CSS.
Remember, you can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.
Instructions
h1
element with the text Hello World
Then, let's give all elements on your page the color of green
by adding color: green;
to your body
element's style declaration.
Finally, give your body
element the font-family of monospace
by adding font-family: monospace;
to your body
element's style declaration.
Tests
tests:
- text: Create an <code>h1</code> element.
testString: assert(($("h1").length > 0), 'Create an <code>h1</code> element.');
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');
- text: Make sure your <code>h1</code> element has a closing tag.
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
testString: assert(($("body").css("font-family").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');
- text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');
Challenge Seed
<style>
body {
background-color: black;
}
</style>
Solution
// solution required