When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading.
Because of cascading, CSS variables are often defined in the :rootelement.
You can think of the :rootelement as a container for your entire HTML document, in the same way that an htmlelement is a container for the bodyelement.
By creating your variables in :root, they will be available throughout the whole web page.
[php]
<style>
:root {
/* add code below */
–myvariable-bottom: gray;
/* add code above */
}
body {
/* var(–myvariable-bottom, fallback value);*/
background:var(–myvariable-bottom, #efccef);
}
.someclass {
top: 15%;
left: 35%;
background: var(–myvariable-bottom, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
</style>
[/php]