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>


No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.