Usage of var() CSS function

CSSWeb DevelopmentFront End Technology

<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>
raja
Updated on 04-Jul-2020 07:03:47

Advertisements