freeCodeCamp/override-class-declarations-with-inline-styles.english.md at 6ce41d62038f902c75ea1741e6fab6e70f3c27e7

Valeriy 79d9012432 fix(curriculum): quotes in tests (#18828 )

* fix(curriculum): tests quotes

* fix(curriculum): fill seed-teardown

* fix(curriculum): fix tests and remove unneeded seed-teardown

2018-10-20 23:32:47 +05:30

2.3 KiB

Raw Blame History

id, title, challengeType, videoUrl

id	title	challengeType	videoUrl
bad87fee1348bd9aedf06756	Override Class Declarations with Inline Styles	0	https://scrimba.com/c/cGJDRha

Description

So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS. There are other ways that you can override CSS. Do you remember inline styles?

Instructions

Use an inline style to try to make our h1 element white. Remember, in line styles look like this: <h1 style="color: green;"> Leave the blue-text and pink-text classes on your h1 element.

Tests

tests:
  - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
    testString: assert($("h1").hasClass("pink-text"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');
  - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
    testString: assert($("h1").hasClass("blue-text"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');
  - text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
    testString: assert($("h1").attr("id") === "orange-text", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');
  - text: Give your <code>h1</code> element an inline style.
    testString: assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');
  - text: Your <code>h1</code> element should be white.
    testString: assert($("h1").css("color") === "rgb(255, 255, 255)", 'Your <code>h1</code> element should be white.');

Challenge Seed

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

Solution

// solution required

2.3 KiB Raw Blame History