WEBVTT 1 00:00:01.310 --> 00:00:05.490 Let's now learn about the very basics of CSS, 2 00:00:05.490 --> 00:00:08.223 and make our webpage look a little bit nicer. 3 00:00:10.020 --> 00:00:12.080 So as you probably already know, 4 00:00:12.080 --> 00:00:14.890 we use CSS to style elements, 5 00:00:14.890 --> 00:00:18.270 and to create a layout for the overall page. 6 00:00:18.270 --> 00:00:20.500 And we can write CSS right here 7 00:00:20.500 --> 00:00:24.510 in the HTML file using the style element. 8 00:00:24.510 --> 00:00:28.400 Okay, and that style element is not for visible content, 9 00:00:28.400 --> 00:00:29.830 here on the page, 10 00:00:29.830 --> 00:00:33.860 and so it would go right here into the head. 11 00:00:33.860 --> 00:00:36.940 Okay, because remember the head is basically, 12 00:00:36.940 --> 00:00:39.650 like for settings of the page. 13 00:00:39.650 --> 00:00:43.253 And the style definitely counts as a setting. 14 00:00:45.640 --> 00:00:46.763 So style, 15 00:00:48.000 --> 00:00:49.520 and now to style elements, 16 00:00:49.520 --> 00:00:51.580 we need to first select them. 17 00:00:51.580 --> 00:00:54.540 And there are different types of selectors in CSS. 18 00:00:54.540 --> 00:00:56.750 And we're gonna learn about a couple of them, 19 00:00:56.750 --> 00:00:58.540 in this video and the next one. 20 00:00:58.540 --> 00:00:59.870 But the most basic one, 21 00:00:59.870 --> 00:01:02.020 is the element selector. 22 00:01:02.020 --> 00:01:03.340 And with the element selector, 23 00:01:03.340 --> 00:01:06.760 we can simply select all elements of a certain type. 24 00:01:06.760 --> 00:01:08.573 For example, the body. 25 00:01:10.110 --> 00:01:11.350 So we write body, 26 00:01:11.350 --> 00:01:13.330 and then curly braces, 27 00:01:13.330 --> 00:01:17.390 and then in here we can write or CSS declarations. 28 00:01:17.390 --> 00:01:20.800 So each CSS declaration has a property name, 29 00:01:20.800 --> 00:01:22.170 and then a value. 30 00:01:22.170 --> 00:01:25.270 For example, we can style the background color. 31 00:01:25.270 --> 00:01:27.370 So background color, 32 00:01:27.370 --> 00:01:29.940 and let me actually autocomplete it here. 33 00:01:29.940 --> 00:01:32.200 So background color is the property, 34 00:01:32.200 --> 00:01:34.343 and then let's say, green. 35 00:01:35.180 --> 00:01:38.450 So in CSS there are a couple of predefined color names, 36 00:01:38.450 --> 00:01:39.700 and we can then use this. 37 00:01:41.923 --> 00:01:44.320 Give it a safe, and bam. 38 00:01:44.320 --> 00:01:46.780 Our page is green now. 39 00:01:46.780 --> 00:01:48.353 So that's CSS for you. 40 00:01:49.500 --> 00:01:52.053 So, we have the body element selector, 41 00:01:52.940 --> 00:01:55.670 then all of this here is our declaration block, 42 00:01:55.670 --> 00:01:58.030 and this here is a simple declaration, 43 00:01:58.030 --> 00:02:01.670 where background color is the property in green, 44 00:02:01.670 --> 00:02:04.010 is the specified value. 45 00:02:04.010 --> 00:02:08.380 Now usually we write or CSS in an external CSS file. 46 00:02:08.380 --> 00:02:10.440 So just like we write JavaScript, 47 00:02:10.440 --> 00:02:12.150 in an external script, 48 00:02:12.150 --> 00:02:15.620 we do the same basically with CSS. 49 00:02:15.620 --> 00:02:18.423 So let's create that separate CSS file. 50 00:02:19.430 --> 00:02:22.690 So I'm bringing back the sidebar here, 51 00:02:22.690 --> 00:02:25.490 using Command or Control B, 52 00:02:25.490 --> 00:02:29.857 and then, let's call this one the style dot CSS. 53 00:02:32.070 --> 00:02:33.323 Close the sidebar, 54 00:02:34.190 --> 00:02:36.690 and now we need to connect these two. 55 00:02:36.690 --> 00:02:39.230 So again, just like we had to connect 56 00:02:39.230 --> 00:02:41.280 the JavaScript file to the HTML, 57 00:02:41.280 --> 00:02:43.430 we also have to select the CSS. 58 00:02:43.430 --> 00:02:45.603 But it works a bit differently. 59 00:02:47.700 --> 00:02:48.693 So let's get, 60 00:02:49.810 --> 00:02:52.310 we'll actually let's copy this here, 61 00:02:52.310 --> 00:02:54.713 or cut it here. 62 00:02:55.690 --> 00:02:58.830 So when I save it now, of course it's gone, 63 00:02:58.830 --> 00:02:59.740 Okay. 64 00:02:59.740 --> 00:03:02.420 And that's because the style file, 65 00:03:02.420 --> 00:03:05.053 is not yet linked to the HTML. 66 00:03:05.890 --> 00:03:10.090 So, we link it by using the link element. 67 00:03:10.090 --> 00:03:11.783 So that's not very creative, 68 00:03:12.920 --> 00:03:15.390 so here we use href again, 69 00:03:15.390 --> 00:03:18.140 which remember is the same attribute, 70 00:03:18.140 --> 00:03:19.763 as in the anchor element here. 71 00:03:20.760 --> 00:03:24.780 Okay, but don't confuse anchor with link. 72 00:03:24.780 --> 00:03:27.220 So link does not create a clickable link, 73 00:03:27.220 --> 00:03:28.720 so like this, 74 00:03:28.720 --> 00:03:31.690 instead we use it only to basically 75 00:03:31.690 --> 00:03:34.203 link CSS files to HTML files. 76 00:03:35.110 --> 00:03:37.840 So here, we say style dot CSS, 77 00:03:37.840 --> 00:03:40.930 because that's the name that we gave to the file. 78 00:03:40.930 --> 00:03:41.763 Okay. 79 00:03:41.763 --> 00:03:43.610 And then we also need to specify 80 00:03:43.610 --> 00:03:46.793 the rel attribute and set it to Stylesheet. 81 00:03:48.800 --> 00:03:51.610 Give it a safe and here we go. 82 00:03:51.610 --> 00:03:53.950 The green color is back. 83 00:03:53.950 --> 00:03:54.783 Okay. 84 00:03:54.783 --> 00:03:57.100 And so now we can write all our styles, 85 00:03:57.100 --> 00:03:59.600 in the separate file here, 86 00:03:59.600 --> 00:04:03.253 and so we separated the presentation from the content. 87 00:04:06.150 --> 00:04:08.513 So let's actually make this like yellow, 88 00:04:10.110 --> 00:04:14.890 and we should probably give it a little bit a nicer color, 89 00:04:14.890 --> 00:04:17.760 and then VS code when you hover a color like this, 90 00:04:17.760 --> 00:04:21.180 you see this pop up which then allows you to select a color. 91 00:04:21.180 --> 00:04:22.330 And this is very handy. 92 00:04:23.430 --> 00:04:25.603 So let's do this, 93 00:04:25.603 --> 00:04:29.493 and then maybe just very subtle color like this. 94 00:04:30.380 --> 00:04:32.773 All right, this looks a lot better already. 95 00:04:33.670 --> 00:04:38.670 Okay, so let's now explore some more CSS properties. 96 00:04:39.140 --> 00:04:42.083 For example, we can set the font family. 97 00:04:42.940 --> 00:04:44.510 And here we can start by setting it 98 00:04:44.510 --> 00:04:47.910 to a font that you probably have on your computer, 99 00:04:47.910 --> 00:04:50.620 and so Arial is probably one that you have, 100 00:04:50.620 --> 00:04:52.900 now in practice we use web fonts, 101 00:04:52.900 --> 00:04:56.360 for example from a service like Google fonts, 102 00:04:56.360 --> 00:04:57.193 okay? 103 00:04:57.193 --> 00:04:59.200 But in this case it doesn't really matter. 104 00:04:59.200 --> 00:05:01.180 So let's just give it a save, 105 00:05:01.180 --> 00:05:04.750 and so, saw this font here changing. 106 00:05:04.750 --> 00:05:07.100 And on your system, that should work too, 107 00:05:07.100 --> 00:05:08.751 and if you don't have Arial, 108 00:05:08.751 --> 00:05:13.240 then just use some other fonts that you have available. 109 00:05:13.240 --> 00:05:14.890 But now you might ask, 110 00:05:14.890 --> 00:05:18.740 we set the font family on the body, right? 111 00:05:18.740 --> 00:05:22.310 So why did all these elements like this h1 here 112 00:05:22.310 --> 00:05:24.200 and this P element, 113 00:05:24.200 --> 00:05:26.080 and this h2 element, 114 00:05:26.080 --> 00:05:29.840 why did all of them get the Aria font as well? 115 00:05:29.840 --> 00:05:32.910 Well, that's because the font family property 116 00:05:32.910 --> 00:05:35.331 is a property that gets inherited. 117 00:05:35.331 --> 00:05:38.603 Okay. So all the Child Elements of the body element, 118 00:05:38.603 --> 00:05:43.230 will automatically get this font family assigned to them. 119 00:05:43.230 --> 00:05:44.840 And that makes it very handy, 120 00:05:44.840 --> 00:05:46.730 So that we don't have to go ahead, 121 00:05:46.730 --> 00:05:50.380 and set the font families separately on all these elements. 122 00:05:50.380 --> 00:05:52.330 So just setting this on the body, 123 00:05:52.330 --> 00:05:55.290 will then set it on all the Child Elements. 124 00:05:55.290 --> 00:05:58.460 Now, most properties to actually not inherit. 125 00:05:58.460 --> 00:06:00.030 But generally, all the properties 126 00:06:00.030 --> 00:06:03.130 that are related to funds will inherit. 127 00:06:03.130 --> 00:06:08.130 So let's check out another one, font size, 128 00:06:08.830 --> 00:06:10.603 and let's set it to 20 pixels. 129 00:06:13.180 --> 00:06:14.240 Give it a save, 130 00:06:14.240 --> 00:06:17.210 and you'll see that everything got a little bit bigger now. 131 00:06:17.210 --> 00:06:19.440 However, not all the elements 132 00:06:19.440 --> 00:06:21.970 have a font size of 20 pixels now. 133 00:06:21.970 --> 00:06:24.940 And that's because the elements like this h1, 134 00:06:24.940 --> 00:06:28.300 and this h2 have predefined font sizes 135 00:06:28.300 --> 00:06:31.210 that automatically are applied from the browser, 136 00:06:31.210 --> 00:06:33.900 if we do not specify them on our own. 137 00:06:33.900 --> 00:06:34.733 Okay. 138 00:06:34.733 --> 00:06:36.110 But of course we can overwrite them 139 00:06:36.110 --> 00:06:38.180 with our own selectors. 140 00:06:38.180 --> 00:06:40.260 So let's say h1, 141 00:06:40.260 --> 00:06:42.760 and so this is another element selector, 142 00:06:42.760 --> 00:06:46.053 and in this case of course it selects the h1 element. 143 00:06:47.790 --> 00:06:50.800 So let's say font size 50 pixels. 144 00:06:50.800 --> 00:06:53.123 And so take a look at this now, 145 00:06:54.110 --> 00:06:56.214 and well that's huge. 146 00:06:56.214 --> 00:06:59.253 Let's make it a little bit smaller maybe 40, 147 00:07:00.130 --> 00:07:02.200 now that looks about right. 148 00:07:02.200 --> 00:07:03.033 All right. 149 00:07:03.033 --> 00:07:04.547 And now let's actually use the class names 150 00:07:04.547 --> 00:07:07.650 and DIDs that we set in the previous lecture 151 00:07:07.650 --> 00:07:11.750 to now select elements based on these classes. 152 00:07:11.750 --> 00:07:15.410 So, remember that here we set this paragraph 153 00:07:15.410 --> 00:07:19.100 to first and this one to second. 154 00:07:19.100 --> 00:07:21.830 So we basically named them like this. 155 00:07:21.830 --> 00:07:23.790 And in fact, let's go ahead, 156 00:07:23.790 --> 00:07:27.303 and add another class here to this other paragraph. 157 00:07:28.370 --> 00:07:33.370 So class, and I will call this one first two. 158 00:07:34.000 --> 00:07:34.833 Okay. 159 00:07:34.833 --> 00:07:37.660 So remember, IDs have to be unique, 160 00:07:37.660 --> 00:07:39.320 so we can only use them once. 161 00:07:39.320 --> 00:07:41.820 But classes can be used multiple times. 162 00:07:41.820 --> 00:07:43.850 And so that's what we did here. 163 00:07:43.850 --> 00:07:45.280 And so now I can go ahead 164 00:07:45.280 --> 00:07:46.920 and select all the elements, 165 00:07:46.920 --> 00:07:48.700 which have the first class, 166 00:07:48.700 --> 00:07:51.360 so this paragraph and this paragraph, 167 00:07:51.360 --> 00:07:53.410 and then style them however I want. 168 00:07:53.410 --> 00:07:56.200 And this will then only affect these two paragraphs, 169 00:07:56.200 --> 00:07:57.563 but not this one. 170 00:07:58.810 --> 00:08:01.820 Okay, because this one has the second class. 171 00:08:01.820 --> 00:08:03.170 So let me show that to you. 172 00:08:04.210 --> 00:08:07.770 And so the class selector is using the dot. 173 00:08:07.770 --> 00:08:10.083 So dot first. 174 00:08:11.380 --> 00:08:14.180 Okay, and so this is our selector. 175 00:08:14.180 --> 00:08:15.900 Dot is for the class. 176 00:08:15.900 --> 00:08:18.540 And then first is the class name. 177 00:08:18.540 --> 00:08:20.850 And so we set the text color, 178 00:08:20.850 --> 00:08:22.940 using the color property. 179 00:08:22.940 --> 00:08:24.900 And let's set it to red. 180 00:08:24.900 --> 00:08:26.160 Give it a safe, 181 00:08:26.160 --> 00:08:28.770 and what do you think will happen now? 182 00:08:28.770 --> 00:08:30.260 That's right. 183 00:08:30.260 --> 00:08:32.210 This paragraph and this one, 184 00:08:32.210 --> 00:08:33.520 which are the two paragraphs, 185 00:08:33.520 --> 00:08:37.190 which have the first class are now red. 186 00:08:37.190 --> 00:08:40.360 But this other paragraph, is of course not read, 187 00:08:40.360 --> 00:08:42.510 because we didn't select it here. 188 00:08:42.510 --> 00:08:43.343 Okay. 189 00:08:43.343 --> 00:08:46.283 And so this CSS rule here does not apply to it. 190 00:08:48.950 --> 00:08:51.603 Finally, that's also format or form. 191 00:08:52.800 --> 00:08:56.800 So, let's check that out, 192 00:08:56.800 --> 00:09:01.170 and so here we have this your name ID, right? 193 00:09:01.170 --> 00:09:04.990 So we already know how to select based on the class name, 194 00:09:04.990 --> 00:09:08.533 and so let's now learn how to select based on ID. 195 00:09:10.130 --> 00:09:12.450 And it's very similar but instead of the dot, 196 00:09:12.450 --> 00:09:14.040 we use the hash. 197 00:09:14.040 --> 00:09:17.040 So hash, your name, 198 00:09:17.040 --> 00:09:20.360 I think that was the ID, right? 199 00:09:20.360 --> 00:09:21.803 Yes, your name. 200 00:09:25.410 --> 00:09:27.893 So let's set a different background color here, 201 00:09:31.690 --> 00:09:33.130 and I will again use this trick 202 00:09:33.130 --> 00:09:34.720 where I can now set the color 203 00:09:35.560 --> 00:09:38.280 using this pop up window, 204 00:09:38.280 --> 00:09:39.980 so that's the trick I like to use. 205 00:09:41.570 --> 00:09:44.570 Let's make it similar but a little bit darker. 206 00:09:44.570 --> 00:09:47.180 Yes, that looks nice. 207 00:09:47.180 --> 00:09:49.890 And we will make it even nicer in the next lecture, 208 00:09:49.890 --> 00:09:52.020 after we learned about the box model, 209 00:09:52.020 --> 00:09:53.823 but for now this looks good already. 210 00:09:55.450 --> 00:09:57.000 So another one that we can use here 211 00:09:57.000 --> 00:09:59.230 is the border property, 212 00:09:59.230 --> 00:10:00.830 and the border property, 213 00:10:00.830 --> 00:10:03.940 is so called shorthand property. 214 00:10:03.940 --> 00:10:06.360 Because here we can set multiple values 215 00:10:06.360 --> 00:10:08.230 for just one property. 216 00:10:08.230 --> 00:10:10.950 So for the border we can set the width, 217 00:10:10.950 --> 00:10:13.380 so basically the thickness of the border, 218 00:10:13.380 --> 00:10:15.200 so let's say five pixels, 219 00:10:15.200 --> 00:10:17.803 then we can set the style of the border, 220 00:10:18.860 --> 00:10:20.480 and let's make it solid, 221 00:10:20.480 --> 00:10:23.572 but we could also make it dotted or dashed, 222 00:10:23.572 --> 00:10:26.750 but that would look a little bit like weird, 223 00:10:26.750 --> 00:10:28.490 and then the color. 224 00:10:28.490 --> 00:10:33.030 So until now, we have always used CSS color names, 225 00:10:33.030 --> 00:10:36.090 or this RGB format like this, 226 00:10:36.090 --> 00:10:40.023 But of course CSS also accepts RGB colors. 227 00:10:40.920 --> 00:10:42.460 So for that we use the hash, 228 00:10:42.460 --> 00:10:46.083 and then let's use 444 as this dark gray. 229 00:10:47.230 --> 00:10:49.163 So you see it as dark gray, 230 00:10:50.550 --> 00:10:52.340 but we could of course change it, 231 00:10:52.340 --> 00:10:55.123 again using this pop up. 232 00:10:56.500 --> 00:10:57.333 Okay. 233 00:10:57.333 --> 00:10:59.420 But let's leave it here with the RGB code, 234 00:10:59.420 --> 00:11:01.920 give it a save and here you see, 235 00:11:01.920 --> 00:11:04.540 this nice border around the form. 236 00:11:04.540 --> 00:11:05.570 Okay. 237 00:11:05.570 --> 00:11:09.350 So again, this border is a shorthand property, 238 00:11:09.350 --> 00:11:10.900 because it allows us to specify 239 00:11:10.900 --> 00:11:13.560 multiple values here like this. 240 00:11:13.560 --> 00:11:15.490 You can also notice that this property 241 00:11:15.490 --> 00:11:18.170 is not inherited, right? 242 00:11:18.170 --> 00:11:22.487 So unlike the font family or the font size. 243 00:11:22.487 --> 00:11:24.450 'Cause if it was inherited, 244 00:11:24.450 --> 00:11:26.670 then now all these Child Elements here 245 00:11:26.670 --> 00:11:30.020 would have a five pixel border around them as well. 246 00:11:30.020 --> 00:11:30.980 Right? 247 00:11:30.980 --> 00:11:32.380 So this one and this one, 248 00:11:32.380 --> 00:11:33.790 but they do not. 249 00:11:33.790 --> 00:11:36.550 And while in this case it wouldn't make sense. 250 00:11:36.550 --> 00:11:39.510 And so that's why border is not inherited. 251 00:11:39.510 --> 00:11:42.840 Okay, and this would be enough for one lecture. 252 00:11:42.840 --> 00:11:45.270 In the next one, we will learn about the box model, 253 00:11:45.270 --> 00:11:47.620 so that we can then add some spacing here. 254 00:11:47.620 --> 00:11:50.830 For example some spacing here inside of this box, 255 00:11:50.830 --> 00:11:52.590 to give it some space here, 256 00:11:52.590 --> 00:11:55.270 and also some space between these elements. 257 00:11:55.270 --> 00:11:57.080 So stay tuned for that, 258 00:11:57.080 --> 00:11:58.803 and see you in the next lecture.