Up next in 10
CSS Variables Tutorial
7K views
Feb 7, 2024
The "CSS Variables Tutorial" is an instructional video aimed at teaching viewers about CSS variables, also known as custom properties. CSS variables allow developers to define reusable values within CSS stylesheets, providing flexibility and efficiency in styling web pages. The video likely covers the syntax for declaring and using CSS variables, demonstrating how they can be employed to streamline the styling process and enhance code maintainability. By providing clear explanations and practical examples, the video aims to help viewers understand the benefits and applications of CSS variables in creating more dynamic and modular CSS stylesheets. Viewers can expect to gain a solid understanding of CSS variables and how to integrate them into their web development projects effectively.
View Video Transcript
0:00
Hello everybody, in this video we're going to be covering CSS variables and how they
0:03
can be used to create a light and dark theme for your website. Let's get started now
0:11
To get started I have a basic HTML file on the left here which imports our styles.css file
0:17
our script file for our JavaScript, and contains two divs named 1 and 2 with some child elements
0:23
inside of them named 1 1, 1 2, 1 3, 2 1, and 2 2, and then finally a couple buttons at the bottom
0:29
with unique IDs which we're going to use to swap around our themes. To get started let's go into
0:34
our styles.css and actually talk about how we can use CSS variables. At first CSS variables may seem
0:40
like a complicated topic but really they work just like any other CSS property except for you get to
0:45
define this property yourself as a custom property. Most of the time where you want to declare CSS
0:50
variables is either in the root or HTML of your document because CSS variables just like all other
0:57
CSS properties cascade down and can be inherited or overridden in lower down more specific elements
1:03
So for example let's just say we wanted to create a background color for all of our different
1:07
elements we'll just call it div background color and we'll set that to red. So now we can break
1:14
apart this syntax. CSS variable all it is is any declaration that begins with two hyphens just like
1:19
this. So two hyphens and then the name of your variable comes afterward and then you just give
1:24
it a value just like you would any other CSS property and we can do this with a bunch of
1:28
different variables. Let's say we want to call another variable called text color we'll just set
1:33
that to black. We're going to add padding to our different elements so we'll just create a div
1:37
padding variable and then lastly we'll do the same thing but we'll just do margin we'll also set that
1:44
to 10 pixels and if you save that you see that nothing actually happens on our page over on the
1:48
right and that's because we haven't actually used these variables. So now let's go ahead and assign
1:53
these variables to our different child elements. So we can say dot child here and this is going to
1:58
select all these different elements 1 1 1 2 and so on because we have this class on them in html
2:04
and we can just set the background color for example. So let's say we want to set the background
2:08
color and we want to set it to that variable that will be defined of the div background color here
2:13
So to do that we use the var function and then inside of this var function all we do is pass
2:18
the different variables that we want so in our case we want to use the div background color
2:22
variable and that's going to assign this variable red here to this background color and now if we
2:28
save that you see that each one of these elements now has a background color that's red. And we can
2:34
also go even further and add the color variable here so we can just say the color it's going to
2:39
be var text color and if we save this you'll see that our text color is black but it was already
2:46
black so really that doesn't make much difference. But let's say that we want all of these that start
2:51
with one which is inside of that one div as you can see here inside of this one div we have these
2:56
three children. Let's say that we want to change the background color in those instead of actually
3:01
going in and making the background color different we can just override the variable. So in that one
3:06
div that we have we can just take this div background color variable and we can change it to
3:13
blue for example and now if we save that you see that everything inside of one here changes to a
3:18
background color of blue because this variable starts as red gets overridden in this dot one to
3:24
be blue and then when it gets to the dot child selector it's using the blue variable since it
3:28
was overridden. We can do the same thing with text color so if we just copy this change this to be
3:34
text color instead and let's say we want it to be white and we save that and now you see that our
3:40
text color is white inside of the one div but not inside of the two div since we haven't actually
3:45
specified anything inside of that two div yet and it just uses this base value that's inherited from
3:50
the root. Another nice thing about variables which is really the biggest use case for them is that
3:54
you can use them in multiple places in your application and change them in one spot and
3:58
it'll change it everywhere. So for example let's say that we wanted to select this one dot one
4:03
element and we wanted to give it a little bit of margin so we could set the margin here to be equal
4:08
to that variable that we created which is div margin and we can do the same thing but in this
4:14
case we want to do padding instead of margin and if you save that you see that we now get that padding
4:19
and margin around one dot one but let's say we wanted to do the same thing for one two well we
4:26
can just use that same exact variable and that same exact padding and you save it and you see that we
4:30
get that margin and padding around one two and one one but let's say we ended up saying we want our
4:35
padding to actually be 20 instead of 10. So we update it here once in that variable and we save
4:41
it and you see it updates everywhere that that variable is used and that's incredibly useful and
4:45
really the biggest use case for css variables over actually just hard coding 10 pixels or 20 pixels
4:51
because then you would need to find where it's used in all those cases. The last thing we need
4:55
to talk about with css variables is having a fallback value for when your variable is not
4:59
declared. So for example if inside of our body we wanted to change the background color and we wanted
5:05
the background color to be dependent on a variable which we're just going to call background color
5:11
and we say that we don't actually have a variable for background color so we can say if there is no
5:15
background color variable we just want to fall back to the color pink and if you say that you
5:20
see it falls back to the color pink because background color is not defined anywhere but
5:25
we're going to actually define this background color in javascript later using these dark and
5:29
light theme buttons so until we define that we want to just fall back to pink in this case. So
5:34
now we can talk about how we can use css variables in javascript which is what makes css variables
5:39
so powerful compared to using something like sass or less because you can actually use these variables
5:44
in javascript itself. So let's open up our javascript file here and go through the different
5:49
ways that we can both access these css variables and change these css variables. To get started
5:54
let's show you how to get the variables from your css. For example we want to get the variables from
5:59
the root of our element which is the document.document element but in order to get the actual
6:04
variables we need to get the computed style of this element which is just a function on windows
6:08
so we say window dot get computed style and we just pass the element we want to get the computed
6:13
style for. Once we do that we can just call get property value and we just pass the name of the
6:19
variable that we want to get. This can also be used to get any property value in css but we're
6:23
just going to use it specifically for variables. So let's say that we want to get the background color
6:28
okay there we go we got the background color and let's just say we want to log that out so we'll
6:33
just console.log that background color open this up so we can actually inspect it
6:39
and if I pull this over here and save this you see that we get red being printed out because
6:44
that's the value of div background color. If we look at text color for example you see that we're
6:51
going to get black and we can do this for any of our different variables. So now we can exit out
6:55
so now we can exit out of that and we can actually talk about making these different buttons set the
7:00
variables that we want to change so that it'll actually update our css dynamically. The first
7:05
thing that we need to do is actually assign an event listener for the click of these buttons so
7:09
we can just say document dot get element by id we have an id on this element of dark theme button
7:17
and then we just want to add an event listener in our case it's going to be a click event listener
7:22
and this click event listener we're going to find a different function to it and then inside
7:26
of this function is where we want to set the value of this variable. So again we can get the root
7:32
element of our document by document dot document element then we can access the style which is just
7:37
going to be all of the different css for this element and we can say set property which is
7:41
where we want to set a different property based on the name and in our case we just want to set
7:45
that background color variable that we're using inside of our code for the css and we'll set it
7:50
to a value here of three three three which is a dark gray color. Now if we save that and we click
7:56
dark theme you'll see that our background color updates to be this dark gray color and that's
8:01
because we're setting the variable background color inside of our css root element to be this
8:06
dark gray color and inside of our css we are using that variable here to set the actual background
8:12
color and since this variable set it's no longer showing as pink and it's showing as whatever this
8:16
background color variable is. So now all we have to do is the exact same thing but for our light
8:22
theme so we can just change dark theme to light theme and instead of doing this dark gray color
8:26
we can just use white and now if we save that you see our dark theme button changes it's dark
8:31
and our light theme button changes it to light and that's exactly what we wanted. So I hope you
8:36
guys enjoyed this video on css variables and learn how you can use them in not only your css
8:40
but also your javascript and how it can make your code cleaner and easier to use. If you did enjoy
8:45
this video make sure to check out my other tutorials on css and javascript linked over here
8:50
and subscribe to my channel for more videos just like this. Thank you guys very much for watching
8:54
and have a good day
#Development Tools
#Online Goodies
#Skins
# Themes & Wallpapers