CSS Variables Tutorial #4 - CSS Variables & JavaScript

Hey gang, in this CSS variables tutorial I'll show you how we can interact with our custom properties using JavaScript. This is yet another advantage that CSS variables have over SASS or LESS variables.

----- COURSE LINKS:

======== Other Tutorials =========

----- NODE.JS TUTORIALS

----- MONGODB TUTORIALS

======== Social Links ==========

[psingh]

The way, the art of your explaining the concepts is amazing.

[carlosfernando]

thanks net ninja, you are always so clear and precise

[AudioJunkie]

Another fantastic series. Thank you very much for posting. Your teaching style is very clear and easy to follow. Thank you!

[malcolmcolindixon]

Thanks Shaun, using CSS variables in Javascript was really insightful. I thought it was best practice to not use inline styles, i.e. keep content and styling separate, so I created the span background style in the styles.css using nth-child(). So, when I came to the Javascript section it failed, then I understood why you did it that way, but undeterred I investigated how to maintain that separation and used getComputedStyle() function instead, therefore learning more in the process. More of your CSS courses to do before tackling your Udemy Javascript course I recently purchased. You are by far the best teacher I have come across, which shows as I bought your course and I'm a total skinflint and considering there is that much free web content anyway shows how highly I regard your courses.

[ritchamonteiro]

Very clear, thank you for your tutorials, I'm learning much better here then at school

[lazalaza]

Absolutely brilliant! Can't wait to proceed with the JS series. I don't know if it has anything to do with the fact I'd already covered many of these topics, but your explanations make perfect sense - like 10ish minutes of pure awesomeness!

[ridl]

I was familiar with CSS Variables, but still learned something new. Lol. So now I have feelings that I need to watch all of your series from the very first one :D

[Biggs]

Seriously the best tutorials about web development on the net.

[mceu]

This last video blew my mind, because I know next-to-no JS; but I felt like it was extremely clear, and that I would have understood it if I did know JS. WHEN I do, I'll come back and watch it again! Personal goal: set...

Seriously, this video series was incredibly helpful. You are clear, speak at a good, measured pace and are enthusiastic about a potentially dry subject. :-)

I had realised that I need to learn CSS variables. However, I felt they were beyond my grasp (and that I should just 'replace all' when I want to change multiple things). These videos have taught me how to use them, and I leave here a happy person.

Actually, I leave in search of your JS/DOM Videos...

Thanks so much!
Matthew

[DanieleTrapani]

Thank you! I can see now how css variables are underrated!

[LoveisHell]

Thank you so much. I've watched most of your tutorials and learned so much. Please make more React, Typescript courses if possible

[SauravKumar-vjks]

great sir your explanation of the concepts is Love you sir

[cagataysert]

thank you so much ninja, you are an awesome teacher.. I learn a lot from you man.. I really apprecite it. Cheers from Turkey.

[jonathanjohn]

love watching your guides! keep it up.

[srinivasreddydanda]

Thanks for the playlist series on CSS Variables man :)

[brianwekesa]

I love the net Ninja, and its genuine unless u've never tested Ninjas tutorials

[ss_space]

thanks a lot, man, you great in explaining ..I will move to your next courses for sass, js ..etc, we need a good tutorial for flexbox and advanced css animation course ..keep going

[allancoder]

Hey Ninja your tutorial video series are one of the best. Are you planning to make a TYPESCRIPT series? I am eagerly waiting for it :)

[BelgianNoise]

need to check out JS tutorial first, you keep me bussy ma man

[davideugene]

SUPER !
Un big MERCI (comme toujours) :)