50 Override Styles

HTML-CSS
1

The lesson text says that the order in the style-section determines which color will display, when there is a conflict; NOT order or the properties within the element.
“Note: It doesn’t matter which order the classes are listed in the HTML element.
However, the order of the class declarations in the section are what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text”.
BUT, when I reverse the order within the element, the color changes. Why?

Thx

Your code so far

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

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6.

Link to the challenge:
https://www.freecodecamp.org/challenges/override-styles-in-subsequent-css

2

Got it. Thank you. …

3

This is invalid syntax:
Should be: <h1 class= "blue-text pink-text">Hello World!</h1>

By the way, to help others who read this you should state what you fixed.