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

atulcodex

๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on March 11, 2021

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 ;)

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About