@coder 1070
CSS3 VARIABLES
2021-11-17 00:15 · 2 min read
A var() function is used to declare CSS variables. Variables are helpful in designing web pages. If we use a similar value on multiple places then it is good to declare a CSS 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 global scope, it must 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>
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>
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
