Variables in CSS are used to add custom property values to your web page. Set a custom name of the property and set value for it.
You can try to run the following code to implement variables in CSS to change the background and text color
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--my-bg-color: blue;
--my-color: white;
}
#demo {
background-color: var(--my-bg-color);
color: var(--my-color);
}
</style>
</head>
<body>
<h1>Heading One</h1>
<div id = "demo">This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
<br>
</body>
</html>