DEV Community

Cover image for CSS variable chapter three "local variable" ๐Ÿ˜ฎ
Atul Prajapati
Atul Prajapati

Posted on • Updated on

CSS variable chapter three "local variable" ๐Ÿ˜ฎ

Hello my dear friends

In the last DEV post, we have learned about "CSS override"

In this DEV post, we'll learn about CSS local variable, it means which is not :root global variable :)

CSS local variable is used to make changes locally at some specific section of the web pages.

Aaaaaab, Imagine like we want to change our navbar colour only by a local variable. So to do this we have to create a local variable for the navbar like this.

#navbar {
    --nav-green: green;
}
Enter fullscreen mode Exit fullscreen mode

And use like this

#navbar a {
    color: var(--nav-green);
}
Enter fullscreen mode Exit fullscreen mode

Note: keep in mind that we can use this variable only of navbar means for local.

To clear your all confusions play around with this codepen project.

Ok, that's it for this DEV post and in the next DEV post, we will learn about "theming" in the CSS variable.

If you have any questions or doubts about CSS local variable you can comment below, maybe we can learn something new from your doubts.

Discussion (0)