Need help! Basic CSS - Attach a Fallback value to a CSS Variable

HTML-CSS
1

I’m not sure why it’s not working…Help please!
The background default color is supposed to be black & it stays gray after I input the code and test it???

I’m lost at this point. I’ve redone the code 20-30 times.


    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */
  
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .penguin-bottom {
    top: 40%;
    left: 23.5%;
  
    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */
2

issue fixed…asdfasdfasdf

1 Like
3

Still not working. I am 100% sure the code is fine.

Just in case: Tried different browser and incognito.

4

Yeah it works… I somehow got it to work.

Thanks,

5

Man, it took me some time, but I figured it out: per default, there’s a typo in the variable - just add “black” and leave the typo alone.
Don’t copy/paste the whole var(–penguin-skin, black);

1 Like
6

I still can’t figure this one out! Here is my code:

.penguin-top {
top: 10%;
left: 25%;

/* change code below */
background: var(--pengiun-skin);
background: var(--penguin-skin,  black);
/* change code above */

width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;

}

.penguin-bottom {
top: 40%;
left: 23.5%;

/* change code below */
background: var(--pengiun-skin);
background: var(--penguin-skin,  black);
/* change code above */

What am I doing wrong?

1 Like
7

Could you please let me know what was the resolution?

8

I just reset the entire challenge & it finally worked. I’m not sure why it didn’t work at first.

1 Like
9

That worked ! Resetting the code and assigning the fallback value helped.

10

Let’s me explain.
This lesson’s mean if your code was fail by typo then color fallback black. Like this:
Correctly typo is penguin, wrong typo is pengiun (just explain - don’t care & leave it - Because they want to be wrong.)
You just enter “, black” into var(…).
That’s all.

1 Like
11

Yup exactly…penguin is misspelled on purpose in the challenge to demonstrate how the default color would take over and work instead.