Prioritize One Style Over Another - what is supposed to happen?

Tell us what’s happening:

I did the right coding and i did pass the challenge, it was clear, however i am a bit pazzled.
What is supposed to happen when we create a class that makes text pink, then apply it to an element.?? Will our class override the body element’s color: green; OR neither color text will be applied and only a black background will show? (like my case)

Thanks (i am a neewbie)

Your code so far


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

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another

There are two color styles that could potentially be used by the <h1> element in the HTML. Since the selector where color: pink appears has greater priority than that of green, it’s what will be applied to the affected elements.

It won’t completely override the green text for the page. Just those elements with the pink-color class.

so the green text Hello world should turn into pink?

Yes, it will turn pink

Ok thanks…this is what i expected to happen but it didn’t…i just got confused as my page became all black - no text showing - but the code is correct and i passed the challenge.

Oh, now that you mentioned it, I only noticed just now that there’s a > missing right before Hello. Also the { before </style> should be }, and the class names don’t match. That’s probably why you’re getting a black page

Yes correct, I wrote my code here in the forum wrong. (instead of copy pasting it)
Now that i went to the next level the text became pink