WEBVTT 1 00:00:01.590 --> 00:00:02.960 The box model is one 2 00:00:02.960 --> 00:00:06.310 of the most fundamental parts of CSS. 3 00:00:06.310 --> 00:00:09.470 That's because it's the main factor that defines 4 00:00:09.470 --> 00:00:12.680 how elements are displayed on a webpage 5 00:00:12.680 --> 00:00:14.823 and also how they are sized. 6 00:00:16.340 --> 00:00:18.810 So according to the box model, 7 00:00:18.810 --> 00:00:21.980 each and every element on a webpage can be seen 8 00:00:21.980 --> 00:00:26.370 as a rectangular box and each box can have a width, 9 00:00:26.370 --> 00:00:30.560 a height, padding, margins and a border. 10 00:00:30.560 --> 00:00:34.750 And we can specify all these using CSS properties, 11 00:00:34.750 --> 00:00:37.080 but note that they are all optional. 12 00:00:37.080 --> 00:00:39.680 So there can be boxes with no margins 13 00:00:39.680 --> 00:00:43.470 or no paddings or no border at all. 14 00:00:43.470 --> 00:00:47.220 Now this image here shows us how the box model works. 15 00:00:47.220 --> 00:00:51.290 And so let's break it down, first the content of a box 16 00:00:51.290 --> 00:00:53.830 is where all the text images 17 00:00:53.830 --> 00:00:56.760 and other content that we specify goes. 18 00:00:56.760 --> 00:01:00.000 We can easily define its height and with using 19 00:01:00.000 --> 00:01:02.600 the corresponding CSS properties. 20 00:01:02.600 --> 00:01:05.600 Next, the padding is a transparent area 21 00:01:05.600 --> 00:01:10.010 around the content but still inside of the box. 22 00:01:10.010 --> 00:01:13.700 And we use paddings to create white space inside of a box. 23 00:01:13.700 --> 00:01:15.070 And we can define the padding 24 00:01:15.070 --> 00:01:19.250 by specifying the padding property in CSS. 25 00:01:19.250 --> 00:01:22.910 Next, we can specify a border for any box 26 00:01:22.910 --> 00:01:24.650 and that border then goes around 27 00:01:24.650 --> 00:01:26.830 the padding and the content. 28 00:01:26.830 --> 00:01:31.140 And this actually we already did in the last lecture, right? 29 00:01:31.140 --> 00:01:34.870 Then similar to the padding, we have the margin, 30 00:01:34.870 --> 00:01:37.550 but instead of being inside the box, 31 00:01:37.550 --> 00:01:39.540 the margin is white space 32 00:01:39.540 --> 00:01:43.150 that's actually outside of the box itself. 33 00:01:43.150 --> 00:01:47.440 So we can think of margin as the space between boxes. 34 00:01:47.440 --> 00:01:48.690 So for instance, 35 00:01:48.690 --> 00:01:51.980 if we want to create some space between two elements, 36 00:01:51.980 --> 00:01:55.950 we will simply use their margin properties and CSS. 37 00:01:55.950 --> 00:02:00.020 And finally, there is something called the fill area. 38 00:02:00.020 --> 00:02:02.150 So remember how the text content 39 00:02:02.150 --> 00:02:05.630 and images go inside the content box, 40 00:02:05.630 --> 00:02:09.030 well, the same does not apply for background images 41 00:02:09.030 --> 00:02:12.030 or the background color of a box. 42 00:02:12.030 --> 00:02:14.920 These properties will actually be applied not only 43 00:02:14.920 --> 00:02:18.830 to the content box, but to the entire fill area, 44 00:02:18.830 --> 00:02:21.920 which also includes the padding and the border, 45 00:02:21.920 --> 00:02:24.450 but not the margin, okay? 46 00:02:24.450 --> 00:02:27.050 Alright, so let's go back to our code 47 00:02:27.050 --> 00:02:29.333 and implement some of these properties. 48 00:02:30.600 --> 00:02:32.950 Now, if we take a look at our page here, 49 00:02:32.950 --> 00:02:35.210 we will see that actually there's already 50 00:02:35.210 --> 00:02:37.700 a lot of space here, right? 51 00:02:37.700 --> 00:02:41.890 For example, between this heading and this paragraph, 52 00:02:41.890 --> 00:02:44.650 and here is space and here, 53 00:02:44.650 --> 00:02:46.820 and there's also a lot of space 54 00:02:46.820 --> 00:02:49.250 around this h2 element here. 55 00:02:49.250 --> 00:02:50.940 And that's because by default, 56 00:02:50.940 --> 00:02:53.730 some elements get some margin automatically 57 00:02:53.730 --> 00:02:56.470 if we don't define them, okay. 58 00:02:56.470 --> 00:02:58.160 Now that can create some problems 59 00:02:58.160 --> 00:03:00.320 when we're trying to style our page. 60 00:03:00.320 --> 00:03:02.670 And so usually what we do is that 61 00:03:02.670 --> 00:03:05.960 we reset all of the margins and all of the paddings 62 00:03:05.960 --> 00:03:09.300 on all elements before doing anything else. 63 00:03:09.300 --> 00:03:12.460 So this is called a global reset. 64 00:03:12.460 --> 00:03:16.080 And so to do that, we need to select all the elements. 65 00:03:16.080 --> 00:03:18.700 And for that, we have a special selector 66 00:03:18.700 --> 00:03:23.640 and that is a star selector, okay? 67 00:03:23.640 --> 00:03:24.670 So again, with this, 68 00:03:24.670 --> 00:03:29.140 we can select all the elements on the page. 69 00:03:29.140 --> 00:03:33.723 So what we do then is to set the margin to zero pixels. 70 00:03:34.570 --> 00:03:35.720 And when we use zero, 71 00:03:35.720 --> 00:03:38.300 we don't even need to specify the unit. 72 00:03:38.300 --> 00:03:40.963 So just a zero like this, 73 00:03:43.040 --> 00:03:48.040 and the same for padding set to zero as well. 74 00:03:48.730 --> 00:03:52.950 If I give it a save now, it looks like this. 75 00:03:52.950 --> 00:03:55.630 So all the paddings and all the margins 76 00:03:55.630 --> 00:03:57.120 are effectively gone. 77 00:03:57.120 --> 00:03:59.810 And that's exactly what we wanted. 78 00:03:59.810 --> 00:04:03.013 Now, we also need to add another property here. 79 00:04:04.220 --> 00:04:07.750 I mean, we do not have to, but we usually always do, 80 00:04:07.750 --> 00:04:12.750 which is the box sizing property set to border box, okay. 81 00:04:13.530 --> 00:04:15.480 Now this will not change anything here, 82 00:04:15.480 --> 00:04:18.870 and I'm not gonna go into detail what this does. 83 00:04:18.870 --> 00:04:20.503 I'm just putting it here so that you know, 84 00:04:20.503 --> 00:04:23.650 that we always use it, okay. 85 00:04:23.650 --> 00:04:25.490 So essentially what this does is that 86 00:04:25.490 --> 00:04:28.870 it will include paddings and borders into the width 87 00:04:28.870 --> 00:04:32.270 or the height that we specify for an element. 88 00:04:32.270 --> 00:04:34.950 So for example, if we specify the width of an element 89 00:04:34.950 --> 00:04:38.870 to 100 pixels, and then add a padding of 20 pixels 90 00:04:38.870 --> 00:04:42.130 on each side, then 100 plus 20 plus 20 91 00:04:42.130 --> 00:04:45.710 would be a total width of 140 pixels, 92 00:04:45.710 --> 00:04:47.110 which could create problems, 93 00:04:47.110 --> 00:04:50.420 if all we wanted was a width of 100 pixels. 94 00:04:50.420 --> 00:04:54.460 And so to fix this, we use box sizing set to border box. 95 00:04:54.460 --> 00:04:58.260 And so in this case, if we specify the width to 100 pixels, 96 00:04:58.260 --> 00:05:00.430 it will always be 100 pixels, 97 00:05:00.430 --> 00:05:03.210 no matter how much the padding, okay. 98 00:05:03.210 --> 00:05:05.140 And if that doesn't make a lot of sense 99 00:05:05.140 --> 00:05:08.460 to you at this point, then you can always Google around 100 00:05:08.460 --> 00:05:11.250 how it works, if you want to go into more detail. 101 00:05:11.250 --> 00:05:13.580 But since this is just a crash course, 102 00:05:13.580 --> 00:05:16.540 I'm not gonna go into a lot more detail. 103 00:05:16.540 --> 00:05:19.310 So now what I want to do is to add back some margins 104 00:05:19.310 --> 00:05:23.650 and some paddings so that you can see how exactly they work. 105 00:05:23.650 --> 00:05:25.940 And let's actually add with the body 106 00:05:25.940 --> 00:05:29.060 and here we will set some padding, okay. 107 00:05:29.060 --> 00:05:30.533 And why do we use padding? 108 00:05:31.370 --> 00:05:34.390 Well, it's because we want to add some space 109 00:05:34.390 --> 00:05:37.270 inside of this body element. 110 00:05:37.270 --> 00:05:38.900 So basically to create some space 111 00:05:38.900 --> 00:05:41.280 between the border of the browser, 112 00:05:41.280 --> 00:05:43.853 so of this view part and the content. 113 00:05:44.910 --> 00:05:47.560 So let's set it to 75 pixels. 114 00:05:47.560 --> 00:05:50.780 And by the way, there are also other units in CSS. 115 00:05:50.780 --> 00:05:52.800 We don't always have to use pixels. 116 00:05:52.800 --> 00:05:57.480 We can use percentages or other more weird units like em 117 00:05:57.480 --> 00:06:01.150 or rem or points or anything like that. 118 00:06:01.150 --> 00:06:02.620 But to start out it's easier 119 00:06:02.620 --> 00:06:05.770 to just understand with pixels, okay. 120 00:06:05.770 --> 00:06:07.090 So give it a save. 121 00:06:07.090 --> 00:06:10.460 And so now you see that it added this nice space 122 00:06:10.460 --> 00:06:13.000 between the sides, okay. 123 00:06:13.000 --> 00:06:17.920 It's maybe a bit too much, put it back to a 50, okay. 124 00:06:17.920 --> 00:06:20.000 And now let's move on and add some space 125 00:06:20.000 --> 00:06:23.400 between this heading here and this paragraph. 126 00:06:23.400 --> 00:06:25.570 And to do that, we can simply add some margin 127 00:06:25.570 --> 00:06:29.630 to the bottom of this h1, okay. 128 00:06:29.630 --> 00:06:33.806 So we can specify paddings and margins like this. 129 00:06:33.806 --> 00:06:35.680 Or as we did here margin and padding 130 00:06:35.680 --> 00:06:37.240 and that will then apply them 131 00:06:37.240 --> 00:06:39.840 to the four sides of the element, 132 00:06:39.840 --> 00:06:42.090 but we can also do that selectively 133 00:06:42.090 --> 00:06:44.260 to only the left side or the right side 134 00:06:44.260 --> 00:06:47.800 or the top side or the bottom side. 135 00:06:47.800 --> 00:06:51.840 And so let's now add margin to the bottom of each one. 136 00:06:51.840 --> 00:06:56.840 So margin and then bottom, and I'd say 25 pixels, 137 00:06:57.150 --> 00:06:58.120 give it a save. 138 00:06:58.120 --> 00:07:00.930 And here we have, okay. 139 00:07:00.930 --> 00:07:02.690 Now, if we did padding here, 140 00:07:02.690 --> 00:07:05.053 it would actually look the exact same way. 141 00:07:06.110 --> 00:07:08.000 Let me show that to you. 142 00:07:08.000 --> 00:07:10.040 And indeed it works the same way, 143 00:07:10.040 --> 00:07:13.860 but now this space is inside of the h1. 144 00:07:13.860 --> 00:07:16.623 Let me show that to you using the inspector. 145 00:07:20.950 --> 00:07:24.343 So this is the h1 and two green part is the padding. 146 00:07:25.349 --> 00:07:27.360 You can also see that here. 147 00:07:27.360 --> 00:07:29.390 So this is the content, 148 00:07:29.390 --> 00:07:32.100 and then we have 25 of padding 149 00:07:32.100 --> 00:07:33.850 and here you also have to border 150 00:07:33.850 --> 00:07:36.480 and then the margin outside of the border. 151 00:07:36.480 --> 00:07:38.200 So outside of the element. 152 00:07:38.200 --> 00:07:39.600 And essentially this is what we learned 153 00:07:39.600 --> 00:07:42.600 at the beginning of this video, right? 154 00:07:42.600 --> 00:07:45.030 But it makes more sense for this space actually 155 00:07:45.030 --> 00:07:47.400 to be outside of the element. 156 00:07:47.400 --> 00:07:51.380 And so a margin in this case makes more sense. 157 00:07:51.380 --> 00:07:53.040 And so you see that now this 25 158 00:07:53.040 --> 00:07:56.430 is here painted in red, right? 159 00:07:56.430 --> 00:08:00.040 And so it's now outside of the element, okay. 160 00:08:00.040 --> 00:08:03.310 So this elements tab here in the developer tools 161 00:08:03.310 --> 00:08:07.530 is pretty useful to inspect the styles 162 00:08:07.530 --> 00:08:10.710 of all the elements and also to check out the markup. 163 00:08:10.710 --> 00:08:12.620 So the HTML in here. 164 00:08:12.620 --> 00:08:17.390 We can turn on and off these different properties. 165 00:08:17.390 --> 00:08:21.490 And in general, this is really helpful to work 166 00:08:21.490 --> 00:08:24.003 with HTML and CSS in the browser. 167 00:08:25.530 --> 00:08:28.280 Next up, we should probably also add some spacing 168 00:08:28.280 --> 00:08:30.163 after the h2 elements. 169 00:08:35.080 --> 00:08:39.553 So let's say margin bottom 20 pixel, okay. 170 00:08:40.530 --> 00:08:41.910 And we can also do another thing 171 00:08:41.910 --> 00:08:43.440 that I didn't show you before, 172 00:08:43.440 --> 00:08:46.440 which is to set the text-align property. 173 00:08:46.440 --> 00:08:48.140 So text-align, 174 00:08:48.140 --> 00:08:51.490 and now we can set it to a left right or center. 175 00:08:51.490 --> 00:08:53.193 And I wanna set it to center here. 176 00:08:54.367 --> 00:08:58.650 And then as you expect the text will get centered here. 177 00:08:58.650 --> 00:09:01.993 So basically centered inside this whole box. 178 00:09:03.280 --> 00:09:05.200 So the h2 box, and again, 179 00:09:05.200 --> 00:09:08.900 we can see the box using the inspector, okay. 180 00:09:08.900 --> 00:09:11.950 So the box itself is this whole blue space 181 00:09:11.950 --> 00:09:13.610 that we can see up there. 182 00:09:13.610 --> 00:09:16.550 And so the text of the h2 is then centered 183 00:09:16.550 --> 00:09:19.250 inside the h2 box, okay. 184 00:09:19.250 --> 00:09:21.480 And remember that this is a block element. 185 00:09:21.480 --> 00:09:24.490 And so that's why it creates a box basically. 186 00:09:24.490 --> 00:09:26.300 So block elements are the elements 187 00:09:26.300 --> 00:09:29.130 that create their own line and inline elements. 188 00:09:29.130 --> 00:09:31.303 Remember, it's like the link here. 189 00:09:32.240 --> 00:09:34.230 So if we inspect this one, 190 00:09:34.230 --> 00:09:37.110 you see that the box only occupies the space 191 00:09:37.110 --> 00:09:39.320 of the text itself, right? 192 00:09:39.320 --> 00:09:41.903 It doesn't create a whole box on a whole line. 193 00:09:42.940 --> 00:09:45.090 So that's the big difference between inline 194 00:09:45.090 --> 00:09:47.463 and block elements now, right? 195 00:09:49.090 --> 00:09:50.390 Okay. 196 00:09:50.390 --> 00:09:54.060 So this form here, of course is also a block element. 197 00:09:54.060 --> 00:09:57.590 And so let's make it a little bit more narrow. 198 00:09:57.590 --> 00:10:00.600 And so, as we learned, by the beginning of the lecture, 199 00:10:00.600 --> 00:10:03.003 we can do that using the width property. 200 00:10:04.670 --> 00:10:07.790 So let's set it to 400 pixels 201 00:10:08.700 --> 00:10:12.840 and that looks a lot nicer, okay. 202 00:10:12.840 --> 00:10:14.610 Now we also want to create some space 203 00:10:14.610 --> 00:10:17.310 between all this content and the border. 204 00:10:17.310 --> 00:10:19.610 And so how do we do that? 205 00:10:19.610 --> 00:10:21.200 Well, that's right. 206 00:10:21.200 --> 00:10:24.590 We have to use padding because padding creates space 207 00:10:24.590 --> 00:10:29.590 inside of the box and yes, indeed it does. 208 00:10:30.870 --> 00:10:33.720 And now let's also create some space between the image 209 00:10:33.720 --> 00:10:36.640 and this form here, okay. 210 00:10:36.640 --> 00:10:39.203 And so here we can add some margin to the top. 211 00:10:41.280 --> 00:10:46.280 So margin top, and let's say, well, 50 pixels. 212 00:10:47.870 --> 00:10:51.550 Might be a bit too much now let's just edit to a 30, 213 00:10:51.550 --> 00:10:53.300 so we can see it. 214 00:10:53.300 --> 00:10:55.770 And now let me actually just show you what happens 215 00:10:55.770 --> 00:11:00.310 if we take out this property here, okay. 216 00:11:00.310 --> 00:11:01.740 So we comment it out, 217 00:11:01.740 --> 00:11:04.630 just like we comment out code in JavaScript. 218 00:11:04.630 --> 00:11:06.910 So let's hit Comment slash. 219 00:11:06.910 --> 00:11:11.760 And so you see in CSS, the comments are like this. 220 00:11:11.760 --> 00:11:16.460 So slash star star slash and not slash slash, okay. 221 00:11:16.460 --> 00:11:17.390 And so as I save now, 222 00:11:17.390 --> 00:11:19.310 take a close look here at this form 223 00:11:20.710 --> 00:11:23.623 and you see that it now get wider. 224 00:11:24.970 --> 00:11:26.373 So let's inspected here. 225 00:11:29.270 --> 00:11:31.607 So the form, we need to select the form here 226 00:11:31.607 --> 00:11:32.943 and then scroll down. 227 00:11:34.020 --> 00:11:37.090 And so now you see what I explained earlier. 228 00:11:37.090 --> 00:11:39.830 So we define the width as 400, 229 00:11:39.830 --> 00:11:43.580 but then we have a padding of 25 here, right? 230 00:11:43.580 --> 00:11:45.820 And so that gets added 231 00:11:45.820 --> 00:11:48.170 to the total width of the element. 232 00:11:48.170 --> 00:11:51.800 So we have 400 plus 25 plus here 25 here, 233 00:11:51.800 --> 00:11:54.890 and then also five pixels border on each side. 234 00:11:54.890 --> 00:11:56.897 So five here and five here. 235 00:11:56.897 --> 00:11:59.830 And so that makes it then that the whole element, 236 00:11:59.830 --> 00:12:03.223 adds up to 460 pixels, I would guess. 237 00:12:04.230 --> 00:12:06.390 So you can see that here on the screen. 238 00:12:06.390 --> 00:12:09.600 So up here that it says that the width 239 00:12:09.600 --> 00:12:12.120 is actually 460, okay. 240 00:12:12.120 --> 00:12:14.740 And so again, that's because it adds up all the borders 241 00:12:14.740 --> 00:12:16.793 and the paddings to the width. 242 00:12:17.710 --> 00:12:20.700 And that's what happens without box sizing to border box. 243 00:12:20.700 --> 00:12:25.700 But as I put it back on, so again, comment slash. 244 00:12:25.870 --> 00:12:27.050 If I save it now, 245 00:12:27.050 --> 00:12:29.700 now we are back to what we expected. 246 00:12:29.700 --> 00:12:33.360 So 400, so we set it here to 400. 247 00:12:33.360 --> 00:12:35.903 And so we wanted it to be exactly 400 248 00:12:35.903 --> 00:12:39.090 and not for all the other stuff to be added. 249 00:12:39.090 --> 00:12:41.533 And so now, as you see here, it says 400. 250 00:12:42.410 --> 00:12:45.640 And so automatically CSS then changed the width 251 00:12:45.640 --> 00:12:48.830 of the content here to just 340 252 00:12:48.830 --> 00:12:52.290 to accommodate the rest of the width. 253 00:12:52.290 --> 00:12:54.310 Basically that's needed for the padding 254 00:12:54.310 --> 00:12:57.410 and the border, okay. 255 00:12:57.410 --> 00:12:59.793 So I said, I wouldn't go into a lot of detail, 256 00:12:59.793 --> 00:13:00.626 (instructor laughs) 257 00:13:00.626 --> 00:13:02.133 but I guess I just did anyway. 258 00:13:04.460 --> 00:13:07.200 But anyway, let's now also add some margin 259 00:13:07.200 --> 00:13:09.573 to these paragraphs here. 260 00:13:11.250 --> 00:13:15.070 So I used the first class to select 261 00:13:15.070 --> 00:13:17.860 this paragraph and this paragraph, 262 00:13:17.860 --> 00:13:20.450 but now we want to select all three paragraphs. 263 00:13:20.450 --> 00:13:23.780 And so for that, we can simply use the P selector 264 00:13:23.780 --> 00:13:26.220 and that will then select all of them, 265 00:13:26.220 --> 00:13:30.800 regardless of any class names, okay. 266 00:13:30.800 --> 00:13:35.750 So margin bottom, and let's set it to 10 pixels or 20, 267 00:13:35.750 --> 00:13:37.653 so we can see it a little bit better. 268 00:13:38.620 --> 00:13:40.340 And so you'll see that, in fact, 269 00:13:40.340 --> 00:13:41.910 the margin now got applied 270 00:13:41.910 --> 00:13:45.393 to all three of these paragraphs, just as we wanted. 271 00:13:46.380 --> 00:13:50.063 Next up, we can also select the input and the button. 272 00:13:51.350 --> 00:13:53.730 So here we have to input and button elements 273 00:13:53.730 --> 00:13:56.850 and we can also style them a little bit too. 274 00:13:56.850 --> 00:13:59.653 So let me actually show you another cool thing. 275 00:14:00.700 --> 00:14:02.393 So we have the input selector, 276 00:14:03.280 --> 00:14:06.210 but now we want these rules that we're gonna write here 277 00:14:06.210 --> 00:14:09.020 to apply to both the input and the button. 278 00:14:09.020 --> 00:14:13.310 And so we can write input, comma, button. 279 00:14:13.310 --> 00:14:15.160 And so this rule here will then apply 280 00:14:15.160 --> 00:14:17.493 to both of these selectors. 281 00:14:19.150 --> 00:14:22.070 So let's add a padding of 10 pixels 282 00:14:22.070 --> 00:14:24.190 and increase the font size. 283 00:14:24.190 --> 00:14:26.690 Let's say two 16 pixels. 284 00:14:26.690 --> 00:14:28.173 So look at them now. 285 00:14:29.460 --> 00:14:31.080 And indeed they got bigger 286 00:14:31.080 --> 00:14:33.803 and they got this nice padding in there now. 287 00:14:34.780 --> 00:14:38.320 And once more, you can see it that these two elements, 288 00:14:38.320 --> 00:14:41.450 so input and button are inline elements. 289 00:14:41.450 --> 00:14:43.070 So this one and this one, 290 00:14:43.070 --> 00:14:46.900 they both don't create a box that occupies the whole line. 291 00:14:46.900 --> 00:14:49.010 So again, just like the link 292 00:14:49.010 --> 00:14:52.040 and I can actually show that to you 293 00:14:52.040 --> 00:14:55.340 by styling just this link. 294 00:14:55.340 --> 00:15:00.083 So let's say, a background color, 295 00:15:01.970 --> 00:15:04.063 and set it to yellow. 296 00:15:04.960 --> 00:15:08.193 And then here you see, and at least I hope you can see it. 297 00:15:09.539 --> 00:15:10.950 Or let's actually set it to yellow green, 298 00:15:10.950 --> 00:15:12.163 I think that's another. 299 00:15:13.480 --> 00:15:14.680 Yes. 300 00:15:14.680 --> 00:15:16.210 And so now you can see it. 301 00:15:16.210 --> 00:15:19.860 And so the box now is only this element itself, 302 00:15:19.860 --> 00:15:22.703 but not the whole width of the screen, okay. 303 00:15:24.040 --> 00:15:26.780 So actually, yeah, let's leave it like this. 304 00:15:26.780 --> 00:15:30.250 So you can have this as a reference and now to finish, 305 00:15:30.250 --> 00:15:32.210 I just want to show you one final, 306 00:15:32.210 --> 00:15:34.830 but very important selector. 307 00:15:34.830 --> 00:15:37.420 And this one is actually pretty important for you to know, 308 00:15:37.420 --> 00:15:40.210 because we're also gonna use this all the time 309 00:15:40.210 --> 00:15:42.430 in JavaScript to select elements 310 00:15:42.430 --> 00:15:44.460 when we do DOM manipulation, 311 00:15:44.460 --> 00:15:46.490 because in fact, all the selectors, 312 00:15:46.490 --> 00:15:48.920 the way they work in CSS, for example, 313 00:15:48.920 --> 00:15:52.250 the dot first or here, the ID selector, 314 00:15:52.250 --> 00:15:53.550 they're gonna work just the same 315 00:15:53.550 --> 00:15:55.820 to select elements in JavaScript. 316 00:15:55.820 --> 00:15:58.830 And so that's one of the reasons why it's very important 317 00:15:58.830 --> 00:16:00.913 to learn how these selectors work. 318 00:16:02.100 --> 00:16:04.500 So anyway, the selector that I wanted to show you 319 00:16:04.500 --> 00:16:06.470 is the child selector. 320 00:16:06.470 --> 00:16:08.770 So the example I have here 321 00:16:08.770 --> 00:16:12.120 is that we have these two h2 headings. 322 00:16:12.120 --> 00:16:14.820 So this one and this one. 323 00:16:14.820 --> 00:16:18.310 But let's say I only wanted to select the h2 elements 324 00:16:18.310 --> 00:16:22.960 that are inside of this form here, okay. 325 00:16:22.960 --> 00:16:25.790 So of course I could go ahead and add an ID 326 00:16:25.790 --> 00:16:27.363 or a class to this one. 327 00:16:28.290 --> 00:16:31.860 So here I could add an ID or a class, 328 00:16:31.860 --> 00:16:36.050 but I could also tell CSS to simply select this h1 329 00:16:36.050 --> 00:16:40.133 that is inside of the element with the ID of your name. 330 00:16:41.160 --> 00:16:42.723 And so this is how it works. 331 00:16:43.560 --> 00:16:46.043 So again, we use the ID, your name, 332 00:16:47.380 --> 00:16:51.053 so in just what we have here, and then a simple space, 333 00:16:51.950 --> 00:16:54.090 and then another selector. 334 00:16:54.090 --> 00:16:57.210 So in this case, that's simply the h2 selector, 335 00:16:57.210 --> 00:16:59.540 but it could be any other selector. 336 00:16:59.540 --> 00:17:01.880 So this here could also be a class selector 337 00:17:01.880 --> 00:17:04.720 or another ID selector, alright? 338 00:17:04.720 --> 00:17:07.910 But in this case, I just want to select the h2. 339 00:17:07.910 --> 00:17:10.250 And so let's change the color of this one 340 00:17:10.250 --> 00:17:14.420 and let's change it to, I think there's one called olive 341 00:17:15.260 --> 00:17:17.420 or let's use this one, olive drab 342 00:17:18.440 --> 00:17:20.840 and yeah, indeed. 343 00:17:20.840 --> 00:17:23.830 Now this one is green and this one is not 344 00:17:23.830 --> 00:17:26.550 because this one is not inside the element 345 00:17:26.550 --> 00:17:29.497 with the ID of your name, right? 346 00:17:29.497 --> 00:17:32.580 And so this one here is very useful 347 00:17:32.580 --> 00:17:35.770 and we use it all the time in CSS. 348 00:17:35.770 --> 00:17:37.640 And so that's why I wanted to show you 349 00:17:37.640 --> 00:17:39.390 this one here as well. 350 00:17:39.390 --> 00:17:44.390 Finally, just to make this a little bit smaller, 351 00:17:44.530 --> 00:17:46.720 let's also change the size of the image 352 00:17:46.720 --> 00:17:49.420 because that's also something very important. 353 00:17:49.420 --> 00:17:52.910 So if we do not specify any sizes on the image, 354 00:17:52.910 --> 00:17:56.780 it will simply be as large as it can, okay. 355 00:17:56.780 --> 00:18:00.200 Or as large as the source image really is. 356 00:18:00.200 --> 00:18:01.690 But usually we don't want that. 357 00:18:01.690 --> 00:18:04.750 So on the image, it's pretty common to always set 358 00:18:04.750 --> 00:18:07.610 either a height or a width attribute. 359 00:18:07.610 --> 00:18:09.203 So let's do that here. 360 00:18:11.356 --> 00:18:15.130 So this one doesn't have, or maybe it does have a class. 361 00:18:15.130 --> 00:18:18.630 So, or actually, it has an ID, okay. 362 00:18:18.630 --> 00:18:21.680 So we can of course use the image selector, 363 00:18:21.680 --> 00:18:24.980 like I was just writing, but we can also use the ID. 364 00:18:24.980 --> 00:18:27.490 So the difference is that with the ID, 365 00:18:27.490 --> 00:18:28.930 if we add multiple images 366 00:18:28.930 --> 00:18:31.240 then we would only select this one. 367 00:18:31.240 --> 00:18:33.823 So let's actually copy this one and use this. 368 00:18:35.600 --> 00:18:39.380 So ID, and then the name of the ID. 369 00:18:39.380 --> 00:18:43.723 And let's set the width here to 200 pixels. 370 00:18:44.690 --> 00:18:47.800 So what do you think will happen then to the height? 371 00:18:47.800 --> 00:18:52.060 Well, it scaled proportionally, okay. 372 00:18:52.060 --> 00:18:53.500 So that's very nice. 373 00:18:53.500 --> 00:18:56.760 Let's make it a bit bigger 300 pixels. 374 00:18:56.760 --> 00:18:59.090 And so we don't have to worry about the height. 375 00:18:59.090 --> 00:19:01.680 We can still set it, but with that, 376 00:19:01.680 --> 00:19:04.520 we will then change the aspect ratio. 377 00:19:04.520 --> 00:19:07.590 So if we set the height to also 300 pixels, 378 00:19:07.590 --> 00:19:09.320 it would then become a square (laughs). 379 00:19:09.320 --> 00:19:10.333 Yeah, that's right. 380 00:19:11.610 --> 00:19:12.550 Okay? 381 00:19:12.550 --> 00:19:15.200 And if we now turned off the width, 382 00:19:15.200 --> 00:19:16.820 so let's comment it out 383 00:19:16.820 --> 00:19:19.880 then it will again scale proportionately. 384 00:19:19.880 --> 00:19:21.610 So the height is now 300 385 00:19:21.610 --> 00:19:24.273 and then the width is calculated automatically. 386 00:19:25.470 --> 00:19:26.620 Let's set it back. 387 00:19:26.620 --> 00:19:30.563 And usually it's easier to simply specify the width, okay. 388 00:19:32.520 --> 00:19:33.440 That looks nice. 389 00:19:33.440 --> 00:19:36.640 Let's change the h1 a little bit to 35 390 00:19:38.540 --> 00:19:40.473 to make it fit all in one line. 391 00:19:43.440 --> 00:19:47.490 And yeah, we have a nice little page here. 392 00:19:47.490 --> 00:19:49.260 It's not the best looking, 393 00:19:49.260 --> 00:19:53.170 but I think it taught you some things about HTML and CSS, 394 00:19:53.170 --> 00:19:55.230 at least to the very fundamentals. 395 00:19:55.230 --> 00:19:58.210 So of course we only scratched the surface here. 396 00:19:58.210 --> 00:20:02.030 So probably this is less than like 5% 397 00:20:02.030 --> 00:20:05.830 of everything that there is to learn about CSS. 398 00:20:05.830 --> 00:20:08.800 So we didn't really talk about positioning. 399 00:20:08.800 --> 00:20:11.850 We didn't talk about flexbox or CSS grid 400 00:20:11.850 --> 00:20:14.210 or many other important topics, 401 00:20:14.210 --> 00:20:16.250 but it wasn't also really the goal here. 402 00:20:16.250 --> 00:20:17.910 I just wanted to get you up to speed 403 00:20:17.910 --> 00:20:20.730 with the fundamentals of HTML and CSS 404 00:20:20.730 --> 00:20:23.510 so that you can understand a little bit of the code 405 00:20:23.510 --> 00:20:25.707 of projects that are included here in the course, 406 00:20:25.707 --> 00:20:29.370 and also so that you can learn how these selectors work, 407 00:20:29.370 --> 00:20:30.720 because as I mentioned, 408 00:20:30.720 --> 00:20:35.070 we will use them in JavaScript to select elements as well. 409 00:20:35.070 --> 00:20:37.710 So I hope you liked this small crash course. 410 00:20:37.710 --> 00:20:41.750 And I also hope I got you interested in HTML and CSS 411 00:20:41.750 --> 00:20:43.780 so that you now go ahead and research 412 00:20:43.780 --> 00:20:46.160 maybe a little bit more about it. 413 00:20:46.160 --> 00:20:48.050 Anyway, and with that being said, 414 00:20:48.050 --> 00:20:50.820 let's now go straight into DOM manipulation 415 00:20:50.820 --> 00:20:52.240 in the next section, 416 00:20:52.240 --> 00:20:55.253 because that's really exciting and really cool.