CSS. Override Class Declarations with Inline Styles

 

Override Class Declarations with Inline Styles

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?

 

TEST

Use an inline style to try to make our h1 element white. Remember, inline styles look like this:

<h1 style="color: green;">

Leave the blue-text and pink-text classes on your h1 element.

 

 

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