The Developer Brains


CSS3 VARIABLES

Web Designing | Web Development


SEE MORE














</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
























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>
		
		


















Function which is used to declare a CSS variable

1. let()
2. variable()
3. var()




Check Now



CSS3 QUIZ







Next: CSS3 Shapes


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers