1 00:00:02,240 --> 00:00:05,190 We created our first custom property, 2 00:00:05,190 --> 00:00:08,340 our first CSS variable, and so far, 3 00:00:08,340 --> 00:00:11,340 you might have some question marks on your mind. 4 00:00:11,340 --> 00:00:13,030 You saw how we can create this, 5 00:00:13,030 --> 00:00:14,760 and now we replace the value 6 00:00:14,760 --> 00:00:17,950 for the background color property with this variable, 7 00:00:17,950 --> 00:00:20,960 but basically, this doesn't help us a lot. 8 00:00:20,960 --> 00:00:24,440 Well, let's now add more variables to this project 9 00:00:24,440 --> 00:00:25,830 because then you will see 10 00:00:25,830 --> 00:00:28,930 why variables are a very great helper 11 00:00:28,930 --> 00:00:31,950 to keep our projects well-organized, 12 00:00:31,950 --> 00:00:33,710 but also very dynamic 13 00:00:33,710 --> 00:00:36,473 when it comes to changing existing values. 14 00:00:37,770 --> 00:00:40,900 For this, we'll first see which other gray tones 15 00:00:40,900 --> 00:00:44,030 we have in our CSS file here. 16 00:00:44,030 --> 00:00:45,670 If we scroll down, 17 00:00:45,670 --> 00:00:49,920 we see that we have this RGB code for the color property. 18 00:00:49,920 --> 00:00:50,753 As I said, 19 00:00:50,753 --> 00:00:53,010 we have the color property here 20 00:00:53,010 --> 00:00:55,940 and the background color property up there, 21 00:00:55,940 --> 00:00:59,150 which are obviously two different properties, 22 00:00:59,150 --> 00:01:03,200 but both use a color, a different gray scale in our case, 23 00:01:03,200 --> 00:01:04,780 therefore we can, of course, 24 00:01:04,780 --> 00:01:09,780 also assign this predefined variable to our color property. 25 00:01:10,950 --> 00:01:14,810 What we can do therefore is we can take this RGB code, 26 00:01:14,810 --> 00:01:16,763 so I'll simply copy paste it, 27 00:01:18,040 --> 00:01:20,700 now I'll add a second variable, 28 00:01:20,700 --> 00:01:25,580 again with the dash dash color name, dash gray, 29 00:01:26,430 --> 00:01:28,660 because it will be another gray tone. 30 00:01:28,660 --> 00:01:32,570 And 100 here was a very light gray tone, 31 00:01:32,570 --> 00:01:34,490 this one here is a lot darker, 32 00:01:34,490 --> 00:01:38,720 so we could give this a value of let's say 600 maybe, 33 00:01:38,720 --> 00:01:40,470 we'll see if this is working. 34 00:01:40,470 --> 00:01:42,570 We can, of course change our values, 35 00:01:42,570 --> 00:01:45,343 and now we'll paste this RGB code. 36 00:01:46,580 --> 00:01:50,040 With that, we have a second CSS variable, 37 00:01:50,040 --> 00:01:51,450 and what we can do now of course, 38 00:01:51,450 --> 00:01:56,450 is we can, well, basically take this custom property. 39 00:01:56,640 --> 00:01:59,550 I'm always using both of these terms interchangeably here 40 00:01:59,550 --> 00:02:01,860 to make sure you become used to these. 41 00:02:01,860 --> 00:02:04,450 So we take this custom property, 42 00:02:04,450 --> 00:02:09,449 now we go to our h1 selector, delete the existing value, 43 00:02:10,210 --> 00:02:14,020 now add VAR and parenthesis, 44 00:02:14,020 --> 00:02:19,020 and paste our custom property that we created. 45 00:02:19,140 --> 00:02:22,853 If we save this now and go back to the project, 46 00:02:24,600 --> 00:02:29,380 you see that our h1 element, if we inspect it in here, 47 00:02:29,380 --> 00:02:34,150 now uses this color down here in the dev tools. 48 00:02:34,150 --> 00:02:35,350 If it would unselect it, 49 00:02:36,260 --> 00:02:38,250 it would become black, a bit hard to see, 50 00:02:38,250 --> 00:02:39,680 but you'll see that there is a difference 51 00:02:39,680 --> 00:02:41,320 if I switch it again and again, 52 00:02:41,320 --> 00:02:43,380 and with that, we are also using 53 00:02:43,380 --> 00:02:45,970 this custom property in here. 54 00:02:45,970 --> 00:02:48,340 With that, well, still, this is nice to have, 55 00:02:48,340 --> 00:02:49,610 but not a big helper, 56 00:02:49,610 --> 00:02:53,280 Therefore let's add some more custom properties. 57 00:02:53,280 --> 00:02:55,810 For this, I go back, and now we'll scroll down 58 00:02:55,810 --> 00:02:57,890 a bit further for our project. 59 00:02:57,890 --> 00:03:01,020 Here, for example, in the card-info class, 60 00:03:01,020 --> 00:03:02,620 we have another gray tone, 61 00:03:02,620 --> 00:03:07,173 So we take this RGB code of the color property, 62 00:03:08,020 --> 00:03:11,270 scroll up, and now this is kind of in-between 63 00:03:11,270 --> 00:03:14,263 these two existing ones, so I'll add it right here, 64 00:03:15,200 --> 00:03:18,600 dash dash color, once again, dash gray. 65 00:03:18,600 --> 00:03:23,120 And now maybe a value of 400, let's say, 66 00:03:23,120 --> 00:03:26,053 and there I now paste this new RGB color, 67 00:03:27,190 --> 00:03:30,290 and you already see it with the help of visuals to decode, 68 00:03:30,290 --> 00:03:32,400 that we have this light gray tone for 100, 69 00:03:32,400 --> 00:03:34,170 there's a bit one, 400, 70 00:03:34,170 --> 00:03:36,550 and then we have 600 for the dark one, 71 00:03:36,550 --> 00:03:38,820 but let's see if we have more. 72 00:03:38,820 --> 00:03:39,760 Yes, we have. 73 00:03:39,760 --> 00:03:42,460 Here for our price class selector, 74 00:03:42,460 --> 00:03:45,493 we have this very dark gray, so let's take this one, 75 00:03:47,990 --> 00:03:50,943 and let's copy it again, and let's scroll up, 76 00:03:51,800 --> 00:03:55,140 and let's create another custom property, 77 00:03:55,140 --> 00:03:58,540 so dash dash color, dash gray. 78 00:03:58,540 --> 00:04:00,657 And here we could say maybe 900, 79 00:04:02,910 --> 00:04:05,100 as it is a very dark gray tone, 80 00:04:05,100 --> 00:04:06,943 we paste this, and we are done. 81 00:04:07,850 --> 00:04:12,440 And now we only have to replace our existing values 82 00:04:12,440 --> 00:04:14,783 with the corresponding custom properties. 83 00:04:16,410 --> 00:04:17,560 So for example, 84 00:04:17,560 --> 00:04:22,560 if we check out this 134 value here for the card-info color, 85 00:04:24,160 --> 00:04:27,790 we can simply take the custom property name we created, 86 00:04:27,790 --> 00:04:29,653 so color gray 400. 87 00:04:30,960 --> 00:04:35,960 We go down here, replace it, add the VAR keyword, 88 00:04:36,440 --> 00:04:40,083 and our parenthesis, and paste the custom property. 89 00:04:41,210 --> 00:04:43,100 If we scroll down further, 90 00:04:43,100 --> 00:04:46,010 we see that also our price info class 91 00:04:46,010 --> 00:04:48,290 is using this RGB code. 92 00:04:48,290 --> 00:04:50,970 Therefore, we can do the same thing once again, 93 00:04:50,970 --> 00:04:53,363 we delete the existing RGB code, 94 00:04:54,230 --> 00:04:57,610 we add the VAR keyword, add the parenthesis, 95 00:04:57,610 --> 00:04:59,823 and paste our custom property. 96 00:05:01,020 --> 00:05:05,010 I think this should be it with the 134 RGB code. 97 00:05:05,010 --> 00:05:07,500 Let's see. Yes, it is. 98 00:05:07,500 --> 00:05:12,500 So now we could replace our 58 RGB code right here, 99 00:05:12,760 --> 00:05:15,433 so let's delete it immediately. 100 00:05:16,470 --> 00:05:19,320 Let's add the VAR keyword. 101 00:05:19,320 --> 00:05:21,733 Oh, oops, one parenthesis is enough. 102 00:05:22,570 --> 00:05:23,463 Let's go up, 103 00:05:24,870 --> 00:05:28,200 and let's take the custom property we defined, 104 00:05:28,200 --> 00:05:29,803 and let's scroll down now, 105 00:05:31,650 --> 00:05:33,660 and let's add it here as a color 106 00:05:33,660 --> 00:05:37,100 for our sub-feature-text class. 107 00:05:37,100 --> 00:05:40,660 And finally, let's scroll up once again. 108 00:05:40,660 --> 00:05:45,660 We still have our 41 RGB color here for our price class, 109 00:05:45,960 --> 00:05:48,090 so we can also delete this one, 110 00:05:48,090 --> 00:05:51,350 add the VAR keyword and the parenthesis, 111 00:05:51,350 --> 00:05:55,060 now scroll up, and take the custom property 112 00:05:55,060 --> 00:05:57,670 with the 900 gray value, 113 00:05:57,670 --> 00:06:02,143 scroll down once again, and add it to this variable. 114 00:06:03,510 --> 00:06:08,030 With that, we replaced most of our gray tones here 115 00:06:08,030 --> 00:06:11,460 when it comes to the color or the background color property 116 00:06:11,460 --> 00:06:14,440 with this newly-added custom property logic. 117 00:06:14,440 --> 00:06:17,590 So if we save this now and go back, 118 00:06:17,590 --> 00:06:19,830 you'll see that nothing changed, so nothing broke, 119 00:06:19,830 --> 00:06:22,440 so our page is still working. 120 00:06:22,440 --> 00:06:26,660 But if we would now say that our gray tone, for example, 121 00:06:26,660 --> 00:06:29,470 if we go back, that our gray tone 122 00:06:29,470 --> 00:06:34,470 with the value of 400 here, so for the card-info class, 123 00:06:36,400 --> 00:06:41,400 and for the price-info, is not the one we want here. 124 00:06:42,170 --> 00:06:47,170 Then we can scroll up, simply change it from to a... 125 00:06:48,120 --> 00:06:50,660 this one here to a lighter or darker one. 126 00:06:50,660 --> 00:06:52,730 So I'll change this to some other color now, 127 00:06:52,730 --> 00:06:54,940 maybe this very light red, 128 00:06:54,940 --> 00:06:56,860 just to make sure you can immediately see 129 00:06:56,860 --> 00:06:58,080 what this is all about. 130 00:06:58,080 --> 00:07:00,550 Of course we'll change it back to gray soon. 131 00:07:00,550 --> 00:07:02,570 So let's save this. 132 00:07:02,570 --> 00:07:05,350 And if we now go back to our project, 133 00:07:05,350 --> 00:07:08,190 you'll see that both of these elements 134 00:07:08,190 --> 00:07:10,203 now have this red color applied. 135 00:07:11,040 --> 00:07:13,970 And that's the great advantage of variables, 136 00:07:13,970 --> 00:07:17,270 instead of applying individual color codes 137 00:07:17,270 --> 00:07:19,130 to single elements, 138 00:07:19,130 --> 00:07:21,440 we use predefined scales, 139 00:07:21,440 --> 00:07:24,500 which we can use in different elements, 140 00:07:24,500 --> 00:07:26,750 and which we can also change over time 141 00:07:26,750 --> 00:07:30,870 in case we are not totally happy with our color choice. 142 00:07:30,870 --> 00:07:34,000 Here we could say that the red is maybe not the perfect fit, 143 00:07:34,000 --> 00:07:37,410 therefore we can go back, and change it back to, 144 00:07:37,410 --> 00:07:41,010 well, let's say this gray for example, 145 00:07:41,010 --> 00:07:46,010 may be a bit darker like this, save it, 146 00:07:46,040 --> 00:07:47,313 and we are good again. 147 00:07:48,370 --> 00:07:49,630 And this logic, 148 00:07:49,630 --> 00:07:53,400 whilst for this project is not completely necessary, 149 00:07:53,400 --> 00:07:57,080 can of course be very helpful in bigger projects where, 150 00:07:57,080 --> 00:07:58,170 well, the code is very long, 151 00:07:58,170 --> 00:08:01,570 and we're changing the color code individually 152 00:08:01,570 --> 00:08:04,750 for all elements again and again, would be a mess, 153 00:08:04,750 --> 00:08:07,490 and would of course also lead to many errors. 154 00:08:07,490 --> 00:08:10,610 We are, of course not limited to our gray color here, 155 00:08:10,610 --> 00:08:13,000 when it comes to custom properties. 156 00:08:13,000 --> 00:08:15,620 We can go back, and we could also say 157 00:08:15,620 --> 00:08:20,280 that for our primary color, this blue tone here, 158 00:08:20,280 --> 00:08:22,730 we also want to have a custom property 159 00:08:22,730 --> 00:08:25,370 and a bigger color range. 160 00:08:25,370 --> 00:08:27,371 Let's get started with the background color 161 00:08:27,371 --> 00:08:30,130 for the price class here for example. 162 00:08:30,130 --> 00:08:33,883 If we take this RGB code, and scroll up, 163 00:08:34,730 --> 00:08:36,683 and again, go to the HTML element, 164 00:08:37,530 --> 00:08:40,470 there, we again define our custom property 165 00:08:40,470 --> 00:08:42,059 with dash dash color, 166 00:08:42,059 --> 00:08:44,900 as we are again, referring to a value, 167 00:08:44,900 --> 00:08:46,633 which is related to a color. 168 00:08:47,720 --> 00:08:51,570 Now this will be our primary color on the website, 169 00:08:51,570 --> 00:08:54,550 and now we again need an indication of the, 170 00:08:54,550 --> 00:08:57,170 well, lightness or darkness of that color, 171 00:08:57,170 --> 00:08:59,440 so I might get started with 500, 172 00:08:59,440 --> 00:09:00,580 we'll see if this is all right, 173 00:09:00,580 --> 00:09:02,770 and I'll paste this. 174 00:09:02,770 --> 00:09:05,640 And then we see that this is yeah, 175 00:09:05,640 --> 00:09:07,770 maybe rather a 300 here, 176 00:09:07,770 --> 00:09:09,253 so it's maybe at this value. 177 00:09:10,480 --> 00:09:12,820 So this would be our first custom property 178 00:09:12,820 --> 00:09:14,920 for the primary color. 179 00:09:14,920 --> 00:09:16,810 And by scrolling down, 180 00:09:16,810 --> 00:09:21,370 we see that we also have a blue color here for the button. 181 00:09:23,810 --> 00:09:27,070 So it's this one for the button class, 182 00:09:27,070 --> 00:09:29,360 which will also be used for the hover effect 183 00:09:29,360 --> 00:09:32,810 that we have here when hovering over this button. 184 00:09:32,810 --> 00:09:36,253 So we use this one, and go up. 185 00:09:37,100 --> 00:09:40,870 Now declare a second custom property for the primary color, 186 00:09:40,870 --> 00:09:44,340 so dash dash color, dash primary, 187 00:09:44,340 --> 00:09:49,340 and now maybe dash 700, as this is a darker color tone, 188 00:09:49,670 --> 00:09:51,423 so we paste this now, 189 00:09:52,350 --> 00:09:55,270 and now we could add more colors, if we want to, 190 00:09:55,270 --> 00:09:58,950 here for this project, these two colors are sufficient. 191 00:09:58,950 --> 00:10:02,680 So we can now replace our lighter color 192 00:10:02,680 --> 00:10:05,130 with this color-primary-300, 193 00:10:05,130 --> 00:10:08,820 so by going down here, we can change this 194 00:10:08,820 --> 00:10:11,820 with our VAR keyword once again, 195 00:10:11,820 --> 00:10:15,760 so here in the price class selector, so VAR. 196 00:10:15,760 --> 00:10:19,070 And now, in this code, we also have auto completion, 197 00:10:19,070 --> 00:10:22,660 which means we can now refer to our custom variables 198 00:10:22,660 --> 00:10:24,650 by adding this double hyphen. 199 00:10:24,650 --> 00:10:26,150 And now we can simply say 200 00:10:26,150 --> 00:10:29,187 that this should be our primary color of 300, 201 00:10:30,530 --> 00:10:32,043 whereas further down, 202 00:10:33,020 --> 00:10:36,720 we use another color for the button class, 203 00:10:36,720 --> 00:10:39,210 and the button:hover, or class, 204 00:10:39,210 --> 00:10:41,430 or pseudo-selector down here, 205 00:10:41,430 --> 00:10:42,263 so we'll again, 206 00:10:42,263 --> 00:10:45,270 delete the value for the color property, 207 00:10:45,270 --> 00:10:48,310 add the VAR keyword, and the parenthesis, 208 00:10:48,310 --> 00:10:50,020 add our double hyphen, 209 00:10:50,020 --> 00:10:53,373 and here we'll use our primary 700 color, 210 00:10:54,550 --> 00:10:56,530 and we'll do the same thing down here 211 00:10:56,530 --> 00:10:58,120 for the background color, 212 00:10:58,120 --> 00:11:00,983 so we'll get rid of the existing color code, 213 00:11:02,560 --> 00:11:06,130 add the VAR keyword, parenthesis, double hyphen, 214 00:11:06,130 --> 00:11:08,373 and color primary 700. 215 00:11:09,550 --> 00:11:10,437 With this change in place, 216 00:11:10,437 --> 00:11:13,193 and we're going back to our project, 217 00:11:14,960 --> 00:11:17,810 you see that again, well, nothing changed, 218 00:11:17,810 --> 00:11:21,720 but if we now decide that our color choice is not perfect, 219 00:11:21,720 --> 00:11:25,990 we can simply go back and scroll up to our HTML selector, 220 00:11:25,990 --> 00:11:30,350 and say that our 300 blue 221 00:11:30,350 --> 00:11:33,970 should maybe be a bit darker, like this. 222 00:11:33,970 --> 00:11:36,170 And if we save this and go back, 223 00:11:36,170 --> 00:11:40,830 we now have a darker color for our price class here, 224 00:11:40,830 --> 00:11:43,630 or also for other elements or classes, 225 00:11:43,630 --> 00:11:46,610 which are using this custom property. 226 00:11:46,610 --> 00:11:50,130 By the way, our CSS variables so far 227 00:11:50,130 --> 00:11:54,150 were always related to colors as a value, 228 00:11:54,150 --> 00:11:57,480 and so far, we use these variables only for properties 229 00:11:57,480 --> 00:12:00,190 which can hold such a value, so the color, 230 00:12:00,190 --> 00:12:02,993 and the background color property in our case. 231 00:12:04,190 --> 00:12:07,220 What would happen if I go back now 232 00:12:07,220 --> 00:12:11,280 and say that for our h1 element here, 233 00:12:11,280 --> 00:12:14,400 I accidentally use a custom property, 234 00:12:14,400 --> 00:12:18,270 which is related to a color, for the font family? 235 00:12:18,270 --> 00:12:21,640 So we'll delete our existing font family, 236 00:12:21,640 --> 00:12:24,610 and instead add our CSS variable 237 00:12:24,610 --> 00:12:27,343 with a color of primary 700. 238 00:12:28,250 --> 00:12:29,290 This obviously, 239 00:12:29,290 --> 00:12:32,490 well doesn't work because the font family property 240 00:12:32,490 --> 00:12:35,550 can't hold a color as a value. 241 00:12:35,550 --> 00:12:37,423 Therefore, if we go back now, 242 00:12:38,700 --> 00:12:43,700 you see that the font family of our h1 element 243 00:12:45,340 --> 00:12:47,560 change to a fallback, 244 00:12:47,560 --> 00:12:50,190 so you see that we now don't have this Serif font, 245 00:12:50,190 --> 00:12:52,980 we now have a Sans Sara font as a fallback, 246 00:12:52,980 --> 00:12:56,330 so if you accidentally apply a variable, 247 00:12:56,330 --> 00:12:59,520 which is not applicable for a specific property, 248 00:12:59,520 --> 00:13:01,700 a fallback will kick in. 249 00:13:01,700 --> 00:13:04,560 In our case though, we will undo this change, 250 00:13:04,560 --> 00:13:07,500 and go with the Zilla Slab and serif value 251 00:13:07,500 --> 00:13:09,163 for the font family property. 252 00:13:10,240 --> 00:13:13,700 I don't want to dive too deep into this variable topic now 253 00:13:13,700 --> 00:13:16,220 because I think the core idea is clear. 254 00:13:16,220 --> 00:13:18,970 Generally, you are not limited to colors though 255 00:13:18,970 --> 00:13:21,660 to use such custom properties. 256 00:13:21,660 --> 00:13:25,530 We could, for example, also say that we want to have sizes, 257 00:13:25,530 --> 00:13:28,160 so in our case, font sizes, for example, 258 00:13:28,160 --> 00:13:30,920 that should also be predefined. 259 00:13:30,920 --> 00:13:35,310 For this, you could say that you add hyphen hyphen size, 260 00:13:35,310 --> 00:13:38,800 and now add a number of one, for example. 261 00:13:38,800 --> 00:13:41,080 For sizes, we typically don't use values 262 00:13:41,080 --> 00:13:44,230 from 100, 50, 200, and so on, 263 00:13:44,230 --> 00:13:46,430 we use values like one, two, three, 264 00:13:46,430 --> 00:13:49,623 as we typically don't have so many steps in between. 265 00:13:50,560 --> 00:13:55,560 So there we could say that our smallest size on the page 266 00:13:56,140 --> 00:13:58,440 is the one we should define right now. 267 00:13:58,440 --> 00:14:01,580 And if I quickly check our code, 268 00:14:01,580 --> 00:14:03,603 from a font size perspective, 269 00:14:04,930 --> 00:14:08,570 we see that the smallest font size we are actively using, 270 00:14:08,570 --> 00:14:11,660 for the other elements we're using default values, 271 00:14:11,660 --> 00:14:14,190 is this 18 pixel font size. 272 00:14:14,190 --> 00:14:15,110 Then I could, of course, 273 00:14:15,110 --> 00:14:18,510 also say that the smallest font size I have in here 274 00:14:18,510 --> 00:14:22,163 should be 18 pixels, 275 00:14:23,620 --> 00:14:24,890 like this. 276 00:14:24,890 --> 00:14:28,280 And then I could define the largest font size on the page 277 00:14:28,280 --> 00:14:32,260 with hyphen hyphen size dot five, for example, 278 00:14:32,260 --> 00:14:37,260 which will probably be our price here with 50 pixels. 279 00:14:38,580 --> 00:14:43,083 So if we go up, we can also add 50 pixels right here now, 280 00:14:44,870 --> 00:14:47,910 and now go down, it's the same logic 281 00:14:47,910 --> 00:14:49,640 that we saw for the colors. 282 00:14:49,640 --> 00:14:54,640 Go to the font size, delete the 50 pixels value, 283 00:14:56,140 --> 00:14:59,670 instead add the variable hyphen hyphen, 284 00:14:59,670 --> 00:15:02,920 and now say this should be size-five, 285 00:15:02,920 --> 00:15:07,530 whereas down here, for our 18 pixels value, 286 00:15:07,530 --> 00:15:09,180 for the button class, 287 00:15:09,180 --> 00:15:14,180 we want to use VAR dash dash size one. 288 00:15:15,720 --> 00:15:19,420 With this in place and saved, if we go back to the project, 289 00:15:19,420 --> 00:15:21,540 you again see nothing changed, 290 00:15:21,540 --> 00:15:24,540 but if we now decide that the price, for example, 291 00:15:24,540 --> 00:15:28,400 should be a bit bigger or smaller, 292 00:15:28,400 --> 00:15:30,190 then we can go back to the code, 293 00:15:30,190 --> 00:15:33,820 scroll up to our custom properties, 294 00:15:33,820 --> 00:15:38,820 and say that this should be 60 pixels, for example. 295 00:15:38,844 --> 00:15:40,270 With this in place, if we go back, 296 00:15:40,270 --> 00:15:42,090 we see that the price increased, 297 00:15:42,090 --> 00:15:45,090 and this would also affect all other properties 298 00:15:45,090 --> 00:15:48,740 which hold that CSS variable as a value. 299 00:15:48,740 --> 00:15:50,280 However, I don't like this look, 300 00:15:50,280 --> 00:15:52,893 so let me go back to 50 here. 301 00:15:54,340 --> 00:15:58,010 So this is basically how custom properties 302 00:15:58,010 --> 00:16:00,333 or CSS variables work. 303 00:16:02,520 --> 00:16:03,830 In this project, of course, 304 00:16:03,830 --> 00:16:06,500 these don't help us too much to be honest, 305 00:16:06,500 --> 00:16:07,950 but in bigger projects, 306 00:16:07,950 --> 00:16:11,040 these are a great helper for different color ranges, 307 00:16:11,040 --> 00:16:13,740 for different sizes, and so on. 308 00:16:13,740 --> 00:16:16,200 Before we dive into another topic though, 309 00:16:16,200 --> 00:16:19,470 there is one thing that I quickly want to explain to you, 310 00:16:19,470 --> 00:16:21,150 and this is the reason why 311 00:16:21,150 --> 00:16:23,960 we are using the HTML selector here 312 00:16:23,960 --> 00:16:26,253 to add these custom properties.