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.