Prioritize One Style Over

Tell us what’s happening:
Hello When I insert a text it says insert another text using pink

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another

Hi there @noahflei.

The issue you are having is because your .pink-text CSS rule set is inside the curly brackets of the body rule set.

Example

body {
  background-color: black;
  font-family: monospace;
 color: green;
} << closing curly bracket 

.pink-text { <<opening curly bracket, for new rule set
  color: pink;
}

the use of { and } separate rule sets to avoid bugs and confusion, I hope this helps clear up any confusion. Feel free to @ me if you are still stuck or don’t quite understand.

1 Like

I finally got to fix the problem. I didn’t create a class for the pink-text in the h1 element.