WEBVTT 0 00:03.130 --> 00:09.710 I am super excited to get into styling our radio buttons, but it does add a bit of complexity. 1 00:09.730 --> 00:10.180 Why? 2 00:10.360 --> 00:11.640 Well, for a few reasons. 3 00:11.650 --> 00:17.080 Firstly, we are introducing new elements to HTML and that of course, just adds a little bit more 4 00:17.080 --> 00:23.620 complexity. The other reason that it adds complexity is we've introduced <fieldset> and <legend> elements. And their 5 00:23.620 --> 00:26.620 default styling is, well, rather ugly. 6 00:26.870 --> 00:30.300 So we have to remove that default styling in order to apply our own. 7 00:30.460 --> 00:36.620 And thirdly, at the time of this video, the fieldset element does not support flexbox. 8 00:36.700 --> 00:37.840 I know, weird right? 9 00:37.960 --> 00:38.560 Who would have thought. 10 00:38.860 --> 00:41.560 But, don't worry, we're going to be using floats. 11 00:41.620 --> 00:43.060 There ... there's always a way. 12 00:43.060 --> 00:44.020 If there's a will, there's a way. 13 00:44.170 --> 00:48.640 And then the other thing I just want you to note when we start styling this, is that we have given this 14 00:48.640 --> 00:52.270 entire <fieldset> a different class name to our other rows. 15 00:52.870 --> 00:54.490 Remember, we had a form-row class? 16 00:55.090 --> 00:58.030 Well, now we've got a radio-form-row class... 17 00:58.060 --> 01:02.050 so it's going to be styled completely different to our text input boxes. 18 01:02.980 --> 01:08.460 So let me stop babbling on, let's jump into the console quickly and let's start coding. See you now. 19 01:13.600 --> 01:15.720 All right, here we go. 20 01:16.120 --> 01:21.180 I've just come from outside, and you saw how beautiful that sunshine was, it really was cool. 21 01:21.180 --> 01:22.230 But I want to be here. 22 01:22.230 --> 01:24.380 I want to be teaching you, and I'm so glad you're with me. 23 01:24.390 --> 01:26.580 And let's start styling this radio button. 24 01:26.580 --> 01:30.300 As you can see on the screen behind me, it is pretty average. 25 01:30.520 --> 01:36.270 The browser has applied default styling to the fieldset and legend elements, and they don't look very 26 01:36.270 --> 01:36.690 pleasant. 27 01:37.260 --> 01:39.490 So that's what we're going to do in this lecture. 28 01:39.690 --> 01:40.580 So let's get into it... 29 01:40.590 --> 01:42.390 let's jump to our IDE quickly. 30 01:42.780 --> 01:46.890 OK, so we're in our styles.css sheet. All we want to do now start a new heading. 31 01:47.220 --> 01:48.360 We're not dealing with input 32 01:48.360 --> 01:49.410 text styling anymore, are 33 01:49.410 --> 01:49.590 we? 34 01:50.710 --> 01:57.790 So I want to scroll down, and I want to create a new heading called "Radio Button Styling". 35 01:58.920 --> 02:04.590 It's always good to label your code, by the way. And what is the first step? Well, the first step is let's 36 02:04.590 --> 02:08.520 remove the default styling of that fieldset element. 37 02:08.760 --> 02:09.740 And how do we do that? 38 02:09.750 --> 02:17.250 Well, if we got our HTML file, we've given our entire radio button a class of "radio-form-row", so 39 02:17.250 --> 02:18.270 we can just target that... 40 02:19.850 --> 02:31.640 radio-form-row. And all we want to do here, is we want to, let's get rid of the default styling for 41 02:31.640 --> 02:32.060 fieldset... 42 02:33.270 --> 02:36.710 and legend elements. That's all we're doing. 43 02:37.990 --> 02:42.970 And in order to do that, let's just get rid of all the borders and I just want to add some margin to 44 02:42.970 --> 02:43.330 the bottom. 45 02:45.160 --> 02:51.050 And we've defined a variable, remember those CSS variables at the top of the file, called "--margin-bottom". 46 02:52.600 --> 02:57.070 To remind you, if I scroll to the top of the file, there it is, 10 pixels. 47 02:59.690 --> 03:00.410 Don't get lost. 48 03:00.620 --> 03:05.030 It's all we're doing. If we save this, and we go to our browser and we refresh ... (sad trombone) Why is it not working? 49 03:10.130 --> 03:13.770 Because, I put "now" instead of "row", I knew something was wrong. 50 03:14.120 --> 03:15.110 If we go to our browser now and... 51 03:15.110 --> 03:20.330 you can see there, all the borders have been removed (sound yay), and now we can start sprucing this up quite 52 03:20.330 --> 03:20.550 a bit. 53 03:21.170 --> 03:22.430 Let's go back to our file here. 54 03:22.690 --> 03:23.930 OK, what should we style next? 55 03:24.290 --> 03:29.000 Well, firstly, let me put the browser and the text editor side by side,so you know what's going on. 56 03:29.340 --> 03:29.830 There we go. 57 03:30.290 --> 03:33.370 Well, why don't we deal with the labels, the "no" and the... 58 03:33.380 --> 03:35.870 "yes". If we go to our HTML, 59 03:37.630 --> 03:40.810 we've given those labels a class of "radio-label". 60 03:41.960 --> 03:42.560 Can you see it? 61 03:43.750 --> 03:50.800 So all we need to do in our file here, is we always start with the parent element, and that has a class of 62 03:50.890 --> 03:56.950 radio-form-row, and we want to target the label which we've given a class of radio-label. 63 03:57.490 --> 04:01.330 And what we want to do here, is we just want to change the font-size because we want all our labels to 64 04:01.330 --> 04:05.230 be consistent. And we've defined a CSS variable for that. 65 04:05.860 --> 04:09.840 The second thing I want to do is just add some padding because they are just way too close together. 66 04:11.060 --> 04:13.490 20, 0 and 4 should do it. 67 04:14.330 --> 04:16.460 It's already starting to look good, right? 68 04:16.820 --> 04:21.380 The next thing I want to do, is I want to deal with our legend element. Right now, 69 04:21.380 --> 04:26.510 that legend is a block level element, which is why it's on its own line. 70 04:26.630 --> 04:28.610 So we need to kind of style there to make it look better. 71 04:28.850 --> 04:30.340 Using the same logic as above, 72 04:30.350 --> 04:37.220 let's grab our element, our wrapper element, which has a class of radio-form-row, and let's target that 73 04:37.220 --> 04:38.150 legend element. 74 04:39.330 --> 04:42.120 First thing I want to do, is I want to define its width. 75 04:43.380 --> 04:46.960 Don't get lost in the detail, this is what I'm doing. If we inspect this, 76 04:47.940 --> 04:55.080 we know that these labels here, name and email, they have a set width, but this "Allow push notifications" is 77 04:55.170 --> 04:57.800 stretching across the entire page... 78 04:57.810 --> 04:59.150 I don't want that to happen. 79 04:59.520 --> 05:01.890 We need to give this a set width. 80 05:02.670 --> 05:04.450 So that's all I'm doing in our 81 05:04.520 --> 05:05.100 code now. 82 05:06.670 --> 05:07.700 So let's give it a width. 83 05:10.180 --> 05:12.400 And again, we've defined a variable at the top. 84 05:14.430 --> 05:17.790 OK, if we go back to your browser, it's not going to look any different. 85 05:18.630 --> 05:24.810 Yes, we've given it a width, but it's still block scoped - it's still taking up an entire row. 86 05:25.290 --> 05:30.660 But at least now we can see it's got a width of 200 pixels, which is the same as our others... 87 05:30.660 --> 05:31.920 which is exactly what we wanted. 88 05:32.280 --> 05:34.770 The next thing, though, we need to do is we need to give it some padding. 89 05:34.770 --> 05:35.880 Can you notice with name... 90 05:36.390 --> 05:39.620 we've got 20px padding to the right? On email... 91 05:39.630 --> 05:41.400 we've got 20px of padding to the right? 92 05:41.910 --> 05:43.350 But with this, we've got no padding. 93 05:43.710 --> 05:45.360 So of course, let's add some padding. 94 05:46.690 --> 05:49.240 Luckily for us, we've also defined a variable 95 05:51.290 --> 05:54.010 called "--label-padding-right". 96 05:55.210 --> 06:02.830 Save that, go to our browser and there we go. It's added some padding, how cool! Then, as you'll notice with this name 97 06:02.830 --> 06:07.690 and email, we've floated that text to the right, or we've aligned it to the right. 98 06:08.670 --> 06:10.060 That's exactly what I want to do now. 99 06:10.650 --> 06:12.780 So let's go here, text-align... 100 06:13.810 --> 06:14.260 right. 101 06:15.110 --> 06:20.440 Save that, open our browser, and now its pushed it all the way to the right, but still on its own row 😖. 102 06:21.100 --> 06:22.360 What is going on? 103 06:22.780 --> 06:26.470 Well, this is what I mentioned to you when I was outside ... the <fieldset> 104 06:26.470 --> 06:29.140 and the <legend> elements do not support flexbox... 105 06:29.530 --> 06:33.610 and that's why we have to use another CSS property called float. 106 06:34.060 --> 06:34.600 Don't panic 😬. 107 06:34.610 --> 06:36.130 It's super, super easy. 108 06:36.430 --> 06:37.330 Let me show you how it works. 109 06:37.960 --> 06:39.160 Let me actually just get rid of this. 110 06:39.700 --> 06:40.260 There we go... 111 06:40.270 --> 06:41.890 let's go to our IDE. 112 06:42.850 --> 06:47.710 All we have to do is add a CSS float property, and we want to specify that this should float to the 113 06:47.710 --> 06:50.120 left. And ... boom 💥. 114 06:50.440 --> 06:53.740 How awesome is this? (sound effect: mission completed) 115 06:54.070 --> 06:55.240 Whew. Breath. 116 06:55.900 --> 06:56.770 Take a step back. 117 06:56.840 --> 07:00.410 Understand that you've actually learned quite a lot in a very short space of time. 118 07:01.060 --> 07:04.050 We've done a text input box with the name. 119 07:04.510 --> 07:09.860 We've done a text email box with the email, and now we've done a radio button. 120 07:11.260 --> 07:12.280 Pretty, pretty cool. 121 07:13.000 --> 07:15.630 And we are not yet finished with this form. 122 07:16.450 --> 07:20.950 Remember, this first section is not for you to understand exactly what's going on behind the scenes... 123 07:20.950 --> 07:25.080 that's in upcoming stations, it's just to get you a feel for how we can start building forms. 124 07:25.450 --> 07:29.230 And it'll help you just grasp certain concepts later when we get more advanced. 125 07:29.800 --> 07:30.730 Hope you're having fun. 126 07:31.090 --> 07:32.140 Hope you stay motivated... 127 07:32.140 --> 07:33.280 and I'll see you in the next lecture.