Page Title

What is Variables ?

Variables are names we give to memory which store data which are used to store values in a computer program.

What are the types of variables in Css ?

There are two types of variables in Css

global
local

click on the button to know more

what is global and local variable ?

Global variable can be used anywhere inside the document .

local variables can't be used anywhere in the document , a local variable is a variable that is given local scope

What is the syntax for Variable in Css ?

Syntax goes like this 👇👇

:Root{ --Variable-Name: properties; }

The :root selector allows you to target the highest-level element in the DOM

What are the rules use to declare variables ?

Using 2 dashes( --) in starting is very important*
using var() inserts the value of custom property
Custom property Names are Case sensitive as :
--My-var and --my-var are different

Example codes :

1st

:Root{
--Main-color:red;
--text-color:blue;
} body{
background:var(--Main-color);
color:var(--text-color);
}

2nd

:Root{
--text-color:blue;
--text-transform:uppercase;
--size-font:100px; }
h1{
color:var(--text-color);
text-transform:var(--text-transform);
font-size:var(--size-font); }

3rd

html

div id="test">

Css

@keyframes test{
from{
--one: 0;
}
to{
--one: 1;
}
}
#test{
width: 100px;
height: 200px;
background-color: black;
animation: test 1s infinite;
}
#test :nth-child(1){
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
}

sign in

links used ::

W3school
Mozilla

Css Variables