Logic: Basic CSS: Change a variable for a specific area

HTML-CSS
1

Hi,

I am doing this lesson and just don’t understand the logic here.

<style>
  :root {
    --penguin-skin: gray;
    --penguin-belly: pink;
    --penguin-beak: orange;
  }
  
  body {
    background: var(--penguin-belly, #c6faf1);
  }
  
  .penguin {
    
    /* add code below */
    --penguin-belly: white;
    /* add code above */
    
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

How does the code know to make just the penguin’s belly white when adding the variable: --penguin-belly: white; to the .penguin element?

My initial thought would be to do something with the .belly element as opposed to the .penguin element.

.belly {
    top: 60%;
    left: 2.5%;
    background: var(--penguin-belly, pink);
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }

I’m just confused because I thought that the variable --penguin-belly in the :root element needs to reference something. So, how does adding just penguin-skin or penguin-belly specify that only the skin or the belly is specified?

Just wanted to understand the logic!

Thanks in advance

2

just change the values or color name to see some changes . this basically teaches how to use width length and color and not more just proceed to further lessons .

3

if you check the html elements, everything that uses the --penguin-belly variable is inside the .penguin element, so they inherit the value of the variable from the parent element

4

@ilenia

But what I’m confused about is how only the belly of the penguin is changed when adding the --penguin-belly to the .penguin element.

How does the code know to do this?

For example:

.right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, pink);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

I get that the background is referencing --penguin-belly which makes the background color pink. But why do we only need to add --penguin-belly in the .penguin element for it to automatically change the belly and the only the belly?

Not sure if I’m explaining this right so let me know if it’s unclear.

5

Okay, I guess I’ll just move on. I just had a quick question though:

Why don’t the variables in the :root have a property like CSS classes? For example, why does --penguin-skin: gray; not have a property like this: color: gray;?

7

--penguin-belly is a variable, the code doesn’t recognise the name as being just for the belly element, the color stored in the variable, in this case white, is used whenever the variable is called

you do --penguin-skin: gray; so that in many places you can do color: var(--penguin-skin); and in this way all those things are the same color, and if you want to change the colors of all those things (maybe you a different specific shade of gray like #333) you can just change the color in the variable

It depends on where --penguin-belly is used, if you check those places that change color are only those where that variable is referenced, and before the color used would have been nothing or the fallback (when you write var(--penguin-belly, pink) the second thing in the parenthesis, in this case pink is the thing used if the variable doesn’t have a valid value)

1 Like
8

@ilenia Oh I understand! That makes sense, thank you so much for explaining that.

Just had one more question then:

Why don’t the variables in the :root have a property like CSS classes? For example, why does --penguin-skin: gray; not have a property like this: color: gray; ?

Is it because variables are just for changing colors?

9

They just hold values, you can for example have three css variables in your website, --main, --secondary and --tertiary and use those variables to color all the website. You can then decide you want a different palette, and at that point you can just change those three variable and not the many places you used them

Variables are not just for changing color, can be used to hold any value, like dimensions, font family etc, whatever could be the value of a css property