freeCodeCamp/guide/english/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md

title

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