The var() Function

by Bilal AFSAR

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/pic2.jpg"></script>
<h1>The var() Function</h1>

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>

CSS

:root {
    --main-bg-color: red;    
}

#div1 {
    /* background-color: var(--main-bg-color); */
    background-image: url(pic2.jpg)
    padding: 5px;  
    height:100px;
}

#div2 {
    background-color: var(--main-bg-color);
    padding: 5px;
}

#div3 {
    background-color: var(--main-bg-color);
    padding: 5px;
}