CSS Variables

CSS Variable function is the define in version CSS3. We can create variable for the every property. We define variable in the main :root or the body section. Also define in the parent element. CSS variable fallback: if not called color from the parent element then it will call fallback color as mean inline style.

CSS Code:

 <style>

        :root {

            --mainBackgroundColor: #eee;

            --colorText: #333;   

            --border: 1px solid #ccc;   

            --padd:15px;

            --backContainer : #555;

            --colorContainerText: #fff;

            --greenFallBack : green;

        }

        .anyTest1 {

            border: var(--border);

            background: var(--backContainer);

            color: var(--colorContainerText);

            color: var(--colorContainerText, red);/* fallback: example */

            padding: var(--padd);

        }

        header {

            background: var(--mainBackgroundColor);

            color: var(--colorText);

            padding: var(--padd);

        }

        footer {

            background: var(--mainBackgroundColor);

            color: var(--colorText);

            padding: var(--padd);

        }

        </style>

HTML Code: 

<header><h2>Header</h2></header>

        <div class="anyTest1">

            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen

            book.

        </div>

        <footer>footer text</footer>