Can't Get H1 Element to turn blue - Why?

The issue I have is from this set of questions, I also cant see how to share my code

1.Your h1 element should have the class pink-text - got this one

  1. Your h1 element should have the class blue-text - got this one
  2. Both blue-text and pink-text should belong to the same h1 element - got this one
  3. Your h1 element should be blue. - cannot figure this out

My attempt at sharing my code:

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

Edit - still confused but added the blue class in the style before pink and that worked? Why is that

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Do you have the link to that challenge?

I see two issues. First, you have an extra closing curly brace (}) after your .pink-text class - that might be confusing the CSS. Also, you have two classes in your h1. (I don’t know if that is a problem or if it is part of the challenge.)

Helpful, thank you. No idea what I am doing.

That’s cool. We all start somewhere.

Yeah, fixing that curly brace issue fixed it and the test passes. It still has two classes, but the second one overrides the color attribute on the first one so it still works.

Implemented and this works, thanks!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.