Override Styles - Frustrated Beginner

HTML-CSS
1

Tell us what’s happening:

I cannot solve 3 and 4. At one point I had everything solved except 3 but now I’m back to duplicates of Hello World in each color and I understand why but am deadlocked on how to put them in the same h1 element except for possibly using class= class1 class2 or id.

I’ve researched the code for this problem and have been unsuccessful in finding a solution:

one github source just says it’s a stub and has no information.

Another source says use code involving:

#orange-text in style and then use <h1 id...  
We have not been instructed on this code to this point.

another source says use ` !Important` function - no instructions to this point

I’ve tried class=class1 class2 - doesnt work

Help is greatly appreciated.

https://learn.freecodecamp.org/responsive-web-design/basic-css/override-styles-in-subsequent-css

Your code so far


<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }

.blue-text {
  color: blue;
}

</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/override-styles-in-subsequent-css

2

The instructions didn’t tell you to create another h1 element, so you can get rid of your last line.

Go head and apply class blue-text after pink-text in your first h1 element, following this syntax as an example.

class="class1 class2"

3

I keep reading that the last class is the one that overrides but this is what worked:

`

Hello World!

4 
  .pink-text {
    color: pink;
  }

.blue-text {
  color: blue;
}

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

Pretty close, remember what I said above?

Go head and apply class blue-text after pink-text in your first h1 element

just swap those classes.

6

it only works the way I’ve written it. If I put blue text 2nd - as I understood it should be for override - I get pink text,

7

Strange. I’ve pasted in your code in my browser and it is displaying blue.

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }

.blue-text {
  color: blue;
}

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

Try using a different browser or clear your cookies/caches.