freeCodeCamp/inherit-styles-from-the-body-element.english.md at d03c71b9905a43c8a3a7ffe14c2a14bcc3e0b51f

Files

Randell Dawson 3ec1fe8ea7 feat: add forumTopicId to challenge frontmatter [pre-existing]

This commit adds the pre-existing challenge guide topics in the
forum to the forntmatter of their challenge markdown files.

2019-08-05 22:14:37 +05:30

2.6 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

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

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));
  - 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: 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);
  - 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)"));
  - 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)));
  - 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>

2.6 KiB Raw Blame History