Try it Live - Scope of CSS Variable

<!DOCTYPE html>
<html>
  <head>
    <style>      
     * {
      --val-font-size: 30px;
      --val-font-color: orange;
      }
      
     :root {
      --val-font-size: 15px;
      --val-font-color: green;
      --val-border:1px solid gray;
      --val-list-style-type: circle;
     }
      
     body {
      --val-font-size: 50px;
      --val-font-color: yellow;
      --val-border:4px solid green; 
     }
      
     html {
      --val-font-size: 30px;
      --val-font-color: purple;
      --val-border:1px solid blue;
      --val-list-style-type: square; 
     }      
      
     ul {
      font-size:var(--val-font-size, 30px);
      color:var(--val-font-color, blue);
      border:var(--val-border, aqua);
      list-style-type:var(--val-list-style-type);
     }      
      
     #id2 {
      --val-font-size: 40px;
      --val-font-color: blue;
      }      
	  
    </style>
  </head>
  <body>
   <p>1. --val-font-size and --val-font-color is defined at id2 as well as other 
     selectors but the value within the id selector is displayed in output</p>
   <p>2. --val-font-size and --val-font-color is defined at * selector as well as
     :root, body selector & html selector but value at * selector is in output</p>
   <p>3. --val-border is defined at :root level as well as the body selector
      but the value at body selector is displayed in the output</p>
   <p>4. --val-list-style-type is defined at :root level as well as the html 
      selector but the value at :root level is displayed in the output</p>        
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Java</li>
    </ul>   
    <ul id="id2">
      <li>HTML</li>
      <li>CSS</li>
      <li>Java</li>
    </ul>    
  </body>
</html>