freeCodeCamp

3.1 KiB

Raw Blame History

id	title	challengeType	videoUrl
bad87fee1348bd9aedf08746	Inherit Styles from the Body Element	0	https://scrimba.com/c/c9bmdtR

Description

Now we've proven that every HTML page has a 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

First, create a 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

3.1 KiB Raw Blame History