Did everything right

HTML-CSS
#1

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/

#2

You are missing a single dot in front of this line

pink-text: {
#3

i did that and still nothing

#4

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

#5

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

#6

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.

#7

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

Hello World!

#8

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.

#9

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

#10

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

#11

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
```

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

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

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

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
#17 
  body {
    background-color: black;
    font-family: monospace;
    color: pink;
  }
  .pink-text: {
    color: pink;
    }
</style>
<h1 class="pink-text">Hello World!</h1>
#18

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

#19

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

#21