</VARIABLE DECLARATION>

A var() function is used to declare CSS variables. Variables are helpful in designing we pages. If we use similar value on multiple places then it is good to declare a CSS variable.

SEE MORE

Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

Declaration of a CSS3 variable?

How to declare a CSS variable?

It's very easy to declare a CSS3 variable. A var() function is used to declare a CSS variable. Here we will learn to declare variables.

Using :root selector
We use root selector to declare a globle scope, it must be begin with 2 dashed (--)

Syntax
Var(variable_name, value);
Variable name is a required field.
Value: optional


<style>
	/*declare a css variable*/
:root{
	--main-color-value:green;
}
div{
	background-color:var(--main-color-value);
}
</style>


	

<head>
	<style>
	/*declare a css variable*/
		:root{
			--main-color-value:green;
		}
		div{
			width:100px;
			height:100px;
			background-color:var(--main-color-value);
		}
	</style>
</head>

<body>
	<div></div>

</body>

Try it Yourself

some other examples of CSS3 variable declaration.

		
<style>
/*padding*/
		:root{
			--tdb-padding:10px;
			--tab-width:100px;
		}
		div{
			width:var(--tab-width);
			height:100px;
			padding:(--tab-padding)
		}
</style>