Why is there a problem?

On the ‘attach a fallback to CSS variable’, we are given an example whereby the author shows how the color variable --penguin-skin isn’t being applied to the top and bottom of the penguin. I understand how variables work:

We create a variable by giving it a name with two dashes before it, followed the value; like so, --my-color-variable: #000;

Then we can use that variable in our code like so:color: var(--my-color-variable);

And to add a fallback we can do the followingcolor: var(--my-color-variable, fallback);

However, you can see in the example that the code is correct - at least to my eyes - but the color isn’t being applied.

So my question is: Why is the color not being applied?

Note: I am asking about the initial code, I already know the answer.
Here is the link : https://learn.freecodecamp.org/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable

The exercise states that there is a typo. Browsers ignore things they don’t understand. However instead of correcting it you will learn how to set a fallback. Premise sounds strange to me, but that’s what someone chose for the lesson.

1 Like

Thank you I agree on you about premise.