freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.english.md

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: Your <code>h1</code> element should have 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>