freeCodeCamp/override-class-declarations-with-inline-styles.english.md at 7f4531aed089faad044477c390b54ce4b9031a1f

SomeDer bfa5c26288 fix: use dfn instead of code tag (#36640 )

* Use dfn tags

* remove misused <dfn> tags

* Revert "remove misused <dfn> tags"

This reverts commit b24968a96810f618d831410ac90a0bc452ebde50.

* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Make "array" lowercase

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Fix dfn usage

* Address last dfn tags

2019-10-27 12:45:37 -04:00

2.2 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

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

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

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

<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" style="color: white">Hello World!</h1>

2.2 KiB Raw Blame History