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.
They are very similar to Sass variables if you have any experience with them, but they actually have more functionality than variables from preprocessors! (If you've never heard of Sass, you can read more about it here: sass-lang.com/)
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.
Checkout the CodePen I was using: codepen.io/kevinpowell/pen/Ky...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@adelsimohamed7467]

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

[@seimataniguchi8654]

Same here!

[@Jakub-mx7oe]

same

[@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 🙂

[@Soldknight324]

Although reading is good, I'm a really visual guy. Always like when TOP gives a link to a video that just goes over everything again 😂

[@porobertdev]

@@Soldknight324 I think I watched every video from 'additional resources' 😂. Both, reading and watching helps me. Also, the scrimba videos that TOP linked at foundations were 🔥 Where are you so far now in the curriculum? I'm at the admin dashboard.

[@chimpankie1954]

@@Soldknight324 Yeah I like the video summary too. I understand why, but man it kills me when you read a load of the resources and then you've got to go read the exhaustive MDN reference page that goes over EVERYTHING.

[@vigilancebrandon3888]

👋

[@thiagobarbieri7476]

​@@chimpankie1954True, that is the worst part tbh. I really like when they type the examples in the TOP directly and don't link to MDN articles. The introduction to HTML and CSS were great, but the beginning of JS and the intermediary HTML/CSS are a PAIN. It's reading after reading and no exercises/projects in between

[@jesseliverless9811]

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

[@moiseslopez1929]

I'm going through TOP too. Have you reached your goals yet how is the progress.

[@peteryakubu3434]

@@moiseslopez1929 what is your current progress right now

[@ga7853]

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

[@KevinPowell]

No problem Gamal, glad you liked it :)

[@johnnyholiday1150]

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

[@creeksidecollaborative2830]

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

[@TinyMaths]

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

[@creeksidecollaborative2830]

Ha! Freecode is exactly how I ended up at this video. I love Freecode, but that lesson made NO sense.

[@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!

[@porobertdev]

Couldn't say it better! 👍

[@lloydthomas4481]

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

[@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.

[@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.

[@ga7853]

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.

[@KevinPowell]

Glad it helped (and that you found it :D)!

[@catherineflores7106]

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

[@shankerm3959]

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.

[@KevinPowell]

So glad to have helped Shanker!

[@adamgriffiths96]

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

[@KevinPowell]

Thanks Adam, glad they're of help 👍

[@codingwalnuthindi6984]

@@KevinPowell Your style of teaching is very helpful.

[@MrAndi1281]

the tutorial is great but the background white is a bit too hard on the eyes in my opinion!

[@Aliante4]

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.

[@clevermissfox]

You’re a great teacher, run into a lot of videos that are produced beautifully but the narrator or creator is not concise or clearly explaining. Thank you for sharing your time and knowledge!

[@disenoydesarrollowebpregal1902]

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

[@abeldrecke2819]

Hi Kevin Great video, wish a lot of others were as clear and concise as you Very much appreciated

[@KevinPowell]

Thanks a lot for the kind words Abel!

[@a2ulthakur]

Thank you so much .. i absolutely loved this and it helped me to learn something new. I love the way you have explained everything. Please keep up the good work and i am following all your tutorials.

[@HostDotPromo]

Thanks Kevin. Gonna start using this on small projects. Glad CSS is innovating and becoming futuristic! Sick of compiling simple stuff lol! Cheers. 😀

[@SephOrtha]

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

[@KevinPowell]

Glad you enjoy my approach!

[@venkateshanap3271]

I love this tutorial. Thank you for suggesting me to learn this when I ask queries in instagram. Thank you sir😊

[@sparky-makes8373]

Hello from TOP! Thank you for all the top notch content!

[@nasirhusain6957]

Great Videos on variables in CSS. I really enjoyed the way that you taught. Would love to more Thanks again man. Kevin Powell

[@KevinPowell]

Thanks for the kind words Nasir, and glad you liked these :)

[@dreyaknowles101]

Great video, really informative and super helpful. Keep up the good work and please keep making videos!

[@RRehanashraf]

The Odin project brings me here. Your videos are great. keep up the good work.

[@bill4824]

I have learned so much, Kevin. Thank you so much!!!

[@westfield90]

I really learnt a lot from this video. Thank you

[@RS-nz6rn]

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

[@Kaizen01395]

Thanks for sharing this video! I love your site a lot and your teaching style. Super helpful!

[@PaulNieman]

Wow it makes such sense! Thank you Kevin.

[@ulysse8182]

Thank you for your tutorieal, very clear and quick enough :)

[@yasiralnakhli7315]

how is it only 1.7K likes to the video where the viewers more than 40K when the illustration is so simple like that? thank you so much, MR. Kevin Powell, I loved CSS cause of you

[@lawrencekeeney4317]

Great video. I have been waiting for a good video on CSS variables.

[@KevinPowell]

Glad you liked it Lawrence! I've got 5 more coming out over the next two weeks that take a much deeper look at them too :D. I wanted to have part two out today, but I'm sick at the moment and was in bed really early, so I didn't have time to edit anything. Hopefully it'll be up tomorrow instead.

[@dfjama]

Great series and helpful, thanks man

[@DaggoeNinja]

Great tutorial, i didnt understand it but with your tutorial i do. Thx Kevin.

[@seemsas]

very nice. Thanks. I didn't know css provides this functionality.

[@KevinPowell]

It's still technically part of a working draft, but the browsers have all started to implement it, so that means we can start using it :D. The idea has been around for years, but it's only recently that browser support has reached a point where it's worth it, and we still have to watch out for IE :(. But I have a few videos that will take a look at dealing with older browsers.

[@ajayji1009]

You are always awesome Kewin. Just one thing, while overwriting the variables at several places, why to mention variable name, can't we just mention the color property there?

[@GR_BackingTracks]

Doing this in Continuing Education FEWD class now... Excited to see some old-school KP! My biggest takeaway: local variables override global variables, in the same way that specificity overwrites general properties.

[@hcmac100]

Thanks so much for all your wonderful work :)

[@adriennewarden8440]

Mr. Powell, I am loving this channel man...Thank you. I'm self taught and doing my best to increase my knowledge. The thing I love the most about your channel and tutorials is that you are so in love with what you do. It's a feeling I get every time I create a page, form, etc. Thanks again. You are a true treasure. P.S.: I'm considering taking you up on the Sass course. Limited budget, but I know it will be worth every penny and more. Do you have a course on JavaScript?...JavaScript has me so confused.

[@KevinPowell]

That's because JavaScript is confusing 😂. I don't have one, but I know a really good one (it's closed now, and expensive, but it's really good, learnjavascript.today but it's written, not video).

[@adriennewarden8440]

Thanks for the resource...I'll check it out...Enjoy this wonderful day.

[@adriennewarden8440]

P.S.: There's no mention of cost on the learnjavascript.today site. How much does the course cost?

[@KevinPowell]

I don't know how much it'll cost the next time he opens it up... it was north of $300 last time though, which I know can make in unaccessible for some :(

[@adriennewarden8440]

I'm going to put some pennies away for it...I've signed up for his newsletter. Thanks again.

[@sylvesterpromise3300]

You just got a new subscriber ❤️

[@Lymphater]

Thanx, Kevin.

[@alljapankaratedo]

Great video, very well put.

[@KevinPowell]

Thanks! Glad you liked it.

[@deyantopalov3697]

Hey, I just want to say that your content is amazing! Also you have a talent (or skill developed by hardworking) to explain in simple words,!!! The last one is important because some of the KZbinrs are like a mix of 500 IQ person and Eminem.. I mean some videos out there are incredibly fast paced and explain with only advance terminology, and usually the user watching is feeling no smarter than a bag of chips.. I would also love to see a "2023 Updates" in each or most of the playlist covering the topic with a short recap of the things that have been added/changed in the programming language that are related to the playlist topic. This is just a suggestion of course, I hope I do not sound ungrateful.

[@code.cracking]

thanks for your efforts

[@Jack-un5im]

The start of this video is like when Neo is first in the matrix

[@MantraMantis]

Thank you Kevin

[@unknownplayer0383]

my corner of the internet is just a little bit more awesome ! thanks to this video

[@alial-shaikhly873]

Thank you very much for this information.... problem though... I use MS expression web 4 as it is free and it does not appear to recognise the var() for some reason. It does, however, recognise the :root{} part... Any idea why and how to rectify the problem? Many thanks

[@aebek1413]

thank you kevin

[@carpediem73]

thanks, this was helpful

[@matthiasgustavpan]

Would there be a way to change to what a variable is set globally, for instance if i hover over a certain element?

[@ryaaan0751]

Thank you!

[@johndus1193]

Why didn't Kevin summon the secondary color(green) after defining it around minute 9:42 like he'd done earlier in the lesson?

[@viniciussouza6269]

Hey Kevin, I have a question. what is the difference between learning pure CSS and some library like react to build web app?

[@ritaravinsky8262]

wow. that's cool. thank you

[@alanmccall4335]

Thank you for sharing I do feel a little more confident with variables on my journey to being a coder however, I wish you showed more examples with this such as how to import across the site for example if I used it from one sheet to another for example using a "@mixin" I'm able to import many styles at once but to use it in one sheet where it isn't coded I can import it with a "@use" and then I have to type the an "@include sheetname.mixinname;" just still not clear on how to implement it effectively across my sheets

[@KevinPowell]

In this video I'm looking at CSS variables, which aren't the same as Sass/SCSS variables, which you are talking about. No name spacing or importing these. If you did have a partial scss file that had custom props in it, you wouldn't need to @use it everywhere, just make sure it's brought into your main file. I do have in-depth videos on Sass variables with @use and @forward as well

[@eepersian]

thank you very much

[@nickygello9105]

thank you sir

[@Colstonewall]

Now this is what I'm talking about! No need for pre-processors etc, etc. It's about time Native CSS did this.

[@KevinPowell]

Totally agree! It looks like, based on the CSS working drafts, there might be a lot more preprocessor stuff moving to CSS eventually as well. This is perhaps one of the best things they could bring in though. Variables are on of the reasons I had started using Sass in the first place.

[@studstud5498]

can I use css variables with @import and @font-face

[@AE-yr6mo]

What do you think about using a selector other than :root ? Would it be useful to stop global clashes etc. compared to using the shadowdom for a more modular approach?

[@KevinPowell]

I wrote an article over on CSS Tricks about how useful locally scoped custom properties can be! css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/

[@salv236]

great video thank you

[@KevinPowell]

Glad you liked it :D

[@dailymeow3283]

Hey Kevin, can i add animation to :root in css, like i put keyframs for a root variable

[@KevinPowell]

keyframes themselves, no... you can do some interesting thing with them within keyframes though, like this article looks at: css-tricks.com/using-custom-properties-to-wrangle-variations-in-keyframe-animations/ - not sure if that's what you're after though.

[@pauliebelohlavy6141]

Is there a need to learn sass or less now? Great video as always!

[@KevinPowell]

Sass (and Less) do a lot more than just variables! But this is a huge step forward for CSS.

[@hv6411]

Learning in 2023! TY🤩

[@apeyiomotobi2219]

am here now in 2024 wow

[@VideoNOLA]

Can you string Variables together in a row like this? --red: 1; --green: 2; --blue: 5; background-color: rgb(#var(--red--green--blue));

[@KevinPowell]

you'd have to do rgb(var(--red) var(--green) var(--blue));

[@nyoing]

HELP! I cannot FTLOM get CSS variables for FONT-WEIGHT to work. Other font properties DO work using custom properties. Firefox Dev inspector tells me "Best Match". When I hard-code the font weight in the selector, it works. When I encountered this with a site in development, I launched VS Code (thank you, Kevin, for convincing me to use that) and created a simple, tiny test file. Still no love. IS THERE SOMETHING I'M MISSING?

[@mateuszb4387]

do you use some tools for color palletes, or is it just skill and experience? Your colors are always top-notch. It is not that easy, espescially classy, sublte gradients are difficult for me and I don't know were to find them (besides your tuts :-)

[@KevinPowell]

For color pallets, sometimes I just do it on my own, other times I use coolors.co, at least as a starting point. I come from a design background, so I've got some experience with picking colors 😀. An awesome resource for gradients is uigradients.com

[@ashwithchandra2622]

but what is the difference between *{} and :root{}

[@philip9677]

hi does this mean we dont use sass anymore? also what is postcss, ive heard the term being used a lot

[@KevinPowell]

I still use Sass, as it does a lot more than just variables. PostCSS is something that will modify your CSS afterwards, things like auto-prefixer and a lot more postcss.org/

[@BGdev305]

What's confusing is pause at @10:48 For .intro you have --secondary-clr: green.. but you don't say color: so how does CSS automatically know you mean font color.. what if you meant for it to be border color?

[@chromosundrift]

weird, in your video that "red" isn't red compared to the rest of my computer! It's less saturated, closer towards a burnt orange.

[@KG-ck9hb]

Realistically. how often are css variables used in a job environment perspective.

[@KevinPowell]

Hard for me to say, but probably not a ton at the moment. Would be very dependent on that company, but as browser support increases (it's at 87%!) I could see them used more and more.

[@IBITZEE]

Hi "Keven welcome to my channel"... nice to meet you! ;-)

[@KevinPowell]

😊

[@cnt369]

I learned something.

[@jazzhippie3878]

You need more views. and subscribers honestly. Might just get a promotion because of you

[@sreekumarmenon]

what happens in IE 11 that does not support css variables?

[@KevinPowell]

Post CSS can help with that 👍

[@komkwam]

Or use fallbacks.

[@sreekumarmenon]

@@komkwam Isn't fallbacks code duplication , like you repeat the same line of code with a fallback hard-code value?

[@Ari-lv8nc]

We can override the values of the variables just like JS, nice.

[@erikpersson9182]

Whats the benefits of using variables instead of classes?

[@KevinPowell]

Two very different things. These are used for the values of properties.

[@hcgreier6037]

I took your exact code from Codepen into VS Code, but my page makes no columns, but stacking Whats going on here? 😵‍💫

[@thenumbersw]

nice

[@texxs01]

Granted, I don't get out much but I have never heard CSS Variables called "CSS custom properties" nor have I even seen in print until now. I googled it though and other do refer to them this way. I guess I need to get out more, damn covid...

[@user-sq3rd3gj2i]

Super!

[@KevinPowell]

Thanks!

[@ayoubdoc6166]

nice i didn't know that we can write like that in CSS

[@KevinPowell]

It's been around for a long time, but browser support is finally getting there. So useful!

[@ayoubdoc6166]

yeah thanks Kevin

[@trappedcat3615]

discovered recently you can dynamically update pseudo content with css variables using a string in a string in js: `' ${anyValue} '`

[@KevinPowell]

Never even thought of doing that, I'll have to play around with that :).

[@trappedcat3615]

Kevin Powell yah, its great for dynamic animation data -- charts, games, data oriented components, etc... Essentially any styled content that need not be selected or read by screen readers.

[@blackdeckbox]

Do you use css variables or scss variables now? So you still use scss but exclude $variables

[@KevinPowell]

I don't use scss variables anymore except in very specific situations where I need them for loops and stuff I might be throwing together.

[@blackdeckbox]

@@KevinPowell Do you put all your variables in :root? I have a lot of variables like $color1Primary, $color2Secondary, $theme2Color1Primary, $smPadding, $xsPadding, $mdPadding, $lgPadding, $xlPadding, $smMargin, etc. It seems like it is just a global property full of these variables...

[@ahmedqwbad2802]

I got it.

[@shinauri1]

On your channel, I first press like in advance, knowing 100 percent that this like will not be given in vain.

[@chrism7067]

This tought me a lot, you should doa small update. Now when writing code you can do "color: --" and it will drop down all your variables you have so you can quickly choose and it will auto type and fill the var() value. You probably know this though Kevin but for anyone who doesnt there you go.

[@princejones0077]

they should just get rid of the var() syntax and use one dash instead of two to simplify it...

[@chaoticneutral3487]

Variables are cool. Unfortunately IE doesn't support this,... and like most other cool CSS techniques.

[@Padbangers]

Good introduction, but this seems very uncomfortable compared to scss

[@KevinPowell]

Agreed, but because they are CSS properties, they aren't compiled at any point, which offers a lot of advantages over Sass variables, which we'll be seeing in videos 3 through 6 :).

[@CyberAbyss007]

Right off you start talking about SAS / SASS with no background? I search and found several mentions of SAS or SASS. Hard to tell if you are talking about syntactically awesome stylesheets or Statistical Analysis Systems. Would be nice if you had elaborated on a term. That can really mess up learning new topics.

[@KevinPowell]

Apologies for that Rick, I had assumed that if someone were looking into CSS variables that they'd been using CSS for long enough to, at the very least, be aware of Sass. We all know what happens when we make assumptions though... It was an oversight on my part, I'll add some context to the description of the video, since I can't actually make changes to the video itself at this point. Thanks for pointing it out.

[@CyberAbyss007]

I was a developer for years then dropped out and became a systems engineer then recently jumped back and missed a lot of developments in between. I'm catching up now. Thanks for the videos!

[@CyberAbyss007]

Also, sorry as I re-read my original comment. It sounds a little jerky. You were awfully kind in your reply. A credit to you. I know it takes a lot of work to produce quality content. My apologies. :-)

[@KevinPowell]

No worries at all Rick. As much as it's great for the ego when people tell me how much they like my videos, feedback that points out mistakes that I make are much more valuable. And as far as "jerky", by KZbin comment section standards, it was pretty high up on the politeness scale, lol.

[@ianiferrerlantigua8256]

hello.kevin, css variables are awosome. im a new in that.its.kinda confusing at the begin. I wondering how to declare the function hsl color in a variable? btw in the class .intro you declare the property text-align: center; i.think.it.is.a.mistake. have a good holiday

[@KevinPowell]

For hsl, I would just declare the entire thing inside the variable, --hlscolor: HLS(x,y,z); and then use that var anywhere I needed it. As for the center align on the .intro, why was it a mistake?

[@ianiferrerlantigua8256]

Thanks for.the.answer,...there.is.not.diferent.if.i.daclere.or.not.the.property.text-align.center..im.using.chrome.

[@Darival92]

like your new haircut

[@KevinPowell]

Thanks 😁

[@frosty1433]

Why not just say html{} instead of :root{}?

[@KevinPowell]

It's become the standard, and because of that Chrome optimizes custom props that are declared on the root. Other browsers might as well, but I know that Chrome does for sure.

[@frosty1433]

​@@KevinPowell I could see it playing nicer with IE11, if IE11 doesn't recognize :root, it could skip all the properties it wouldn't know what to do with. I guess it would be the path of least resistance, being mindful of browsers that don't support it.