Variables in CSS


Variables in CSS are used to add custom property values to your web page. Set a custom name of the property and set value for it.

You can try to run the following code to implement variables in CSS to change the background and text color

Example

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>

Updated on: 24-Jun-2020

86 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements