example2.html

<style>
   .two {
    --textcolor: red;
  }
  
  .three {
    --textcolor: blue;
  }
  
  .two {
    color : var(--textcolor);
  }
  .three {
    color : var(--textcolor);
  }
</style>

<div class="one">										
  <div class="two">
    this is red
    <div class="three">this is blue</div>
    <div class="four"> this is red color , the color is inherited from parent</div>
  </div>
</div>

index.html

<div class="red-container">
   <span> hello(green) </span>
   <span > 👋  </span>
   <span> Javascript Jeep </span>
    I am red
</div>


// css

<style >
  div {
  --txtColor : red;
}
span {
  --txtColor : blue;
}

div {
  color : var(--txtColor)
}
span {
     color : var(--txtColor)
}
</style>