WEBVTT 0 00:10.740 --> 00:15.510 Now what I want to do, is I want to effect everything on our page, all the elements, and I want to 1 00:15.510 --> 00:16.390 start from scratch. 2 00:16.530 --> 00:20.220 So, let's get rid of margin, and let's get rid of padding. 3 00:20.760 --> 00:21.540 Save that. 4 00:21.540 --> 00:25.040 And you can already see the browser on the right is being affected in real time. 5 00:25.350 --> 00:26.400 How awesome is that? 6 00:26.400 --> 00:28.740 And that is because of this Live Server. 7 00:29.280 --> 00:33.870 The one other thing I want to do now, is I want to add a box-sizing property. 8 00:34.900 --> 00:36.310 You know, box-sizing. 9 00:37.280 --> 00:42.380 And I want to set that to border-box. If you don't know what it is, this comment is for you, 10 00:42.440 --> 00:44.720 okay. The box-sizing 11 00:45.590 --> 00:56.000 property allows us to include the padding and border, in an elements total width and height. 12 00:57.930 --> 01:02.130 Don't worry if you don't quite know what box-sizing is, we are going to talk about it later in the course, 13 01:02.370 --> 01:04.250 okay. But for now, that's exactly what I'm doing. 14 01:04.260 --> 01:06.690 It's just easier for us to define widths and heights. 15 01:06.960 --> 01:07.240 Whew. 16 01:07.410 --> 01:10.400 Sorry, I know I'm going very quick, but this isn't a course on CSS, so 17 01:10.620 --> 01:11.490 I want to go fast 🏃🏼‍♀️. 18 01:11.880 --> 01:18.900 The body, let's just, I don't know, let's define the body color as, let's use our variable 19 01:19.290 --> 01:21.720 and remember, we defined it "--color-main". 20 01:22.930 --> 01:24.850 If we go up, --color-main is that gray color. 21 01:32.170 --> 01:36.250 So all I'm doing now is I'm setting everything within our body element, that color. 22 01:37.250 --> 01:43.100 And the cool thing is, later on, if you ever want to change this color, like to red, and save it, it literally 23 01:43.100 --> 01:47.240 will affect (sound effect: wow), you know, all your elements below that have this variable. 24 01:47.510 --> 01:48.470 So that's why I do it. 25 01:48.710 --> 01:49.700 It's very, very simple. 26 01:50.990 --> 01:51.720 So there we go. 27 01:51.770 --> 01:55.910 There's our body color. We also have a different background color, don't we? 28 01:57.100 --> 02:08.170 And let's have that as rgb(182, 219, 255). Oh, isn't that beautiful? Let's just change our font-family 29 02:09.430 --> 02:11.620 to Arial. Is that fine? 30 02:13.590 --> 02:18.750 Yeah, that's fine. And let's do line-height of 1.5. 31 02:19.650 --> 02:20.180 There you go, 32 02:20.530 --> 02:25.480 just so there's a bit more spacing between all the text. Whew, we are getting there, my dear students. 33 02:25.980 --> 02:28.500 Now, let me just do a comment here. 34 02:29.750 --> 02:34.940 I want to now use a flexbox layout. 35 02:36.020 --> 02:41.540 This is an alternative way to using float's 36 02:43.910 --> 02:45.320 for defining 37 02:47.470 --> 02:49.150 the overall appearance 38 02:50.780 --> 02:52.460 of a web page. 39 02:54.340 --> 03:00.580 OK, don't worry too much again, what this is. We're going to get into it later. But let's define our body element 40 03:01.780 --> 03:04.870 as being a flex container. 41 03:06.280 --> 03:07.150 So how do we do that? 42 03:07.210 --> 03:13.120 Well, we have this display properly of "flex" on our body element. And now let's render 43 03:14.670 --> 03:17.700 all items in our form vertically. 44 03:20.810 --> 03:24.680 And to do that, we just want the flex direction to be ... 45 03:25.980 --> 03:26.360 column. 46 03:28.920 --> 03:32.010 And we went to align items to the center. 47 03:32.820 --> 03:33.470 There we go. 48 03:34.050 --> 03:36.420 You can already see it's starting to take shape. 49 03:38.130 --> 03:40.980 Whew, okay, one more thing now to style, that 50 03:41.370 --> 03:45.440 header, is I want to target that class. 51 03:46.050 --> 03:48.120 Remember what class we gave it? If we go to our HTML 52 03:48.720 --> 03:50.550 we gave it a class of profile-header. 53 03:50.550 --> 03:53.920 So let's start being really specific right now. 54 03:54.300 --> 03:56.520 And trust me, we're almost almost done. 55 03:56.550 --> 03:57.160 Stick with me. 56 03:57.750 --> 03:59.520 So let's target that 57 03:59.520 --> 04:00.210 profile-header class, 58 04:01.900 --> 04:02.800 text-align 59 04:04.390 --> 04:06.290 center. There we go, 60 04:06.340 --> 04:07.330 it looks better already. 61 04:11.610 --> 04:12.450 Background-color, 62 04:14.430 --> 04:15.480 rgb 63 04:21.760 --> 04:22.720 let's say its 64 04:23.830 --> 04:24.490 230, 65 04:26.650 --> 04:27.340 230, 66 04:29.160 --> 04:34.680 230. And, it doesn't have a border yet, does it? It looks horrible 🤢. 67 04:34.840 --> 04:39.270 So, let's give it a 1px border, solid border, and let's give it a color. 68 04:43.640 --> 04:50.480 How does that look? Let's save. Man, its starting to make ... it's starting to come together. Um, --border-radius, 69 04:50.520 --> 04:52.850 remember we defined that at the top? If I scroll up, 70 04:55.670 --> 05:00.110 we defined our border-radius as 4px, but we've got a variable, so we don't have to type it 71 05:00.110 --> 05:02.120 out again, which is really, really cool. 72 05:03.780 --> 05:09.870 So, of course, we have to use the "var" keyword and then we can get our --border-radius. If we save that, 73 05:09.870 --> 05:12.990 you can see the borders are slightly rounded on the edges. 74 05:14.260 --> 05:16.330 And then I just want to add a box-shadow, 75 05:17.330 --> 05:22.490 just to add a bit of dynamic styling to this whole header. 76 05:27.230 --> 05:30.170 How does that look? If I save, yeah man, that's looking good 😍. 77 05:31.340 --> 05:37.760 And now, of course, I just want to add margin because everything's so bunched up together. Um, let's do 25 pixels, 78 05:37.760 --> 05:40.960 zero. Yep, that's a lot better. 79 05:40.970 --> 05:44.310 And let's add some padding just to space things out. 80 05:44.330 --> 05:47.570 And again, let's use our --main-padding variable. 81 05:48.200 --> 05:49.040 Save that, 82 05:49.040 --> 05:50.470 and "Bob's your uncle". 83 05:50.480 --> 05:52.700 We have just completed our header. 84 05:52.970 --> 05:53.970 (sound effect: yaaay) 85 05:54.890 --> 05:56.030 How exciting is that? 86 05:56.300 --> 05:57.540 So, take a step back. 87 05:57.560 --> 06:03.530 We've done quite a lot right now. We've just defined our CSS, we've defined the body look and feel. 88 06:03.530 --> 06:05.090 We've completed our header. 89 06:05.780 --> 06:10.820 But if we go to our HTML, we haven't done any forms yet, have we? 90 06:10.880 --> 06:12.430 We haven't defined a <form> element. 91 06:13.700 --> 06:17.630 Well, I think we should take a break now, take a breather 92 06:17.630 --> 06:21.770 and in the next lecture, let's start adding our <form>. See you now.