Using CSS Variables

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