freeCodeCamp Challenge Guide: Prioritize One Style Over Another

Prioritize One Style Over Another


Problem Explanation

We need to create a CSS class called pink-text that gives an our h1 element the color pink.


Solutions

Solution 1 (Click to Show/Hide)

Between <style> and </style> create a class called pink-text:

  <style>
    body {
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text {

    }
  </style>

And add in this class color with value of pink:

  .pink-text {
    color: pink;
  }

After, add this class to our h1 element:

<h1 class="pink-text">Hello World!</h1>

Full solution

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

I did this exactly and its not working… What do i do?

5 Likes

.pink-text{color: pink;}

Make sure the colon and semi-colon are in the correct place.

10 Likes

Ok. I did, and it worked. I really appreciate it.thanks! Im about to start building my portfolio. Any suggestions?

how come its outside body?