The var() function in CSS is used to add custom property values to your web page. Set a custom name of the property and set value for it.
Example
You can try to run the following code to implement var() function
<!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>