Override Class Declarations with Inline Styles html5 and CSS

Override Class Declarations with Inline Styles html5 and CSS
0.0 0

#1

Tell us what’s happening:

How do I solve this?

Your code so far

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

<h1 style = "color: white">```
**Your browser information:**

Your Browser User Agent is: ```Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063```.

**Link to the challenge:**
https://www.freecodecamp.org/challenges/override-class-declarations-with-inline-styles

#2

Why did you create a 2nd h1 element? The instructions say to make the h1 element white. You have the right idea with the 2nd h1 element, but you need to move the style attribute to the original h1 element. Also, there is no class called “white-text”, so delete that from the class attribute.


#4
<h1 style ="color:White">
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
   {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }

</style>
<h1 style id="orange-text" class="pink-text blue-text">Hello World!</h1>

The problem is that I need a h1 element for “orange-text” but it already has it. It’s not letting me through.


#5

Like I said before, you should not be creating an additional h1 element. Just put the style="color:white;" inside the h1 element next either before or after id=“orange-text”.