DEV Community

Cover image for CSS variable first chapter!
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Updated on

CSS variable first chapter!

Hey, there coding people,

As you might know, I have started learning CSS variables from scrimba and this is my first post about CSS variables.

I this post you can see I have used CSS variable for this basic web page.

First of all, you have to initialize your CSS variable in the global scope which we can use anywhere in our entire project.

Global scope

:root
{
    --black-color: #000;
}
Enter fullscreen mode Exit fullscreen mode

use it like this

.selector-name
{
    color: var(--black-color);
}
Enter fullscreen mode Exit fullscreen mode

Check out this codepen for more understanding.

Top comments (4)

Collapse
 
devlorenzo profile image
DevLorenzo • Edited

A typo: - Use it like this -

.seleector

You doubled the "e"

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Ohh yes sorry for the silly mistake, check once I have changed it. and thanks for the comment :)

Collapse
 
devlorenzo profile image
DevLorenzo

Yes, I'll wait for the second chapter!

Thread Thread
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Of course ๐Ÿ˜Š