ContextQMD
Back to Freecodecamp

Step 3

curriculum/challenges/english/blocks/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md

latest1.5 KB
Original Source

--description--

Now it is time to style your greeting card.

Add a selector for the body element, then:

  • change the font-family to be Arial followed by the generic sans-serif,
  • give a padding on all sides of 40px,
  • set the text-align property to center.

--hints--

You should have a body selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle("body"));

You should set font-family to "Arial", sans-serif in the body selector.

js
assert.oneOf(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("font-family"), ["'Arial', sans-serif", "Arial, sans-serif", '"Arial", sans-serif']);

You should set padding to 40px in the body selector.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("padding"), "40px");

You should set text-align to center in the body selector.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("text-align"), "center");

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Card</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="card" id="greeting-card">
      <h1>Happy Birthday!</h1>
      <p class="message">
        Wishing you all the happiness and joy on your special day!
      </p>
  	</div>
  </body>
</html>
css
--fcc-editable-region--

--fcc-editable-region--