Test Not Recognizing Correct Answer

HTML-CSS
1

Tell us what’s happening:
The system isn’t recognizing the correct code and passing it.

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Inherit Styles from the Body Element

Link to the challenge:

2

Hey there @keyscripter!

You still have the class “pink-text” styled to pink.

Remember inheritance means that the body element will style everything within the <body></body> tags, keeping

  .pink-text {
    color: pink;
  }

Will override the body element styling.

Hope this helped!
Best,
Cy499_Studios

3

I’m confused then because the lesson is to overide the body color green with the pink-text:

Basic CSS: Prioritize One Style Over Another

Sometimes your HTML elements will receive multiple styles that conflict with one another.

For example, your h1 element can’t be both green and pink at the same time.

Let’s see what happens 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; CSS property?

Create a CSS class called pink-text that gives an element the color pink.

Give your h1 element the class of pink-text .

It says my text should be pink and it is, so I don’t understand the issue.

4

@keyscripter you sent the wrong link in the description of the post LOL, however I found the challenge you were working on and your code passes for me. Make sure you try either refreshing your browser, trying a different browser such as Chrome.

5

Thanks so much for your help.

6

No problem @keyscripter!

Feel free to ask more questions to the forum! :smile:

7

I have the same issue. It’s not working on either edge nor chrome. Does the page have an Error?

8

found the error: I forgot to put “;” at the end of the class --> .pink-text{color: pink;}

9

Found out my issue was the Dark Reader extension on my browser was causing a malfunction. Fixed now!