Here i have explained how to use css variables.
Step 1: Add below HTML Markup inside body tag.
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<div class="block2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<div class="block3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
Step 2: Add the below CSS with style tag.
:root {
--bg-color-primary: gray;
--bg-color-secondary: red;
--main-txt-color: white;
--main-padding: 15px;
--mt: 15px;
}
.block {
background-color: var(--bg-color-primary);
color: var(--main-txt-color);
padding: var(--main-padding);
margin-top: var(--mt);
}
.block2 {
background-color: var(--bg-color-secondary);
color: var(--main-txt-color);
padding: var(--main-padding);
margin-top: var(--mt);
}
.block3 {
background-color: var(--bg-color-primary);
color: var(--main-txt-color);
padding: var(--main-padding);
margin-top: var(--mt);
}
Screenshot