Question about lesson: Basic CSS: Cascading CSS variables

I’m working through the free lessons.
I don’t understand some of the explanations, but am working my way through, using the videos when I can’t solve the lesson. So I’m at: Basic CSS: Cascading CSS variables.
https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables
I don’t understand in the video when he says the reason why the variables work in other parts of the penguin is because everything is within .penguin element. The .-right cheek, the .left-cheek etc. Each of the css styles are separated by the { }. I guess I don’t understand the basics. But I wish the video would be more specific as to logic of this CSS lesson. How are they within? Sorry if this is basic, and I should understand. But I don’t. :frowning:

When he says “penguin element” he is talking abou the html element with the class penguin. If you scroll down to the html portion of that code, you’ll see:

<div class="penguin">
  <div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>

Notice how all of the elements for the parts of the penguin are inside the .penguin element? When elements are nested, they will inherit the styles of their parents.

P.S.: All the lessons are free :smiley:

Thanks, I get it, but I find all of this so hard to retain. Going to do all the HTML and CSS lessons again. Just a struggle for me at this point. I understand it mostly when working through lessons. Just doesn’t sink in. I know it is free.

Honestly, I’d recommend that you keep moving forward instead of going back. It’s normal to need to encounter something multiple times and in multiple ways before you really feel like you get it. The projects are the time when you’ll learn the most.

Thanks for the push, I’m moving forward. This isn’t totally new to me, I’m just trying to refresh my knowledge and hopefully it will sink in. I haven’t done a project in a long time. I coded a page/template. that I was supposed to integrate into a CMS.