CSS Variables - An introduction to CSS custom properties

CSS variables (also known as CSS Custom Properties) are a really powerful—and underused—feature available in CSS today.

This video is the start of a deep dive CSS variables tutorial series. In this video, I look at the very basics of them. From what CSS variables are and why they are awesome, as well as how to write and use them.

Later on in this series, we'll also look at how to create fallbacks for older browsers, as well as how JavaScript and CSS variables are awesome, and much more.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[adelsimohamed]

coming from The Odin Project curriculum, your videos all awesome thank u.

[porobertdev]

If you're here from The Odin Project, the only new thing you'll learn is that you can redefine the custom properties (variables) that you make in specific selectors, but isn't really recommended.

Still, watching the whole video and doing some practice helps. And besides, you already know by now how amazing Kevin's videos are 🙂

[jesseliverless]

I wish good luck to my fellow The Odin Project students, we need to hang in there!

[TinyMaths]

Just came across this in the Freecode curriculum; was confusing the hell out of me. You've made it so clear. Thank you!

[matthiasgustavpan]

I love your content and the way you present it is just wonderful. Clear, concise, lucid, always with smart use cases in mind, perfectly paced, and on top of that you have a warm, soothing voice. I think everyone wishes they could have their favorite audiobook read to them by you. Chapeau!

[ga]

Kevin, Thank you so much for taking the time to build this beautiful tutorial, its been really appreciated.

[johnnyholiday]

You deliver and explain the concepts so well, great personality and chilled dude, Thank you so much for these videos!!

[adamgriffiths]

Great tutorials for beginners to web development like me. Thank you!

[creeksidecollaborative]

Been struggling to understand this, and you made it SO SIMPLE. Thank you!

[cs_devel]

You can use CSS variables to switch colors during runtime as by themes. You only need one css file with the variables and link it first before all other css files and the variables are available inside the other css files. So you can switch to another theme by switching to another css file with new color definitions for the same variables.

[lloydthomas]

I haven't tried using variables yet. This will be next on my todo's . Thank you for the simple explanation .

[sovereignlivingsoul]

excellent video once again, i like how you bring the quirks into your descriptions, i just started designing a new site, so i am going back to your videos to help structure things early to reduce any editing i may need to do later.

[RS-nzrn]

Now I can use css variable comfortably for my 1st project. Thanks.

[disenoydesarrollowebpregal]

Siempre tan claro y simple! Tus videos son lo más!

[ga]

I can not believe that I did not see your CSS VARIABLES tutorial until just yesterday, it's very helpful and you did cover it beautifully, Thank a million.. We owe you man.

[catherineflores]

Old, but still good to help brush up on variables. Thanks for all the great content!

[shankerm]

Today I realised I knew too little abt css. Very excited to discover new knowledge from your videos. Pls go on making videos. We developers need great tutors like you.

[Aliante]

Very helpful!!! Showing multiple examples and ways it can go wrong helps me out a lot

[RameenFallschirmjager]

Your great tutorial to make a portfolio brought me here! You are very insightful, I learnt a lot from you.

[SephOrtha]

man i like your videos dude, great articulation of concepts and comfortable presentations.. its always a pleasure learning something from you.