Override Styles (no override)

1

Tell us what’s happening:
Hi,
The tutorial tells that the order of the class in the html element isn’t important. But when I change the order of the 2 classes, then the element becomes blue…

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="pink-text" class="blue-text">Hello World!</h1>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

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

2

There should only be one class attribute per element. When there are more than one, the second one takes precedence over the first. So in your code below, you should have only put a single class=" "

class="pink-text" class="blue-text"

and listed both pink-text and blue-text (in any order). When the instructions said “It doesn’t matter which order the classes are listed in the HTML element”, it should have said “It doesn’t matter which order the classes are listed in the HTML element’s class attribute.”

Hopefully, this explains why your code did not work.

1 Like
3

Ha voilà!
Thanks so much!