CSS Variables Tutorial (CSS Custom Properties)

In this video we will dive into CSS variables, also called CSS custom properties. We can now have dynamic values in our CSS without the use of a CSS pre-processor like Sass or Less
SPONSOR:
Check out Coding Dojo - www.codingdojo.com/l/yt/tr
CODE: Codepen for this video
codepen.io/bradtraversy/pen/V...
💖 BECOME A PATRON: Show support & get perks!
/ traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
/ discord

[@vt_near]

I feel like i've learned more in the 2 weeks i've known about your channel than I did in the past 2 years without it. You build my motivation, confidence and my skills. Thank you Traversy Media-- Thanks to you, and your courses, I might actually become a programmer!

[@2breborn247]

How's it going so far?

[@jimothyus]

i watch alot of youtube and youre hands down my favorite youtuber. that says something about the quality of these videos.

[@TraversyMedia]

Thank you man, that really means a lot :)

[@jimothyus]

Traversy Media you 100% earned it. Its like you can read my mind just as i think of a question you instantly answer it in the video. I seriously appreciate you brad. Youre a wonderful human being not just for sharing coding tutorials but because you care about others and that is the greatest virtue anyone can have. Much love to you man and god bless you with the same amount of love and compassion you share with us.

[@Nikki-os2df]

Traversy Media is the best I've ever seen. He goes straight to the point. I love it! He deserves our support guys, always.

[@michaelandreuzza]

@@TraversyMedia I agree, I click on many but then I always come back here. There are many unnecessary channels that mislead incredibly. Long life to Traversy Media. You incredible teaching Brad. Have a good one. /Michael

[@cacoca79]

@@TraversyMedia where you from man?

[@romaniaplus]

Thank you, Brad! As usual, you did an amazing job! Happy New Year to you and your family!

[@xshadyz]

I'm a subscriber but haven't watched your videos in a while. Everytime I come back to your channel I always learn something new with great examples that are easy to follow! You're awesome explaining things in a way that always makes sense! And I always learn new things!

[@BlueIceAce2015]

These tutorials are simply the best, I have binged through probably 20 hours of your tutorials already. You are one of a kind. Thank you.

[@IRgEEK]

Thanks so much for going in-depth and showing how CSS variables can actually be used from JavaScript. I see great possibilities with this! Thanks for the post!

[@mathankumar7995]

What a great quality content from you mate ❤️. I'm following you for last couple of weeks and find myself motivated to learn. It's just amazing and lost of words. Keep it going and will support your work in all possible ways 🙏

[@westfield90]

I seriously learnt more from this one video than reading a whole chapter

[@ErikNonIdle]

These videos are great, Brad! They are so helpful, man. I really appreciate the depth think the presentation and pace is spot-on. Thanks!

[@jasonwelsh417]

As always, amazing tutorial! Thank you. I bought your new JS course and I can't wait to dig into it. Thanks for all the great content!

[@thomasweber1397]

Thanks Brad. Another great video. Many other youtubers would have ended their videos after 2 minutes and say “that’s it”. Just because you don’t but continue and give examples and show the advantages is the reason why your videos are as great as they are. I’ve learned a lot from your videos. Thanks for all the effort you put in your videos.

[@AntonioRibeiro-qs3fy]

A thorough explaination is exactly what we developers need...thanks Traversy Media

[@ga7853]

Thank you so much, for all these great tutorial you have been making to help people out, I enjoyed this one and understood the diff between this and the sass thanks to you.

[@johnbritolima]

Great job. The little tips and workarounds makes all the difference. Thank you for you lesson.

[@cub8083]

Your tuts are awesome Trav

[@ipokkel]

Thanks (Again) Brad. The information you continually share is priceless.

[@aleksejpetricig2500]

A very well explained video to have an idea and a practical view about CSS variables. I really apreciated it!

[@hirephpdevelopers3840]

Brad you are amazing. I have learned a lot from this tutorial.

[@clewismessina6630]

Very useful video with good examples. Thank you, Brad!

[@MartyBallard]

Great job Brad! Your videos are awesome.

[@DJGroff]

Nice work, man. Very helpful. Subscribed!

[@noelgrisham]

I didn't know about css varialbles (I thought only css preprocessors can do this) until this video. Your Udemy Angular 4 Front to Back is amazing. I found the right video tutorial for me. Keep it up brad! Thanks a lot!

[@karlchan2556]

Happy new year! Nice video!

[@karendoran3692]

Another world class awesome video Brad!!

[@user-bl1lh1xv1s]

Superbly done, thanks.

[@mohsanabbas6835]

Thanks Brad. You are awesome

[@andrewrico8321]

great video brad, well im currently writing a css framework for personal use, with the help of css variables, and i can tell you that what you just show up in this videos isn't half of what css variable can do. they are even more powerful that what we just saw in this video.

[@hindhydraulics4820]

Your dedication inspires me. Thanks a lot..

[@mannelynburgos5560]

From my curriculum, I didn't grasp the concept of using the :root selector right away, but this video explained it perfectly! Thanks

[@RockstahRolln]

YOU are the BEST, Brad! Many Thanks!

[@negeek7]

Superb explanation my friend. Thank You! :D

[@martinschackjensen1385]

Nice! Can't wait for this to become standard in all browsers!! 😊

[@HostDotPromo]

Wow this is amazing, no longer need sass for small projects then! Cheers! 🍻😀

[@garretbever]

Thank you Brad, great explaination.

[@kevinpratama1789]

Just subscribed! Great video, Nice explanations! Thanks a lot sir!

[@nethmiwelgamvila]

❤️Really advantageous tutorial

[@khamphone86]

this is a good video that taught me to have a new way to use the CSS coding. you're doing well :) happy holiday and happy new year.

[@GamingBlake2002]

Literally had no idea this existed. Great video

[@milosh996]

You make great tutorials. I'm getting email notifications about the new videos. Thank you.

[@RageBasterd]

i was waiting for this. last time you made a css\html video i was thinking of when youll do this.

[@davidasiamah2898]

Your intro video is so exciting, Long Live Traversy Media!!!

[@priyaranjan1733]

You're really freaking awesome! 😍

[@harshdevmurari007]

Excellent work...... 💚💛💙🧡💜❤️🖤 Your video explaination was in depth with full description You gained one subscriber form heart....

[@seanghay_yath]

That's great Brad!

[@JEBJOSH]

Really useful and helpful. Thank you!!!

[@davidshimbi]

Thank You so much! Happy new to You!

[@candacejune416]

thanks, this really helped!!

[@herbertk9266]

Awesome as always

[@phildavies3095]

Hi Brad, Thanks for a awesome video!! Keep them coming man. Phil

[@MenAtWorkMedia22]

Thanks, Brad!

[@Owenizedd]

Just a quick question, the setProperty syntax, is that changing the css variable value? Or make it inline style?

[@nohael-hindy8972]

Very useful, thank you

[@HasithaSameeraNova]

Very helpful thanks for sharing.. cheers!!!!

[@vadhub]

Wow, css vars are totally going to change my workflow (for the better).

[@andreitanasa3106]

You're the best. Thank you for everything....

[@TraversyMedia]

You are very welcome, thanks for watching :)

[@BucurIonNiculae]

True, the best youtuber for me to...

[@iamreg1965]

Sweet stuff Brad. In my view the future tastes VANILLA.

[@naruto58136]

this is awesome thanks

[@retiar2111]

HQ content as always! didnt know this was possible o.o TY BRADD

[@__greg__]

This is great!

[@shekharaakula6233]

Wonderful video!!

[@metroid557]

CSS just got a whole lot more fun!

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

[@SoberStones]

Thank you so much - I am following along to another video who is is using scss files - mine doesn't seem to want to work, so I am using CSSS. thank you so much - I could not figure it out on my own!!!

[@kennyakins3536]

Nice tutorial, on VS code, the fastest way is to type - - when assigning the variable and it would show all your variables and and just enter to select the variable and it would automatically add the var (variable), instead of var().then select variable.

[@user-vj3cu3wv9l]

the best teacher

[@JohnEthan777]

Can the fallbacks used in 18:16 be used for older browsers that don't support CSS variables? They do take away from the maintainability convenience so wondering what their purpose is otherwise.

[@Tech-hm7vr]

Thanks so much sir ji 😍

[@ivoalvieira]

Hi Brad, thank you for the video! Just a wee doubt, regarding your playlists. Do you place the videos in each playlist in the order that you think someone should follow, in a sort of logical progress level or order, or the most recent video is just added to the bottom of the playlist and you didn't planned its order?

[@rahulvanmali1406]

Thank you for educating us.. Please make a video on animation with angular

[@shozdott]

what did you use to make intro logo etc?

[@MarkoMelko]

This is super clean :) Brad, could you build video set about Timed events like Node Schedule & Cron like jobs. In cases i.e. where you need to get data (by time/date) from third party API and but it to app's db.

[@hiteshchoudhary3412]

Thanks Brad

[@pesiok]

Great tutorial! Were you thinking about doing docker crash course with node.js examples?

[@muthuhari8875]

Hi Brad , please do symfony4

[@richardmonne7212]

cool video !

[@MrVoidfull]

Thank you! Nothing similar to mixins in CSS3 yet? I would assume we will see those at some point into the future as well. I know you can just enumerate the classes in css and apply a certain set of styles to a bunch of classes at once, then apply other styles separately further down, but SASS - like mixins would give us a bit more freedom.

[@jamesequanimity9963]

Hi I've watch this just today as of 2019 and the grid-gap already works even without the calc. Just a heads up.

[@Albshr77]

Great video

[@rainerschaa269]

thank you for this video. is there a way to read (and also modify) the variable directly per script?

[@rainerschaa269]

here is the answer: read the initial style (my value is '--c1'): getComputedStyle(document.body).getPropertyValue('--c1') you can set the value dynamic: document.documentElement.style.setProperty('--c1', '#0000ff') then you can read the value with: getComputedStyle(document.body).getPropertyValue('--c1') or with: document.documentElement.style.getPropertyValue('--c1')

[@visitviewnepal3851]

Hey there, my these two vars doesn't get work out. [ background-color: var(--main--bg-color); color: var(--main-txt-color); ]. Waiting for you suggestions.

[@jaganPuram]

Hi..Brad...Thanks for doing this job....Could you tell us ..What's major advantage of using CSS variables...?

[@yutao1982]

great! thanks!

[@mrdoner3451]

I've been using this for months without realizing it's native to css3. Has browser support only recently become good enough so that we can start using this?

[@nguyenluongtrungk17dn71]

thank you so much

[@Oswee]

Can i use calc() with variables? Lets say... i have variable ---size: 40px. And i want to set it for some element to be 2px less without creating new variable. something like - height: calc(var(--size) - 2px);

[@SuryakantUbhe]

Thank you.. its amazing..but i tried using class.. only apply 1st class not same another class.. what i do ?

[@sirmonke]

is it possible to put these variables in to a seperate file? thx

[@RafaelaSilva-ww6ct]

I am just off downloading VS Code now, cause brackets doesn’t work with costom properties. Should I change browser as well? does anyone know what browser is best please?

[@studstud5498]

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

[@TheRiyam-y23]

thanx

[@angelasavino5244]

I have a question: if you change the color of the header background through javascript, there is no way I can catch this change and fix it again through css? Another thing: If you make changes through javascript, which document prevailes then as for changes and modifications, css javascript, html?? Thanks and congrats for contents

[@leslieaikpe7762]

Hello!! Traversy I'm 19 years old and new in programming. I appreciate everything you do I am love soo much web development and i want to tell you one things...can you make beautiful count down clock which contain( years,date,weeks,day,hours,minutes and second) in a few tutorials ? please please... RÉPONDRE

[@rijalefendi6465]

hi Brad, you provide your full stack web course on eduonix. why dont you do the same thing on Udemy as well? i can't buy it on eduonix because i dont have paypal/credit card. thanks, brad.

[@PraveenKumar-pw9kq]

Hey brad can you please make a video on Three.js using angular 5.

[@SuryakantUbhe]

querySelector apply only one time ? or one class ?

[@christiangyaban9666]

thank u very much

[@ronyahmed320]

coding dojo maybe good, but Traversey Media is best of all... :)

[@techtipsuk]

For me one of the most value aspects of using a pre processor is the ability to split my files down into separate partials for easy organisation.

[@RameenFallschirmjager]

Ok, we have css variable and sass gives us variables too. Which one we should us?

[@ThePari7]

thankyou