Usage of var() CSS function

CSSWeb DevelopmentFront 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>
raja
Published on 31-May-2018 10:49:25
Advertisements