Usage of var() CSS function

---

<p>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.</p><h2>Example</h2><p>You can try to run the following code to implement var() function</p><p><a class="demo" href="http://tpcg.io/UGuL28" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:root { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --my-bg-color: blue; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --my-color: white; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#demo { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: var(--my-bg-color); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: var(--my-color); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Heading One&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;div id = &quot;demo&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is demo text. This is demo text. This is demo text. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is demo text. This is demo text. This is demo text. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is demo text. This is demo text. This is demo text. &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;br&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Usage of attr() CSS function
• Usage of calc() CSS function
• Usage of rgb() CSS function
• Usage of rgba() CSS function
• Usage of hsl() CSS function
• Usage of hsla() CSS function
• Usage of linear-gradient() CSS function
• Usage of radial-gradient() CSS function
• Usage of cubic-bezier() CSS function
• Usage of CSS transition-timing-function property
• Usage of repeating-linear-gradient() CSS function
• Usage of repeating-radial-gradient() CSS function
• Usage of CSS visibility:hidden;
• Usage of CSS visibility:visible;
• Usage of CSS visibility property