Usage of var() CSS function

CSS Web Development Front End Technology

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

Live Demo

<!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>