_examples-css-variables/1.2.2-new-css-way-variables.html

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1.2.2-new-css-way-variables.html</title>

    <link rel="stylesheet" href="./1.2.2-style-new-css-way-variables.css">
  
  </head>

  <body>
    
    <div class="container">

      <div class="sub-container">

        <h1 class="heading-text" id="mainHeadingText">1.2 What are CSS Variables</h1>

        <p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>

        <h2 class="subheading-text" id="subHeadingText">1.2 - 1.2.2 new css way variables</h2>

        <ul>
          <li>CSS Variables look like a simple regular CSS properties with an extra `dashes --` before them: `--variable-name: value;` e.g., `--base-font: Arial;`</li>
          <li>CSS variables set/defined/declared using custom property notation (e.g., `--base-color: black;`) and are accessed/called using the `var() function` (e.g., `background-color: var(--base-color);`).</li>
          <li>CSS Variables are also known as "Custom Properties", simply we can say `CSS Variables == Custom Properties`</li>
          <li>`Custom properties sometimes also referred to as CSS variables or Cascading variables` are nothing but entities that contain specific values to be reused/accessed throughout a document and saves lots of time while editing CSS properties and values in large/huge websites</li>
          <li>`CSS variables` are very handy and useful when we are working with huge/large websites with repetitive properties and styles (many properties like color,font-size, margins etc)</li>
          <li>By using `CSS variables`  In case of any `global change needed` through-out the application, instead of chaging each and every occurance/instance its advisable to change the `single variable` so it will reflect globally</li>
          <li>Custom properties do follow CSS mechanism/principles and so they cascade, inherit their value from their parent. </li>
          <li>CSS variables can be defined with or as Global or Local scope</li>
        </ul>

      </div>

    </div>
  
  </body>

</html>