Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

CSS Variables


CSS Variables:-


The CSS Custom Properties(Variables) in HTML page.

The variable name must be within the two dashes (--) and is case sensitive!
The syntax of the var() function is as follows:
The var() function can be using for insert the value of a custom property in CSS and HTML page.

var(custom name, value)



<style>
:root {
  --main-bg-color: blue;  
}

#a {
  background-color: var(--main-bg-color);
  padding: 5px;  
}

#b {
  background-color: var(--main-bg-color);
  padding: 5px;
}

#c {
  background-color: var(--main-bg-color);
  padding: 5px;
}
</style>


<h1>The var() Function</h1>

<div id="a">Code family.</div>
<br>

<div id="b">Code family.</div>
<br>

<div id="c">Code family.</div>

The following example is using the var() function

<style>
:root {
  --main-bg-color: blue;
  --main-txt-color: white;  
  --main-padding: 15px;  
}

#a {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);  
  padding: var(--main-padding);
}

#b {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#c {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
</style>


<h1>The var() Function in code family</h1>



<div id="a">Code family.</div>
<br>

<div id="b">Code family.</div>
<br>

<div id="c">Code family.</div>



More Topics