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

Updated on: 04-Jul-2020

99 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements