Usage of var() CSS function



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>
karthikeya Boyini
karthikeya Boyini

I love programming (: That's all I know


Advertisements