NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,380 Hi guys and welcome back. 2 00:00:01,410 --> 00:00:06,240 In this video, we're going to learn how to style our form using CSS. 3 00:00:06,240 --> 00:00:07,530 So let's get started. 4 00:00:08,111 --> 00:00:11,381 The first thing we want to do though, is go to the main element in your 5 00:00:11,381 --> 00:00:14,291 HTML and add the class of main. 6 00:00:14,756 --> 00:00:17,336 I just forgot to do this earlier on, but we're going to need it 7 00:00:17,336 --> 00:00:21,596 so we can target it to set the maximum width to match the header. 8 00:00:22,166 --> 00:00:27,926 So once we've done that, we can go over to the styles and start writing our CSS here. 9 00:00:28,417 --> 00:00:33,577 Now this CSS file might start to get a little bit long, but not overly long. 10 00:00:33,727 --> 00:00:37,807 A very long CSS file can be hundreds of lines long, and then it starts 11 00:00:37,807 --> 00:00:38,947 to get really quite cumbersome. 12 00:00:39,157 --> 00:00:41,827 But I think the CSS file that we're going to write here is 13 00:00:41,827 --> 00:00:43,207 not going to be that long. 14 00:00:43,687 --> 00:00:47,707 Plus, as long as you follow the convention that I've set out here, 15 00:00:47,887 --> 00:00:49,537 then you'll find it easier to navigate. 16 00:00:49,567 --> 00:00:54,997 Which is to start with the blocks and then delve into each individual element. 17 00:00:55,367 --> 00:00:59,182 And potentially anything else that we want to style in that block. 18 00:00:59,482 --> 00:01:02,842 And then afterwards, when we're done with all the block, we 19 00:01:02,842 --> 00:01:04,312 can move on to the next one. 20 00:01:04,552 --> 00:01:08,962 That way the related things will always be in a similar place. 21 00:01:08,962 --> 00:01:10,332 So you can find them a bit more easily. 22 00:01:10,802 --> 00:01:15,122 All right, let's go down here and start with the main content. 23 00:01:15,122 --> 00:01:19,142 So we're going to do main, and then we're going to do max width 450 pixels, 24 00:01:19,472 --> 00:01:23,792 margin 0 auto and padding 0 20 pixels. 25 00:01:24,292 --> 00:01:27,832 That is going to limit this to 450 pixels and is going to add 26 00:01:27,832 --> 00:01:30,892 a little bit of padding and it's going to centre it on the page. 27 00:01:30,942 --> 00:01:32,892 All right, let's get started with the form. 28 00:01:32,952 --> 00:01:37,269 We're going to do form display: flex and flex-direction: column. 29 00:01:37,762 --> 00:01:40,272 And we want this so that we can style the elements and centre 30 00:01:40,322 --> 00:01:42,712 them a bit more easily using flex. 31 00:01:43,009 --> 00:01:47,809 What we're going to do is we're going to do align-items: flex-end. 32 00:01:47,899 --> 00:01:50,869 And that is going to align all the items to the right. 33 00:01:51,209 --> 00:01:54,119 We then want to make sure that the paragraph takes up the 34 00:01:54,119 --> 00:01:56,459 entire width of the container. 35 00:01:56,459 --> 00:02:00,989 So we'll do form__input is width 100%. 36 00:02:01,489 --> 00:02:04,939 The text area still occupies the size that it did earlier on. 37 00:02:05,119 --> 00:02:06,589 So we're going to want to change that. 38 00:02:07,090 --> 00:02:11,140 First we'll do form_label and we'll change it to a block so that it 39 00:02:11,140 --> 00:02:15,890 takes up 100% of the available space and then margin bottom 10 pixels. 40 00:02:16,190 --> 00:02:18,320 Make sure to not miss any underscores there. 41 00:02:18,650 --> 00:02:19,370 There we have it. 42 00:02:19,610 --> 00:02:23,720 Now that is taken up 100% of the available space, which means a text 43 00:02:23,720 --> 00:02:25,450 area automatically appears below it. 44 00:02:25,700 --> 00:02:29,060 And we've added a little bit of margin there to separate it from the text area. 45 00:02:29,537 --> 00:02:32,207 Now we can go into the text area. 46 00:02:32,357 --> 00:02:35,717 And what we're going to do is width set to inherit, which is going to make 47 00:02:35,717 --> 00:02:37,247 it the same width as the container. 48 00:02:37,277 --> 00:02:39,197 Bringing it to a hundred percent. 49 00:02:39,723 --> 00:02:43,503 And then we're going to set the font size to 18 pixels. 50 00:02:43,743 --> 00:02:47,493 We want to do this because by default, the font size here is quite small. 51 00:02:47,673 --> 00:02:51,033 So by doing that, now we get the bigger font size. 52 00:02:51,388 --> 00:02:53,248 We also want to add a little bit of padding. 53 00:02:53,278 --> 00:02:57,148 You can see the text appears very close to the corner of the text 54 00:02:57,148 --> 00:03:00,688 area with some padding we're going to separate that from the sides. 55 00:03:00,778 --> 00:03:04,788 We will do padding 12 pixels and 20 pixels. 56 00:03:05,051 --> 00:03:07,631 Again, that's going to set 12 pixels at the top and bottom. 57 00:03:07,781 --> 00:03:09,461 20 pixels left and right. 58 00:03:09,551 --> 00:03:13,571 So now we can see that the text here appears a bit further away from the sides. 59 00:03:14,071 --> 00:03:16,931 Something to note right now with this text area, is that it 60 00:03:16,931 --> 00:03:19,541 is bigger than the container. 61 00:03:19,571 --> 00:03:23,621 Because we've got this add entry button that is pushed as far to the 62 00:03:23,621 --> 00:03:25,781 right as possible in the container. 63 00:03:25,841 --> 00:03:30,041 We've said that with align-items: flex-end, but clearly the text 64 00:03:30,041 --> 00:03:33,971 area is going further right in its size than the button. 65 00:03:34,454 --> 00:03:37,274 This is where the box sizing comes into play. 66 00:03:37,514 --> 00:03:40,094 The text area has a padding on the left and right. 67 00:03:40,394 --> 00:03:45,014 And you can see that the difference in size from the side of the button to the 68 00:03:45,014 --> 00:03:48,494 end of the text area is twice the padding. 69 00:03:48,794 --> 00:03:52,754 So that's the padding on the left plus the padding on the right added together. 70 00:03:53,084 --> 00:03:55,694 That is how much it's overhanging by. 71 00:03:56,214 --> 00:03:58,974 At the moment we haven't set to the box sizing to border box 72 00:03:59,124 --> 00:04:00,564 which is why this is happening. 73 00:04:01,164 --> 00:04:05,934 But if we do box-sizing: border box, then this will no longer happen. 74 00:04:05,934 --> 00:04:08,004 And the text area will now be the right size. 75 00:04:08,604 --> 00:04:10,824 We've discussed earlier on in the course, how you can set the 76 00:04:10,824 --> 00:04:12,444 border box to every element. 77 00:04:12,624 --> 00:04:14,364 So we're going to do that as well. 78 00:04:14,894 --> 00:04:16,214 Going up to the top. 79 00:04:16,244 --> 00:04:19,734 We're going to do body, box-sizing: border box. 80 00:04:19,974 --> 00:04:24,474 And we'll also do *, *::after, *::before. 81 00:04:25,474 --> 00:04:27,904 We do box sizing inherit. 82 00:04:28,404 --> 00:04:32,844 Now, by doing this, we can get rid of the box sizing border box in the text area. 83 00:04:33,174 --> 00:04:36,144 And by refreshing everything is the right size. 84 00:04:36,204 --> 00:04:38,664 You can see, in fact, that's something else has changed. 85 00:04:38,934 --> 00:04:43,224 Probably this image down here that I didn't realize at the time, but doing 86 00:04:43,224 --> 00:04:46,394 this, it's always a good idea to make sure that things are the size that you 87 00:04:46,394 --> 00:04:48,794 expect as per the content that we've set. 88 00:04:49,004 --> 00:04:50,204 So very good. 89 00:04:50,264 --> 00:04:54,164 Something that I forgot to add earlier on, but that's definitely worth adding. 90 00:04:54,809 --> 00:04:57,239 The next thing that we're going to do as per our design is we're 91 00:04:57,239 --> 00:04:58,709 going to get rid of the border. 92 00:04:58,709 --> 00:04:59,939 So by doing border: none. 93 00:04:59,969 --> 00:05:01,919 That's going to get rid of the border in the text area. 94 00:05:01,919 --> 00:05:04,259 Notice that when it's selected, there is still a border, but 95 00:05:04,259 --> 00:05:05,489 we probably want to keep that. 96 00:05:05,869 --> 00:05:08,809 Then we're going to set a background colour to make it the same 97 00:05:08,809 --> 00:05:11,539 colour as we had in our design. 98 00:05:12,179 --> 00:05:16,439 We'realso going to set a margin-bottom to 10 pixels to separate it 99 00:05:16,439 --> 00:05:17,819 a bit from other elements. 100 00:05:18,319 --> 00:05:20,689 There's a lot more that we could do with all of this. 101 00:05:20,689 --> 00:05:24,169 We can decorate it any way we want, but we're going to leave it at that for now. 102 00:05:24,692 --> 00:05:27,212 Then let's move on to the submit button. 103 00:05:28,212 --> 00:05:30,822 We're going to set the background colour first of all. 104 00:05:30,872 --> 00:05:36,632 It's going to be 3cd0ff, which is this shade of blue that we had selected. 105 00:05:37,097 --> 00:05:40,207 Make sure to not forget any underscores, which I seem to keep doing. 106 00:05:40,297 --> 00:05:41,137 And there you have that. 107 00:05:41,257 --> 00:05:42,727 Obviously it looks terrible at the moment. 108 00:05:42,847 --> 00:05:44,887 We do have to get rid of the border. 109 00:05:45,097 --> 00:05:45,817 So that's gone. 110 00:05:46,077 --> 00:05:49,547 We'll set the font size, to 18 pixels to match the rest of the body. 111 00:05:50,047 --> 00:05:52,057 Font-weight, we're going to set to bold. 112 00:05:52,207 --> 00:05:54,667 Padding five pixels and 30 pixels. 113 00:05:54,667 --> 00:05:57,377 Border-radius, which is going to give it a corner. 114 00:05:58,217 --> 00:05:59,357 It's going to be 20 pixels. 115 00:05:59,507 --> 00:06:02,687 And then finally the colour of the text is going to be white. 116 00:06:03,187 --> 00:06:06,667 Now, when you hover over the button, you can see that it doesn't look clickable. 117 00:06:06,687 --> 00:06:09,657 So we're going to add some styles on hover. 118 00:06:09,657 --> 00:06:14,437 We do form__submit:hover and now we can affect the styles when 119 00:06:14,467 --> 00:06:16,147 the mouse is over the button. 120 00:06:16,207 --> 00:06:19,517 So what we're gonna do is background colour and that is going to give it 121 00:06:19,517 --> 00:06:21,317 a slightly different color there. 122 00:06:21,857 --> 00:06:25,697 And also in the submit button, we have to add the cursor is pointer. 123 00:06:26,177 --> 00:06:29,177 That is going to make it look like a hand when we hover over it. 124 00:06:29,177 --> 00:06:30,647 So that looks a little bit better. 125 00:06:31,147 --> 00:06:35,317 At this point, we may want to add a colon after the entry contents to make it look a 126 00:06:35,317 --> 00:06:40,807 little bit more like a label, and we could get rid of the label entirely and replace 127 00:06:40,807 --> 00:06:43,387 it by some other accessible labeling. 128 00:06:43,627 --> 00:06:46,247 And it's something that we can do if we want to get rid of this label 129 00:06:46,267 --> 00:06:50,947 entirely is we can still keep that information around for screen readers. 130 00:06:51,247 --> 00:06:55,967 And one way that we can do that, for example, is by doing aria-label 131 00:06:56,987 --> 00:06:58,937 and putting here entry contents. 132 00:06:59,530 --> 00:07:02,230 And if we do this, screen readers are going to use this 133 00:07:02,230 --> 00:07:04,570 as the label for the text area. 134 00:07:04,750 --> 00:07:09,160 But now we could get rid of the label if we don't want it around for the screens. 135 00:07:09,580 --> 00:07:10,270 Totally up to you. 136 00:07:10,270 --> 00:07:12,370 This is what we had initially in the design. 137 00:07:12,730 --> 00:07:16,960 But I just think it's a little bit more obvious when the label is there. 138 00:07:17,230 --> 00:07:18,160 So I'm going to keep it. 139 00:07:18,160 --> 00:07:20,980 I'm going to just make that change to the design at this point. 140 00:07:21,480 --> 00:07:25,170 That is a way that you can use a label without actually displaying a label. 141 00:07:25,910 --> 00:07:27,350 All right, that's everything for this video. 142 00:07:27,350 --> 00:07:29,120 We have styled our form. 143 00:07:29,150 --> 00:07:32,690 We've learned how we can make changes to form inputs and buttons. 144 00:07:32,840 --> 00:07:35,930 And as you can see, they're all built up of the same stuff 145 00:07:36,020 --> 00:07:37,280 as everything else in HTML. 146 00:07:37,490 --> 00:07:38,750 There is content. 147 00:07:38,840 --> 00:07:42,230 There's background colours and colours and borders and paddings and margins 148 00:07:42,380 --> 00:07:44,780 and they're all built out of that stuff. 149 00:07:44,840 --> 00:07:48,350 So you can change it on any HTML element that you want and you can adjust the 150 00:07:48,360 --> 00:07:50,270 styling of all of them, just like that. 151 00:07:50,805 --> 00:07:53,865 So thank you guys for joining me in this video and I'll see you in the next one.