freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.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.

--hints--

Your h1 element should have the class pink-text.

assert($('h1').hasClass('pink-text'));

Your h1 element should have the class blue-text.

assert($('h1').hasClass('blue-text'));

Your h1 element should have the id of orange-text.

assert($('h1').attr('id') === 'orange-text');

Your h1 element should have an inline style.

assert(document.querySelector('h1[style]'));

Your h1 element should be white.

assert($('h1').css('color') === 'rgb(255, 255, 255)');

--seed--

--seed-contents--

<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>

--solutions--

<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>