Did everything right

Tell us what’s happening:

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

You are missing a single dot in front of this line

pink-text: {

i did that and still nothing

it looks like you changed the original color line

    color: green;

put the green color back inside the body selector
or use the reset button to reset the code back to start and then add only the new pink-text selector and the new class attribute to h1

Your should have a pink-text CSS class that changes the color. This is the only question that has an X

make sure you have this

  .pink-text {
    color: pink;
  }

Noticed that you have an extra colon as well in your original post, if you still have it, remove it.

ody {
background-color: black;
font-family: monospace;
color: pink;
}
pink-text: {
color: green;
}

Hello World!

Your h1 element should have the class pink-text.
Your should have a pink-text CSS class that changes the color.
Passed
Your h1 element should be pink.

your class selector still looks wrong.
take a look at my previous comment to see how it should look.

Thank you for your time . it still not working, i am not sure where i went wrong. smh

ok just repost your latest code here but put it in between two lines with three backticks so I can see your formatting

```
put all the code here
```

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

this part is still wrong.

You need to make it look exactly like the one I wrote previously.
That is, it should start with a dot and not have an extra colon in the selector name

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

I still don’t see that you changed anything.

Please just add a dot . in front of the line selecting pink-text and remove the extra colon character :

it should look exactly like this:

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

@hbar1st’s answer works real fine. Remove the colon “:” after the .pink-text. That’s what’s breaking it.

still not correct because of the extra colon character
please remove it