Prioritize One Style Over Another, I'm confused

Prioritize One Style Over Another, I'm confused
0.0 0

#1

Tell us what’s happening:

I’m suppose to try and override the body style color: green by giving the style tag a Class: pink-text. But I’m not sure where to put the second Class. Please help this n00bn00b.

Your code so far


<style class: "pink-text">
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
</style>
<h1>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/66.0.3359.181 Safari/537.36.

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


#2

Not on the style tag.
You could do this:

<style>
.pink-text {
    color: pink;
}
</style>

to create a rule for the pink-text class, that gives the color pink to the text.
Then you need to give that class to an element. I didn’t look at the challenge, but if you want the h1 text to be pink, you could do:

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

#3

Like @zdflower pointed out, you add the class to the HTML tag of the element that you want to target not the on the <style>tag. Then target the class on your css and apply the style.

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