1
00:00:02,130 --> 00:00:03,270
Throughout this module,

2
00:00:03,270 --> 00:00:04,930
we gave you some guidelines

3
00:00:04,930 --> 00:00:08,580
that hopefully help you to focus on to the features

4
00:00:08,580 --> 00:00:12,230
and the general work on your web development project

5
00:00:12,230 --> 00:00:14,690
without losing the focus in thinking

6
00:00:14,690 --> 00:00:17,000
about too many details about colors,

7
00:00:17,000 --> 00:00:20,280
font types, font sizes, etcetera.

8
00:00:20,280 --> 00:00:23,700
The thing is that whilst diving into these topics,

9
00:00:23,700 --> 00:00:27,410
we used different ranges, different values

10
00:00:27,410 --> 00:00:31,633
for colors, font sizes, font weights, and so on.

11
00:00:32,700 --> 00:00:35,760
For example here, in our HTML selector,

12
00:00:35,760 --> 00:00:40,340
we used a value for the background color property.

13
00:00:40,340 --> 00:00:43,330
If I hover over this RGB color here,

14
00:00:43,330 --> 00:00:47,510
you see that we use a very, very light grey tone,

15
00:00:47,510 --> 00:00:51,550
for our h1 selector down here, this one,

16
00:00:51,550 --> 00:00:53,850
we used the color property,

17
00:00:53,850 --> 00:00:57,040
which also holds an RGB code as value,

18
00:00:57,040 --> 00:00:58,940
so we can compare these two

19
00:00:58,940 --> 00:01:02,470
as both use a grey color, so to say,

20
00:01:02,470 --> 00:01:06,393
but here the h1 element uses a very dark grey color.

21
00:01:07,280 --> 00:01:11,130
We could also apply this logic to other properties

22
00:01:11,130 --> 00:01:13,900
like the font size, for example,

23
00:01:13,900 --> 00:01:16,923
here in our price class selector.

24
00:01:17,780 --> 00:01:22,573
We use the font size property with a value of 50 pixels.

25
00:01:23,600 --> 00:01:28,600
Whereas down there for our button class, this one,

26
00:01:28,720 --> 00:01:31,593
we use a font size of 18 pixels.

27
00:01:32,850 --> 00:01:34,700
So whilst we have it for the color

28
00:01:34,700 --> 00:01:36,680
for different grey scales,

29
00:01:36,680 --> 00:01:39,800
we have it for the font size for different sizes.

30
00:01:39,800 --> 00:01:43,110
Our 18 pixels would be a smaller font size

31
00:01:43,110 --> 00:01:46,993
and 50 pixels up here would be a larger font size.

32
00:01:48,070 --> 00:01:49,170
Now the thing is,

33
00:01:49,170 --> 00:01:52,680
using these values like that is totally fine,

34
00:01:52,680 --> 00:01:55,200
but wouldn't it be better to predefine

35
00:01:55,200 --> 00:01:59,810
your different color choices for different grey tones?

36
00:01:59,810 --> 00:02:03,200
for different values for your primary color?

37
00:02:03,200 --> 00:02:05,980
The blue in our case, for an accent color,

38
00:02:05,980 --> 00:02:09,250
and also for other topics like sizes, for example,

39
00:02:09,250 --> 00:02:11,620
here, it would be the font size,

40
00:02:11,620 --> 00:02:13,420
because then we could simply say

41
00:02:13,420 --> 00:02:15,070
that for the background color

42
00:02:15,070 --> 00:02:17,683
we wanted a very bright grey tone.

43
00:02:18,820 --> 00:02:21,510
For the h1 color property here,

44
00:02:21,510 --> 00:02:23,870
we want to have a darker grey tone.

45
00:02:23,870 --> 00:02:27,300
For the price we want to have a large font size

46
00:02:27,300 --> 00:02:29,730
and further down for the button class

47
00:02:29,730 --> 00:02:32,393
we want to have a smaller font size.

48
00:02:33,490 --> 00:02:36,470
This sounds a bit abstract at this stage,

49
00:02:36,470 --> 00:02:38,060
I'm totally aware of that.

50
00:02:38,060 --> 00:02:41,280
Therefore, I would now like to introduce a new concept,

51
00:02:41,280 --> 00:02:42,870
which does exactly that.

52
00:02:42,870 --> 00:02:47,500
It helps us to predefine values for different properties

53
00:02:47,500 --> 00:02:51,070
and to then reuse these in our project,

54
00:02:51,070 --> 00:02:53,730
because then it will quickly become clear

55
00:02:53,730 --> 00:02:56,900
why this is a very great helper.

56
00:02:56,900 --> 00:02:59,260
Now, the concept I want to introduce now

57
00:02:59,260 --> 00:03:04,260
is called CSS variables or CSS custom properties.

58
00:03:05,840 --> 00:03:10,840
And these properties are added directly in our CSS file.

59
00:03:11,290 --> 00:03:14,420
And typically we use the HTML selector

60
00:03:14,420 --> 00:03:16,240
to implement these variables.

61
00:03:16,240 --> 00:03:19,160
Please take this as given for the moment,

62
00:03:19,160 --> 00:03:20,690
I'll dive a bit deeper into

63
00:03:20,690 --> 00:03:25,440
why the HTML selector is a great choice in a few minutes.

64
00:03:25,440 --> 00:03:28,090
So we start in our HTML selector

65
00:03:29,130 --> 00:03:32,640
and now I would like to define that the background color,

66
00:03:32,640 --> 00:03:37,403
so this RGB code here is a very light, grey tone.

67
00:03:38,290 --> 00:03:42,410
To do that, I start with a double hyphen.

68
00:03:42,410 --> 00:03:44,550
This is how we will declare,

69
00:03:44,550 --> 00:03:47,500
we call this declaring a variable,

70
00:03:47,500 --> 00:03:51,710
how we declare such a CSS variable.

71
00:03:51,710 --> 00:03:56,010
Then we add the property that we want to declare right here,

72
00:03:56,010 --> 00:04:00,500
and in our case, a good choice would be the color property.

73
00:04:00,500 --> 00:04:03,850
This doesn't have to refer to any existing properties.

74
00:04:03,850 --> 00:04:05,650
So to this color property here,

75
00:04:05,650 --> 00:04:08,160
or the background color property there,

76
00:04:08,160 --> 00:04:10,870
you could also refer to this as webdev,

77
00:04:10,870 --> 00:04:12,780
something like this, it doesn't matter.

78
00:04:12,780 --> 00:04:15,740
But, typically to make it easier for you

79
00:04:15,740 --> 00:04:17,940
and other developers to identify

80
00:04:17,940 --> 00:04:20,670
what this value be defined right here is all about,

81
00:04:20,670 --> 00:04:23,010
it makes sense to call this color

82
00:04:23,010 --> 00:04:24,910
because this custom property,

83
00:04:24,910 --> 00:04:27,223
well, it's all about the color choice.

84
00:04:28,220 --> 00:04:32,640
After that you use a dash, simple dash.

85
00:04:32,640 --> 00:04:34,790
And now you can specify

86
00:04:34,790 --> 00:04:38,070
what this custom property is all about.

87
00:04:38,070 --> 00:04:40,860
Here I want to define a value for the color,

88
00:04:40,860 --> 00:04:41,910
and as I said,

89
00:04:41,910 --> 00:04:46,910
I would like to define a color for our grey color schema

90
00:04:47,080 --> 00:04:49,810
that we want to use in our project.

91
00:04:49,810 --> 00:04:54,810
You can then add another dash, right here, and add a number.

92
00:04:54,960 --> 00:04:57,820
Typically four colors we start with a value of 50,

93
00:04:57,820 --> 00:05:01,410
for example, up to a value of 900.

94
00:05:01,410 --> 00:05:03,090
The idea behind this is that

95
00:05:03,090 --> 00:05:06,750
a very light grey color could have a value of 100,

96
00:05:06,750 --> 00:05:08,460
for example,

97
00:05:08,460 --> 00:05:13,460
whereas very dark grey could have a value of 900.

98
00:05:13,830 --> 00:05:14,670
In our case,

99
00:05:14,670 --> 00:05:17,990
this RGB code up here is a very light grey color.

100
00:05:17,990 --> 00:05:20,623
So I'll use a value of 100 here.

101
00:05:21,830 --> 00:05:25,023
After that, you add a colon and now a space.

102
00:05:26,320 --> 00:05:28,630
And now you simply add the value

103
00:05:28,630 --> 00:05:33,173
that you want to add to this custom property.

104
00:05:34,780 --> 00:05:39,780
And the value in our case would be simply our RGB code here.

105
00:05:39,940 --> 00:05:42,610
So we can actually copy paste this,

106
00:05:42,610 --> 00:05:44,710
don't forget the semi colon.

107
00:05:44,710 --> 00:05:46,360
And now we can save this.

108
00:05:46,360 --> 00:05:47,250
And with that,

109
00:05:47,250 --> 00:05:50,763
we defined our first CSS variable.

110
00:05:52,150 --> 00:05:53,310
Important here, though,

111
00:05:53,310 --> 00:05:56,040
as we want to use this variable directly

112
00:05:56,040 --> 00:05:57,680
in the HTML element,

113
00:05:57,680 --> 00:06:00,200
would be positioning it up here

114
00:06:00,200 --> 00:06:02,600
before we actually use it then.

115
00:06:02,600 --> 00:06:07,253
So let's place this above in the first line.

116
00:06:09,040 --> 00:06:13,120
With that we can now get rid of the value definition

117
00:06:13,120 --> 00:06:15,120
that we have for the background color,

118
00:06:15,120 --> 00:06:17,410
so this initial RGB code here,

119
00:06:17,410 --> 00:06:19,430
so we can delete this.

120
00:06:19,430 --> 00:06:23,240
And instead we now type the var keyword,

121
00:06:23,240 --> 00:06:27,910
which stands for variable, add parenthesis.

122
00:06:27,910 --> 00:06:31,350
And now we don't add the value, of course,

123
00:06:31,350 --> 00:06:35,580
but we add the custom property that we added to this value.

124
00:06:35,580 --> 00:06:40,580
So we can now simply refer to our --color-grey-100 property.

125
00:06:46,690 --> 00:06:49,010
So what we tell our background color property

126
00:06:49,010 --> 00:06:51,610
here now is that for the background color

127
00:06:51,610 --> 00:06:55,890
of the HTML element, please use a CSS variable

128
00:06:55,890 --> 00:06:58,570
and specifically use this variable,

129
00:06:58,570 --> 00:07:03,340
which has the property --color-grey-100.

130
00:07:03,340 --> 00:07:08,180
And then CSS will automatically use the underlying value

131
00:07:08,180 --> 00:07:12,070
for this custom property, so this RGB code.

132
00:07:12,070 --> 00:07:15,690
If we save this and now go back to our project,

133
00:07:15,690 --> 00:07:18,710
you see that our HTML element here

134
00:07:18,710 --> 00:07:21,230
still has this grey background.

135
00:07:21,230 --> 00:07:23,900
And if we select the HTML element,

136
00:07:23,900 --> 00:07:28,900
you see that now the background color uses this variable.

137
00:07:29,150 --> 00:07:33,250
If I would unselect this now, it would become white.

138
00:07:33,250 --> 00:07:37,680
If I would select it and unselect the variable definition,

139
00:07:37,680 --> 00:07:42,680
it would be white because CSS can't find any variable,

140
00:07:42,750 --> 00:07:47,750
any custom property defined for the property

141
00:07:48,040 --> 00:07:50,370
they're referring to right here.

142
00:07:50,370 --> 00:07:52,650
Therefore, a fallback comes into play,

143
00:07:52,650 --> 00:07:55,680
which is a default white background color.

144
00:07:55,680 --> 00:07:57,140
By adding this variable again,

145
00:07:57,140 --> 00:07:58,890
we see that the color becomes grey.

146
00:08:00,240 --> 00:08:05,060
So this is our first step into CSS variables, now.

147
00:08:05,060 --> 00:08:09,300
This is probably not totally intuitive at first sight,

148
00:08:09,300 --> 00:08:10,620
but in the next lecture,

149
00:08:10,620 --> 00:08:14,270
we'll dive deeper into this topic and create more variables,

150
00:08:14,270 --> 00:08:16,850
and then you will see that this is a great helper

151
00:08:16,850 --> 00:08:20,023
to make working on your website even more fun.