Change a variable for a specific area. I am confused

Why, there is only a pink background and why not a gray or orange background.

what exercise are you on and what have you tried so far?

I was on, changing variable about the penguins belly from pink to white. It sort of a confusion.

Are you on this exercise?

https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables/

If so, you will notice the instructions say:

Define a variable named --penguin-belly in the :root selector and give it the value of pink . You can then see how the value will cascade down to change the value to pink, anywhere that variable is used.

The background changes color when you add --penguin-belly: pink; to root because the background-color style is set to call --penguin-belly

If this doesnt answer your question, try clicking “get a hint” or clarifying what you are trying to achieve, along with what you have tried so far

I just realised you are on the following exercise -

The instructions are pretty clear:

You can then over-write these variables by setting them again within a specific element.

Try adding --penguin-belly: white to your penguin class

I think this is what you are asking about, otherwise just ignore me.

Each bodypart of the penguin is its own div and has CSS to make it into a shape. Only that small part of each div is what has the background color.

Here is a more simple example

:root { --penguin-skin: gray; --penguin-belly: pink; --penguin-beak: orange; } body { background: var(--penguin-belly, #c6faf1); } .penguin { /* add code below */ /* add code above */ position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, pink); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, pink); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, pink); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; }

Please, be more specific in your question. Also, there was no need to open a new thread…

But even better if you use the “Ask for help” button in the challenge you will create a post that has the correct formatting and a link to the challenge