DEV Community

Cover image for CSS variable first chapter!
🚩 Atul Prajapati 🇮🇳
🚩 Atul Prajapati 🇮🇳

Posted on Edited 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;
}
🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน 🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน

use it like this

.selector-name
{
    color: var(--black-color);
}
🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน 🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน

Check out this codepen for more understanding.

Top comments (4)

🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน
 
lorenzoblog profile image
Lorenzo • • Edited

A typo: - Use it like this -

.seleector

You doubled the "e"

🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

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

🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน
 
lorenzoblog profile image
Lorenzo •

Yes, I'll wait for the second chapter!

🔥 ข่าวด่วน: atulcodex/css variable first chapter gj - ประเด็นร้อน Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

Of course 😊