DEV Community

Cover image for CSS variable chapter two "how to override CSS variable" ๐Ÿคนโ€โ™‚๏ธ
Atul Prajapati
Atul Prajapati

Posted on • Updated on

CSS variable chapter two "how to override CSS variable" ๐Ÿคนโ€โ™‚๏ธ

Hello dear folks ๐Ÿ˜‰

In the last CSS variable chapter we have learned about how to create CSS variables and use them.

In this post, we'll learn about "how to overriding variables"

In some cases, we need to make changes in CSS variable values at a certain level of our project, that's why we use this override feature.

Now imagine that we want to change our item card's headline and button color, so we'll use this code in our item selector.

.item {
    --red-color: green;
    background: var(--project-card-bg);
}
Enter fullscreen mode Exit fullscreen mode

To clear your confusion look at this codepen project ๐Ÿ‘‡

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

If you have any questions about CSS override you can comment below, i will reply asap ;)

Discussion (0)