2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl | forumTopicId |
---|---|---|---|---|
bad87fee1348bd9aedf08746 | Inherit Styles from the Body Element | 0 | https://scrimba.com/c/c9bmdtR | 18204 |
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: You should create an <code>h1</code> element.
testString: assert(($("h1").length > 0));
- 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)));
- text: Your <code>h1</code> element should have a closing tag.
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
- text: Your <code>body</code> element should have the <code>color</code> property of <code>green</code>.
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
- text: Your <code>body</code> element should have the <code>font-family</code> property of <code>monospace</code>.
testString: assert(($("body").css("font-family").match(/monospace/i)));
- 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)));
- 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)"));
Challenge Seed
<style>
body {
background-color: black;
}
</style>
Solution
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>