We created our first custom property,
our first CSS variable, and so far,
you might have some question marks on your mind.
You saw how we can create this,
and now we replace the value
for the background color property with this variable,
but basically, this doesn't help us a lot.
Well, let's now add more variables to this project
because then you will see
why variables are a very great helper
to keep our projects well-organized,
but also very dynamic
when it comes to changing existing values.
For this, we'll first see which other gray tones
we have in our CSS file here.
If we scroll down,
we see that we have this RGB code for the color property.
As I said,
we have the color property here
and the background color property up there,
which are obviously two different properties,
but both use a color, a different gray scale in our case,
therefore we can, of course,
also assign this predefined variable to our color property.
What we can do therefore is we can take this RGB code,
so I'll simply copy paste it,
now I'll add a second variable,
again with the dash dash color name, dash gray,
because it will be another gray tone.
And 100 here was a very light gray tone,
this one here is a lot darker,
so we could give this a value of let's say 600 maybe,
we'll see if this is working.
We can, of course change our values,
and now we'll paste this RGB code.
With that, we have a second CSS variable,
and what we can do now of course,
is we can, well, basically take this custom property.
I'm always using both of these terms interchangeably here
to make sure you become used to these.
So we take this custom property,
now we go to our h1 selector, delete the existing value,
now add VAR and parenthesis,
and paste our custom property that we created.
If we save this now and go back to the project,
you see that our h1 element, if we inspect it in here,
now uses this color down here in the dev tools.
If it would unselect it,
it would become black, a bit hard to see,
but you'll see that there is a difference
if I switch it again and again,
and with that, we are also using
this custom property in here.
With that, well, still, this is nice to have,
but not a big helper,
Therefore let's add some more custom properties.
For this, I go back, and now we'll scroll down
a bit further for our project.
Here, for example, in the card-info class,
we have another gray tone,
So we take this RGB code of the color property,
scroll up, and now this is kind of in-between
these two existing ones, so I'll add it right here,
dash dash color, once again, dash gray.
And now maybe a value of 400, let's say,
and there I now paste this new RGB color,
and you already see it with the help of visuals to decode,
that we have this light gray tone for 100,
there's a bit one, 400,
and then we have 600 for the dark one,
but let's see if we have more.
Yes, we have.
Here for our price class selector,
we have this very dark gray, so let's take this one,
and let's copy it again, and let's scroll up,
and let's create another custom property,
so dash dash color, dash gray.
And here we could say maybe 900,
as it is a very dark gray tone,
we paste this, and we are done.
And now we only have to replace our existing values
with the corresponding custom properties.
So for example,
if we check out this 134 value here for the card-info color,
we can simply take the custom property name we created,
so color gray 400.
We go down here, replace it, add the VAR keyword,
and our parenthesis, and paste the custom property.
If we scroll down further,
we see that also our price info class
is using this RGB code.
Therefore, we can do the same thing once again,
we delete the existing RGB code,
we add the VAR keyword, add the parenthesis,
and paste our custom property.
I think this should be it with the 134 RGB code.
Let's see. Yes, it is.
So now we could replace our 58 RGB code right here,
so let's delete it immediately.
Let's add the VAR keyword.
Oh, oops, one parenthesis is enough.
Let's go up,
and let's take the custom property we defined,
and let's scroll down now,
and let's add it here as a color
for our sub-feature-text class.
And finally, let's scroll up once again.
We still have our 41 RGB color here for our price class,
so we can also delete this one,
add the VAR keyword and the parenthesis,
now scroll up, and take the custom property
with the 900 gray value,
scroll down once again, and add it to this variable.
With that, we replaced most of our gray tones here
when it comes to the color or the background color property
with this newly-added custom property logic.
So if we save this now and go back,
you'll see that nothing changed, so nothing broke,
so our page is still working.
But if we would now say that our gray tone, for example,
if we go back, that our gray tone
with the value of 400 here, so for the card-info class,
and for the price-info, is not the one we want here.
Then we can scroll up, simply change it from to a...
this one here to a lighter or darker one.
So I'll change this to some other color now,
maybe this very light red,
just to make sure you can immediately see
what this is all about.
Of course we'll change it back to gray soon.
So let's save this.
And if we now go back to our project,
you'll see that both of these elements
now have this red color applied.
And that's the great advantage of variables,
instead of applying individual color codes
to single elements,
we use predefined scales,
which we can use in different elements,
and which we can also change over time
in case we are not totally happy with our color choice.
Here we could say that the red is maybe not the perfect fit,
therefore we can go back, and change it back to,
well, let's say this gray for example,
may be a bit darker like this, save it,
and we are good again.
And this logic,
whilst for this project is not completely necessary,
can of course be very helpful in bigger projects where,
well, the code is very long,
and we're changing the color code individually
for all elements again and again, would be a mess,
and would of course also lead to many errors.
We are, of course not limited to our gray color here,
when it comes to custom properties.
We can go back, and we could also say
that for our primary color, this blue tone here,
we also want to have a custom property
and a bigger color range.
Let's get started with the background color
for the price class here for example.
If we take this RGB code, and scroll up,
and again, go to the HTML element,
there, we again define our custom property
with dash dash color,
as we are again, referring to a value,
which is related to a color.
Now this will be our primary color on the website,
and now we again need an indication of the,
well, lightness or darkness of that color,
so I might get started with 500,
we'll see if this is all right,
and I'll paste this.
And then we see that this is yeah,
maybe rather a 300 here,
so it's maybe at this value.
So this would be our first custom property
for the primary color.
And by scrolling down,
we see that we also have a blue color here for the button.
So it's this one for the button class,
which will also be used for the hover effect
that we have here when hovering over this button.
So we use this one, and go up.
Now declare a second custom property for the primary color,
so dash dash color, dash primary,
and now maybe dash 700, as this is a darker color tone,
so we paste this now,
and now we could add more colors, if we want to,
here for this project, these two colors are sufficient.
So we can now replace our lighter color
with this color-primary-300,
so by going down here, we can change this
with our VAR keyword once again,
so here in the price class selector, so VAR.
And now, in this code, we also have auto completion,
which means we can now refer to our custom variables
by adding this double hyphen.
And now we can simply say
that this should be our primary color of 300,
whereas further down,
we use another color for the button class,
and the button:hover, or class,
or pseudo-selector down here,
so we'll again,
delete the value for the color property,
add the VAR keyword, and the parenthesis,
add our double hyphen,
and here we'll use our primary 700 color,
and we'll do the same thing down here
for the background color,
so we'll get rid of the existing color code,
add the VAR keyword, parenthesis, double hyphen,
and color primary 700.
With this change in place,
and we're going back to our project,
you see that again, well, nothing changed,
but if we now decide that our color choice is not perfect,
we can simply go back and scroll up to our HTML selector,
and say that our 300 blue
should maybe be a bit darker, like this.
And if we save this and go back,
we now have a darker color for our price class here,
or also for other elements or classes,
which are using this custom property.
By the way, our CSS variables so far
were always related to colors as a value,
and so far, we use these variables only for properties
which can hold such a value, so the color,
and the background color property in our case.
What would happen if I go back now
and say that for our h1 element here,
I accidentally use a custom property,
which is related to a color, for the font family?
So we'll delete our existing font family,
and instead add our CSS variable
with a color of primary 700.
This obviously,
well doesn't work because the font family property
can't hold a color as a value.
Therefore, if we go back now,
you see that the font family of our h1 element
change to a fallback,
so you see that we now don't have this Serif font,
we now have a Sans Sara font as a fallback,
so if you accidentally apply a variable,
which is not applicable for a specific property,
a fallback will kick in.
In our case though, we will undo this change,
and go with the Zilla Slab and serif value
for the font family property.
I don't want to dive too deep into this variable topic now
because I think the core idea is clear.
Generally, you are not limited to colors though
to use such custom properties.
We could, for example, also say that we want to have sizes,
so in our case, font sizes, for example,
that should also be predefined.
For this, you could say that you add hyphen hyphen size,
and now add a number of one, for example.
For sizes, we typically don't use values
from 100, 50, 200, and so on,
we use values like one, two, three,
as we typically don't have so many steps in between.
So there we could say that our smallest size on the page
is the one we should define right now.
And if I quickly check our code,
from a font size perspective,
we see that the smallest font size we are actively using,
for the other elements we're using default values,
is this 18 pixel font size.
Then I could, of course,
also say that the smallest font size I have in here
should be 18 pixels,
like this.
And then I could define the largest font size on the page
with hyphen hyphen size dot five, for example,
which will probably be our price here with 50 pixels.
So if we go up, we can also add 50 pixels right here now,
and now go down, it's the same logic
that we saw for the colors.
Go to the font size, delete the 50 pixels value,
instead add the variable hyphen hyphen,
and now say this should be size-five,
whereas down here, for our 18 pixels value,
for the button class,
we want to use VAR dash dash size one.
With this in place and saved, if we go back to the project,
you again see nothing changed,
but if we now decide that the price, for example,
should be a bit bigger or smaller,
then we can go back to the code,
scroll up to our custom properties,
and say that this should be 60 pixels, for example.
With this in place, if we go back,
we see that the price increased,
and this would also affect all other properties
which hold that CSS variable as a value.
However, I don't like this look,
so let me go back to 50 here.
So this is basically how custom properties
or CSS variables work.
In this project, of course,
these don't help us too much to be honest,
but in bigger projects,
these are a great helper for different color ranges,
for different sizes, and so on.
Before we dive into another topic though,
there is one thing that I quickly want to explain to you,
and this is the reason why
we are using the HTML selector here
to add these custom properties.