Override Styles in Subsequent CSS output shows it is right? [SOLVED]

Tell us what’s happening:

Beyond confused how this isn’t the right answer. The only box that isn’t checked is “Your h1 element should be blue”, which it is. I see this question posted all over the forum; however, it is usually followed by the famous SO “nvm figured it out” or someone using two sets of double quotes.

SOS

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 blue-text"> Hello World!</h1>

Your code passes the challenge when I use it.

I would think it should… The output is blue and everything. I have cleared the code and typed it in again, signed in and out, and tried to play around with different syntax to the same effect.

I’ll take a break and come back to it later I think.

Appreciate the validation though.

Try removing the pink-text class from the h1 element. The test is probably getting confused by it.
Edit: apologies, I was thinking of the wrong challenge.

You can’t remove the class it’s a requirement.

What browser are you using? I’d say try a different browser, just to see.

I am using firefox. I will try to switch browsers. I did go back to an earlier challenge that I had passed and ran it again and it came back with incorrect results regarding the color. Don’t quite understand.

Do you have any browser extension that changes the color of the pages you are visiting? That would also interfere with tests on the color of things

I do not. It was working up until this one challenge and then it seems as though setting color classes is now broken in all previous exercises I have passed as well. I still haven’t tried while using a different browser yet. I will report when I do.

Ok, well, I switched over to Chrome, ran the code, and got everything checked off other than “Your h1 element should be blue” again. I am at a loss.

I take it back @ilenia, apparently I didn’t turn my dark theme off (I thought I had) and the test ran successfully after doing so. I feel a bit embarrassed; however, could you explain why this happens? I imagine it has something to do with the code of the page as a whole and how the extension affects that, but looking around with DevTools (I am a beginner…) I can’t find the change. I am interested.

Regardless, thanks for the fix (can I tag the post as “answered” or something?)

Edit: I just edited the title of the post to present the fact the problem has been resolved

The Dark theme changes the css rules of the page, as such the tests are detecting the wrong colours

You may want to activate the FCC dark theme, in the settings, that will not disrupt the testing

Ah, I assumed as much. Definitely will! Thanks again for the guidance - I am sure I will be posting another head-shaking question on the forum at some point (see you then :wink:)