Root kavramı bizi birden fazla değeri tek bir yerde tutmamızı ve her ihtiyacımız olduğunda o değişkeni çağırmamızı sağlayan bir tekniktir.

• Kullanmak için öncelikle:
• :root { } yazıyoruz ve içine değişkenlerimizi atayalım örneğin MenuGenislik adında bir değişkenimiz olsun iki tire koyuyoruz sonra değişken değerini yazıyoruz..

:root{
--MenuGenislik:  1518px;
--MenuYukseklik:  60px;
--MenuArkaplanrengi:   green;
--KalinYazi:    bold;
--MenuBorder: solid 3px grey;
--YaziOrtalama:	center;
}

• şimdide bu değişkenleri kullanalım

div{
width:var(--MenuGenislik);
height:var(--MenuYukseklik);
border:var(--MenuBorder);
background:var(--MenuArkaplanrengi);
}

p{
text-aligin:var(--YaziOrtalama);
font-weight:var(--KalinYazi);
}