CSS Custom Variables & Dark Mode | CSS Tutorial for Beginners

Learn about CSS custom variables and CSS Dark Mode in this CSS tutorial for beginners. CSS variables are also often referred to as CSS custom properties. We will use them to create a custom dark mode for your web page.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Custom Variables & Dark Mode | CSS Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Why use CSS variables?
(01:12) Starter Code
(01:22) :root pseudo-class
(02:02) Apply colors with CSS variables
(09:18) Apply font styles with CSS variables
(11:08) Nesting CSS variables
(15:34) Adding more HTML content
(17:46) Styling the main element
(19:41) Order of operations
(20:21) Styling the content with CSS variables
(23:15) Redefining CSS variables
(24:22) Create and apply a Dark Mode

⚙ Web Dev Tools:

📚 References:

✅ Follow Me:

Was this tutorial about CSS Custom Variables helpful? If so, please share. Let me know your thoughts in the comments.

#css #custom #variables

[xerxes]

you can use ctrl+spacebar for any kind of suggestions in many ide's.

[KaimanGod]

Hi Dave, great video, how many videos are left until we finish the tutorial?
Thank you and i love your way to explain things even if my english it´s not the best.

[ahmad-murery]

I prefer dave mode too 😁
You can test your website color scheme in Chrome browser developer tools/Style tab / the little Paint Bruch icon
using the same concept one can create more than one color theme by redefining the color according to a class added to the body for example,
:root{
--bg: blue
}

.hacker {
--bg: green;
}

[Grihlo]

Thanks for explaining this very useful concept of CSS variables!

[judeleon]

Thanks Dave. Do you have plans to cover the topic on calculations with CSS variables?

[hiwayshoes]

Another excellent tutorial, Dave! Just an observation: would it make sense (depending on the number) to place all our ‘root’ properties and values in a separate CSS style sheet and link it in the HTML as we do our ‘styles.css’? Maybe call it ‘root.css’ for clarity. Just to keep our main CSS file free from excessive clutter was my thought. Thanks again for all you do. As a YT subscriber to more than 500 channels of varying interest, you are safely in my top 5! -ha! …. Cheers💖!

[CirTap]

interesting to see a beginner's tutorial on CSS custom properties, 6 years after they became available, given the plethora of videos and blogs already doing it ad nauseum for as long.
well explained, tho I was more interested in your take on dark mode.

[tristianchung]

hi dave, would like to see u create a sass tutorial.

[KaimanGod]

Hi, Dave, big fan here, do you know how many videos aprox. are left to finish the course

[mehmetozkoc]

Hi Dave, why do you define root colors with uppercase?

[pavlinapsarsky]

Hello Dave, great tutorial, as always, thank you. Is it possible to assign a gradient to a variable?
F.e. --gradient1: linear-gradient(purple, blue). I tried and it didn't work. And please how you name the variables, when there is a lot, let's say more than 10 colors or font-sizes? Thank you.

[XFunkWizardX]

When I apply the var() to .square--highlight, nothing happens and it stays the same color as the other square elements, what could I be doing wrong?

[Le]

In the end of the course will we have a project to make?

[GabrielSouza-yyrq]

I had no idea that it is possible to use variables in CSS