WEBVTT 0 00:00.960 --> 00:06.390 So we're getting there, we understand a little bit more about what this input element actually means. 1 00:07.230 --> 00:11.810 And just so you know, this input element can be styled like any other HTML element. 2 00:12.360 --> 00:21.270 So why don't we add some CSS to the styles.css sheet, to pretty it up a bit 🌸, to add some flair and style ✨. 3 00:21.750 --> 00:26.910 And in order to do this, we're going to be using CSS selectors, flexbox, a bit of the box model. 4 00:27.300 --> 00:31.600 Again, this is not, of course on CSS, but I hope you learn one or two things along the way. 5 00:32.100 --> 00:37.870 So that's got our styles.css sheet, and let's start adding some cool, funky styles. 6 00:38.130 --> 00:40.210 I just want to demarcate this area as well, 7 00:40.230 --> 00:44.890 so later on we can find our code and sections easier. 8 00:45.210 --> 00:48.840 And this is going to be the "INPUT TEXT STYLING" section. 9 00:50.040 --> 00:56.100 Let me copy this, so its the same length, comment that all out. I'm just trying to structure our code here. 10 00:56.610 --> 01:00.180 First thing I want to do, is I want to target that input element. 11 01:00.190 --> 01:01.030 How do we do that? 12 01:01.050 --> 01:08.120 Well, firstly, if we got our HTML here, we can see that we've given this whole wrapper a class of "form-row". 13 01:09.070 --> 01:12.380 So what we can do, is we can obviously target this form-row, 14 01:13.390 --> 01:15.820 and I want to use the flexbox system, 15 01:16.680 --> 01:20.610 right, so let's say we wanted to display it as "flex", 16 01:22.170 --> 01:25.380 flex-wrap, is wrap. 17 01:27.000 --> 01:29.090 And I want to align-items 18 01:30.170 --> 01:30.820 to the start. 19 01:32.960 --> 01:33.530 So there we go, 20 01:33.560 --> 01:41.270 I've just created that div, or that wrapper, as a flexbox item. And now what I want to do, is I want 21 01:41.270 --> 01:43.730 to actually target that input itself. 22 01:44.510 --> 01:45.820 So how can we do that 🤷🏽? 23 01:46.490 --> 01:51.300 Well, firstly, we can go to its parent, and we know everything's wrapped in this form-row. 24 01:52.100 --> 01:55.550 But right now, we still haven't got our input itself, have we? 25 01:56.000 --> 01:59.710 So in order to do that, we can utilize a selector like this. 26 01:59.990 --> 02:07.060 We want an input, and we want all the inputs that match "type" equal to "text". 27 02:07.880 --> 02:12.500 And this is a new type of CSS selector called an attribute selector. 28 02:12.950 --> 02:18.430 It only matches input elements that have a type attribute, of course, equal to text. 29 02:18.590 --> 02:23.840 And this is so cool because it lets us specifically target text fields as opposed to radio buttons, 30 02:23.840 --> 02:24.480 for example. 31 02:25.160 --> 02:25.820 So there we go. 32 02:25.850 --> 02:30.110 We can start styling this input element directly. 33 02:31.010 --> 02:32.640 And what do we want it to look like? 34 02:32.660 --> 02:38.720 Well, we can obviously change its border-radius because remember, we don't like squares. 35 02:38.720 --> 02:44.710 We want it slightly rounded, and it's all these little details that really make a site stand out. 36 02:45.350 --> 02:47.270 We save this, and there we go. 37 02:47.390 --> 02:48.950 It looks pretty cool hey 🆒! 38 02:49.430 --> 02:50.330 (sound effect: Oh, yeah) 39 02:51.440 --> 02:52.340 Let's change the color. 40 02:52.350 --> 02:57.020 And remember these are all the variables we defined at the very, very top of our HTML, 41 02:58.020 --> 03:03.840 sorry, at the very top of our CSS file. If I scroll up here, in this ":root", we can see we've defined all 42 03:03.840 --> 03:05.850 our variables. This is where we're using them. 43 03:07.010 --> 03:10.100 I told you that they would be handy. Um, font-size, 44 03:10.130 --> 03:11.350 let's change that. 45 03:11.510 --> 03:17.500 And of course, we also defined our --input-text-size variable, there we go. 46 03:17.540 --> 03:19.210 Remember, we said it was 14 pixels, 47 03:19.220 --> 03:20.390 I think. If we scroll up, 48 03:21.710 --> 03:23.420 yeah, 14 pixels. 49 03:25.680 --> 03:28.450 So there we go, that's font-size. What else can we do? 50 03:28.480 --> 03:30.300 Well, let's change the background-color. 51 03:32.990 --> 03:38.360 And it's going to be very specific here. Let's just say rgb(255, 255, 255). 52 03:39.690 --> 03:41.250 Um, let's give it a border 53 03:42.130 --> 03:44.560 of 1px solid 54 03:46.120 --> 03:52.030 rgb(186, 186, 190). You know what, I could have actually put this in a variable as well, I'm being a bit 55 03:52.030 --> 03:52.660 lazy now. 56 03:54.140 --> 03:54.680 There we go. 57 03:56.040 --> 03:59.040 And I want to give it some padding, because it looks to bunched up right now. 58 04:00.420 --> 04:00.910 There we go. 59 04:01.410 --> 04:05.550 Now what I want to target, is I want to target that label, it's just a bit out of place. 60 04:06.450 --> 04:08.250 So why don't we go ".form-row", 61 04:08.470 --> 04:12.630 and of course, we want to target the label. For that, we can just effect 62 04:12.630 --> 04:13.740 its margin-bottom. 63 04:15.430 --> 04:18.230 It's got 20 pixels. And we're going to get there. 64 04:18.280 --> 04:19.920 We're going to get there, don't worry. 65 04:20.410 --> 04:20.860 You know what, 66 04:20.870 --> 04:22.680 let me just, um, adjust the width quickly. 67 04:22.810 --> 04:27.160 So let me grab the profile-header class, 68 04:28.230 --> 04:29.250 and also the 69 04:30.930 --> 04:33.870 profile-form, the one we're on, 70 04:35.140 --> 04:39.820 and it's just redefined the width of, I don't know, 600 pixels. 71 04:40.990 --> 04:44.990 That's better, and it all kind of fits, it's all looking good. 72 04:45.460 --> 04:50.650 And remember, if we scroll to the top of this file here, we defined what width we want our widgets 73 04:50.650 --> 04:50.980 to be? 74 04:51.130 --> 04:51.790 That --widget- 75 04:51.790 --> 04:52.120 width. 76 04:53.260 --> 04:54.770 So let's utilize that now. 77 04:55.750 --> 05:00.030 What I want to do, is I want to effect its width. 78 05:00.100 --> 05:04.480 I wonder, you know what, we've actually done it here, input[type="text"], 79 05:04.960 --> 05:09.980 so let's put width over here, as --widget-width. 80 05:12.520 --> 05:13.040 There we go. 81 05:13.900 --> 05:17.390 And in the label, we're not quite done, still not looking quite right. 82 05:17.410 --> 05:20.740 So what I want to do, is I want to add some padding to the right. 83 05:22.330 --> 05:24.490 And again, we defined a variable at the top 84 05:25.510 --> 05:27.010 called --label-padding-right. 85 05:27.250 --> 05:29.320 Look at that, it's starting to come together 😍. 86 05:29.920 --> 05:31.480 I want to text-align this 87 05:32.900 --> 05:34.210 to the right, how does that look? 88 05:35.310 --> 05:41.220 And what I want to do, is I want to just affect its top margins to bring it down slightly. 89 05:41.790 --> 05:43.020 Let's go 5 pixels. 90 05:43.590 --> 05:44.940 There we go. 91 05:45.510 --> 05:46.860 (sound effect: mission completed) 92 05:47.610 --> 05:51.460 We have come an incredibly far way already in a short space of time. 93 05:52.020 --> 05:53.010 So let me just stop ⛔ here. 94 05:53.070 --> 05:55.340 We've literally done our first kind-of widget. 95 05:55.680 --> 05:58.290 I'm going to start moving faster now as we go through. 96 05:58.710 --> 06:03.480 And even this very simple example, we are already at 71 lines of CSS code. 97 06:03.690 --> 06:07.500 So you can see how, you know, how big these files can become, very quickly. 98 06:07.950 --> 06:09.000 But I hope you're having fun. 99 06:09.010 --> 06:13.680 I hope you're learning a ton and we're going to get into this form a lot quicker going forward. 100 06:13.960 --> 06:17.280 I know I'm starting slow, so I apologize to those of you who know this already. 101 06:17.730 --> 06:23.160 But trust me, you've got to have solid foundations before we start getting more and more advanced. See you 102 06:23.160 --> 06:23.760 in the next lecture 👋.