Throughout this module,
we gave you some guidelines
that hopefully help you to focus on to the features
and the general work on your web development project
without losing the focus in thinking
about too many details about colors,
font types, font sizes, etcetera.
The thing is that whilst diving into these topics,
we used different ranges, different values
for colors, font sizes, font weights, and so on.
For example here, in our HTML selector,
we used a value for the background color property.
If I hover over this RGB color here,
you see that we use a very, very light grey tone,
for our h1 selector down here, this one,
we used the color property,
which also holds an RGB code as value,
so we can compare these two
as both use a grey color, so to say,
but here the h1 element uses a very dark grey color.
We could also apply this logic to other properties
like the font size, for example,
here in our price class selector.
We use the font size property with a value of 50 pixels.
Whereas down there for our button class, this one,
we use a font size of 18 pixels.
So whilst we have it for the color
for different grey scales,
we have it for the font size for different sizes.
Our 18 pixels would be a smaller font size
and 50 pixels up here would be a larger font size.
Now the thing is,
using these values like that is totally fine,
but wouldn't it be better to predefine
your different color choices for different grey tones?
for different values for your primary color?
The blue in our case, for an accent color,
and also for other topics like sizes, for example,
here, it would be the font size,
because then we could simply say
that for the background color
we wanted a very bright grey tone.
For the h1 color property here,
we want to have a darker grey tone.
For the price we want to have a large font size
and further down for the button class
we want to have a smaller font size.
This sounds a bit abstract at this stage,
I'm totally aware of that.
Therefore, I would now like to introduce a new concept,
which does exactly that.
It helps us to predefine values for different properties
and to then reuse these in our project,
because then it will quickly become clear
why this is a very great helper.
Now, the concept I want to introduce now
is called CSS variables or CSS custom properties.
And these properties are added directly in our CSS file.
And typically we use the HTML selector
to implement these variables.
Please take this as given for the moment,
I'll dive a bit deeper into
why the HTML selector is a great choice in a few minutes.
So we start in our HTML selector
and now I would like to define that the background color,
so this RGB code here is a very light, grey tone.
To do that, I start with a double hyphen.
This is how we will declare,
we call this declaring a variable,
how we declare such a CSS variable.
Then we add the property that we want to declare right here,
and in our case, a good choice would be the color property.
This doesn't have to refer to any existing properties.
So to this color property here,
or the background color property there,
you could also refer to this as webdev,
something like this, it doesn't matter.
But, typically to make it easier for you
and other developers to identify
what this value be defined right here is all about,
it makes sense to call this color
because this custom property,
well, it's all about the color choice.
After that you use a dash, simple dash.
And now you can specify
what this custom property is all about.
Here I want to define a value for the color,
and as I said,
I would like to define a color for our grey color schema
that we want to use in our project.
You can then add another dash, right here, and add a number.
Typically four colors we start with a value of 50,
for example, up to a value of 900.
The idea behind this is that
a very light grey color could have a value of 100,
for example,
whereas very dark grey could have a value of 900.
In our case,
this RGB code up here is a very light grey color.
So I'll use a value of 100 here.
After that, you add a colon and now a space.
And now you simply add the value
that you want to add to this custom property.
And the value in our case would be simply our RGB code here.
So we can actually copy paste this,
don't forget the semi colon.
And now we can save this.
And with that,
we defined our first CSS variable.
Important here, though,
as we want to use this variable directly
in the HTML element,
would be positioning it up here
before we actually use it then.
So let's place this above in the first line.
With that we can now get rid of the value definition
that we have for the background color,
so this initial RGB code here,
so we can delete this.
And instead we now type the var keyword,
which stands for variable, add parenthesis.
And now we don't add the value, of course,
but we add the custom property that we added to this value.
So we can now simply refer to our --color-grey-100 property.
So what we tell our background color property
here now is that for the background color
of the HTML element, please use a CSS variable
and specifically use this variable,
which has the property --color-grey-100.
And then CSS will automatically use the underlying value
for this custom property, so this RGB code.
If we save this and now go back to our project,
you see that our HTML element here
still has this grey background.
And if we select the HTML element,
you see that now the background color uses this variable.
If I would unselect this now, it would become white.
If I would select it and unselect the variable definition,
it would be white because CSS can't find any variable,
any custom property defined for the property
they're referring to right here.
Therefore, a fallback comes into play,
which is a default white background color.
By adding this variable again,
we see that the color becomes grey.
So this is our first step into CSS variables, now.
This is probably not totally intuitive at first sight,
but in the next lecture,
we'll dive deeper into this topic and create more variables,
and then you will see that this is a great helper
to make working on your website even more fun.