Why does this solution want two of the color property in one declaration?

Hello! This is the lesson page I’m having trouble with.

The instructions were to change the foreground color of the h1 heading to midnightblue. The h1 element’s declaration already had a color property with a value of #41292C, so my solution was to simply change that value to midnightblue, like so:

h1 {
  color: midnightblue;
  font-family: 'Covered By Your Grace', sans-serif;
  font-size: 100px;
  line-height: 76px;
  margin: 0;
  position: relative;
  text-align: center;
  top: 20%;

But this was marked as incorrect, with a message asking " Did you change the color of the heading to midnightblue?" After re-reading and double checking my code multiple times, I clicked “View solution”. The given solution explicitly left the original color property as-is and added a second color property with the midnightblue value to the same declaration. As far as I can tell, the property names are identical.

I was under the impression that having multiple instances of a property within one declaration wasn’t good practice. Why would changing the existing property’s value be incorrect here? Is there a functional difference between changing the value of the existing color property vs. adding a second color property with a different value?

I apologize if this counts as posting answers, I wasn’t sure how else to explain my question. I tried to keep it somewhat vague while still being clear on where the confusion was.

1 Like

Hi, your solution is correct and you are right, creating a new color property with a different value is bad practice.
I opened the same lesson and solved the task the way you did it, and my answer got accepted. Looks like a bug on Codecademy side.

1 Like

How strange. Thank you very much!

1 Like