1 00:00:02,070 --> 00:00:03,570 Now regarding the styling, 2 00:00:03,570 --> 00:00:07,430 it's of course, totally up to you how you want this to look. 3 00:00:07,430 --> 00:00:10,240 Here, I will just apply some styling, 4 00:00:10,240 --> 00:00:13,610 which I personally like for this forum. 5 00:00:13,610 --> 00:00:17,200 And I'll start with the sections actually. 6 00:00:17,200 --> 00:00:19,030 For all those sections, 7 00:00:19,030 --> 00:00:22,780 I'll add a margin to the bottom of 1rem 8 00:00:22,780 --> 00:00:26,290 so that there is some distance between all those sections. 9 00:00:26,290 --> 00:00:29,380 And we hence have an easier time 10 00:00:29,380 --> 00:00:31,773 understanding that form as a user. 11 00:00:33,130 --> 00:00:37,230 But then, I especially wanna work on the labels 12 00:00:37,230 --> 00:00:39,823 and the different input elements, of course. 13 00:00:40,660 --> 00:00:42,760 And for that, I'll start with the label 14 00:00:42,760 --> 00:00:47,110 and I'll select all the labels on this page here. 15 00:00:47,110 --> 00:00:48,250 And for every label, 16 00:00:48,250 --> 00:00:53,250 I first of all wanna give it a dark bluish color, 17 00:00:53,250 --> 00:00:56,380 actually a blue grayish color. 18 00:00:56,380 --> 00:01:00,863 And for this, I'll just pick maybe this color here. 19 00:01:01,730 --> 00:01:05,050 And of course you can pick any color you want. 20 00:01:05,050 --> 00:01:07,750 I'll also set display to block 21 00:01:07,750 --> 00:01:10,730 because by default labels are inline elements, 22 00:01:10,730 --> 00:01:12,270 but I wanna overwrite this now 23 00:01:12,270 --> 00:01:14,570 and switch them to block elements 24 00:01:15,870 --> 00:01:20,400 and I'll set the fund way too bold so that they are bold. 25 00:01:20,400 --> 00:01:22,990 And last but not least, I wanna have a margin, 26 00:01:22,990 --> 00:01:26,550 a margin to the bottom to be precise of 0.5rem 27 00:01:26,550 --> 00:01:29,460 so that there is some spacing between the label 28 00:01:29,460 --> 00:01:31,303 and the input field. 29 00:01:32,370 --> 00:01:36,170 Now, of course, some of these input label combinations 30 00:01:36,170 --> 00:01:37,570 are inside of a list 31 00:01:37,570 --> 00:01:40,300 and therefore I also wanna work on that. 32 00:01:40,300 --> 00:01:42,270 And on the unordered list, which I'm using, 33 00:01:42,270 --> 00:01:44,560 I wanna set the list style to none 34 00:01:44,560 --> 00:01:49,230 and also remove all margin and all padding which I have here 35 00:01:49,230 --> 00:01:52,180 so that we don't see that there is a list. 36 00:01:52,180 --> 00:01:54,463 So it would be just use it semantically. 37 00:01:55,850 --> 00:01:57,950 And I think the labels 38 00:01:57,950 --> 00:02:02,110 actually can use a little bit of a lighter color. 39 00:02:02,110 --> 00:02:03,360 Yeah, that looks better 40 00:02:03,360 --> 00:02:06,333 if they're not as dark and as strong. 41 00:02:07,890 --> 00:02:12,890 I will actually also switch from margin bottom on the labels 42 00:02:13,150 --> 00:02:17,180 to margin in general and at the same margin top and bottom, 43 00:02:17,180 --> 00:02:20,743 and then just set a margin of zero to the left and right, 44 00:02:22,320 --> 00:02:23,153 like that. 45 00:02:24,000 --> 00:02:27,000 Now let's also work on the input elements. 46 00:02:27,000 --> 00:02:32,000 For this here, I'll target my inputs and also the text area 47 00:02:32,240 --> 00:02:35,040 and also to select element. 48 00:02:35,040 --> 00:02:38,200 And they will all receive the same style here. 49 00:02:38,200 --> 00:02:42,470 And the style is that the font should be inherited 50 00:02:42,470 --> 00:02:45,550 so that I'm using the font style, 51 00:02:45,550 --> 00:02:48,780 especially the font family, which I'm setting into body 52 00:02:48,780 --> 00:02:51,270 instead of that browser default font, 53 00:02:51,270 --> 00:02:52,793 which is set otherwise. 54 00:02:53,840 --> 00:02:58,320 And I'll give them more padding, maybe off 0.5rem 55 00:02:59,550 --> 00:03:04,150 and set the border to one pixel solid. 56 00:03:04,150 --> 00:03:07,960 And then here, I wanna use a gray bluish color. 57 00:03:07,960 --> 00:03:11,420 So I'll start at gray, but it doesn't really matter, 58 00:03:11,420 --> 00:03:16,420 and then pick like does a light gray bluish color. 59 00:03:17,940 --> 00:03:22,520 I'll also set the width to 100% and set display to block 60 00:03:22,520 --> 00:03:24,010 so that these elements 61 00:03:24,010 --> 00:03:26,683 are now also treated as block elements. 62 00:03:27,580 --> 00:03:30,410 And I'll set the border radius to four pixels 63 00:03:30,410 --> 00:03:32,333 to give them some rounded corners. 64 00:03:33,970 --> 00:03:36,910 With that, I'd say that looks a bit better. 65 00:03:36,910 --> 00:03:39,230 However, you notice that the width is a bit off 66 00:03:39,230 --> 00:03:41,510 and that's something which we can fix 67 00:03:41,510 --> 00:03:45,190 by changing the box sizing to border box. 68 00:03:45,190 --> 00:03:48,040 So that the actual width, which we're setting 69 00:03:48,040 --> 00:03:50,873 actually does respect paddings 70 00:03:50,873 --> 00:03:55,500 and especially the padding of the form around this box here 71 00:03:55,500 --> 00:03:59,550 and hence it does not stretch over that padding 72 00:03:59,550 --> 00:04:01,073 off that parent box. 73 00:04:01,950 --> 00:04:05,040 And I think actually the labels will look better 74 00:04:05,040 --> 00:04:06,900 if I don't make them bold here. 75 00:04:06,900 --> 00:04:08,833 Yeah, that's definitely looks better. 76 00:04:09,930 --> 00:04:11,610 So this is taking shape. 77 00:04:11,610 --> 00:04:16,610 For the text area, I actually wanna add the rows attribute. 78 00:04:17,600 --> 00:04:21,839 So here I'll add rows and set this text area 79 00:04:21,839 --> 00:04:26,300 to let's say, seven rows so that it's a bit bigger, 80 00:04:26,300 --> 00:04:27,970 maybe six. 81 00:04:27,970 --> 00:04:30,130 And I also wanna disable a resizing. 82 00:04:30,130 --> 00:04:33,460 And for this, we can select the textarea here 83 00:04:33,460 --> 00:04:34,873 and set resize to none. 84 00:04:36,930 --> 00:04:40,870 I also wanna apply some special focus styles. 85 00:04:40,870 --> 00:04:45,220 So if our input is focused or to text areas focused, 86 00:04:45,220 --> 00:04:47,730 then I wanna change the styling. 87 00:04:47,730 --> 00:04:52,440 And I wanna change the background color a little bit 88 00:04:52,440 --> 00:04:57,440 and use that dark blue grayish color, 89 00:04:57,500 --> 00:05:02,500 but use a way lighter version off that maybe here, 90 00:05:02,800 --> 00:05:04,320 so that if we select the input, 91 00:05:04,320 --> 00:05:07,720 we have this bluish background and yeah, 92 00:05:07,720 --> 00:05:09,133 that doesn't look too bad. 93 00:05:10,660 --> 00:05:13,800 Of course, we now got an issue regarding those inputs 94 00:05:13,800 --> 00:05:18,800 where the labels should be in line with the input element. 95 00:05:19,630 --> 00:05:21,960 And for that, we can add a class 96 00:05:23,440 --> 00:05:26,260 inline-control for example, 97 00:05:26,260 --> 00:05:28,070 but the class name is up to you. 98 00:05:28,070 --> 00:05:31,060 Where I'll set to display to flex, 99 00:05:31,060 --> 00:05:34,110 and that will move those elements back into one line, 100 00:05:34,110 --> 00:05:37,410 even though we're dealing with block level elements, 101 00:05:37,410 --> 00:05:40,600 but Flexbox is all about positioning 102 00:05:40,600 --> 00:05:45,530 and aligning such block level elements along one axis. 103 00:05:45,530 --> 00:05:48,520 And the default here is the horizontal axis. 104 00:05:48,520 --> 00:05:51,350 So elements we'll move back into one line 105 00:05:51,350 --> 00:05:53,223 if we use Flexbox here. 106 00:05:54,530 --> 00:05:56,810 So I'll set this to display: flex. 107 00:05:56,810 --> 00:05:58,270 And then in the index.html 108 00:05:58,270 --> 00:06:02,520 we just have to apply this inline-control class 109 00:06:02,520 --> 00:06:06,830 to the parent elements off the input label combinations 110 00:06:06,830 --> 00:06:09,470 that should sit in one line. 111 00:06:09,470 --> 00:06:12,910 And that for example, would be our radio buttons. 112 00:06:12,910 --> 00:06:16,940 Here on the list items that hold the input and label, 113 00:06:16,940 --> 00:06:19,120 we have to add that class 114 00:06:19,120 --> 00:06:22,720 so that Flexbox is added on this list item 115 00:06:22,720 --> 00:06:26,803 because Flexbox, as you learned, affects the child items. 116 00:06:27,740 --> 00:06:31,160 And then we add this class not just to this first list item, 117 00:06:31,160 --> 00:06:33,763 but also to the second and to the third one. 118 00:06:34,990 --> 00:06:37,490 And we also added to this section, 119 00:06:37,490 --> 00:06:40,193 which has to accept terms checkbox. 120 00:06:41,070 --> 00:06:44,460 Now that's of course not the final look we want, though. 121 00:06:44,460 --> 00:06:46,680 We also have to change the size. 122 00:06:46,680 --> 00:06:50,240 So I'll also select all the inputs 123 00:06:50,240 --> 00:06:52,420 that are inside of an element 124 00:06:52,420 --> 00:06:55,470 with the inline-control class on it 125 00:06:55,470 --> 00:06:57,740 and I'll set the width to auto 126 00:06:58,690 --> 00:07:02,620 so that we don't have that width of 100% here. 127 00:07:02,620 --> 00:07:04,800 And with that, that looks better. 128 00:07:04,800 --> 00:07:06,170 And now to make sure 129 00:07:06,170 --> 00:07:09,700 that they are really sitting next to each other 130 00:07:09,700 --> 00:07:12,940 and not a position like this, 131 00:07:12,940 --> 00:07:17,350 I will also remove the margin from the labels 132 00:07:17,350 --> 00:07:21,890 that are inside off an element with inline-control on it. 133 00:07:21,890 --> 00:07:23,850 So that margin is set to zero 134 00:07:23,850 --> 00:07:28,760 for labels inside of such an inline-control element. 135 00:07:28,760 --> 00:07:30,273 And now that looks better. 136 00:07:31,640 --> 00:07:35,240 We can also give that label a little bit of margin 137 00:07:35,240 --> 00:07:36,460 to the left now, 138 00:07:36,460 --> 00:07:40,300 so that there is some distance to that checkbox 139 00:07:40,300 --> 00:07:41,513 or radio button. 140 00:07:43,490 --> 00:07:46,223 And I would say that looks quite decent here. 141 00:07:47,340 --> 00:07:51,350 Now, I definitely also wanna style those buttons though. 142 00:07:51,350 --> 00:07:53,430 And for this, you might've noticed 143 00:07:53,430 --> 00:07:57,430 that the buttons actually don't have the same look 144 00:07:58,641 --> 00:07:59,930 and we can achieve this 145 00:07:59,930 --> 00:08:02,790 by selecting the two buttons individually, 146 00:08:02,790 --> 00:08:05,650 at least for some styles, 147 00:08:05,650 --> 00:08:08,280 but they all will have some common styles 148 00:08:08,280 --> 00:08:13,280 and therefore or first of all, select my buttons as a whole. 149 00:08:13,820 --> 00:08:16,000 So all the buttons on the screen 150 00:08:16,000 --> 00:08:18,730 and give them some base styles. 151 00:08:18,730 --> 00:08:22,190 For example, that the font will be inherited, 152 00:08:22,190 --> 00:08:27,030 that I want to have a border of one pixel solid 153 00:08:27,030 --> 00:08:30,560 and then this dark gray bluish color, 154 00:08:30,560 --> 00:08:32,873 maybe even a bit more blue here. 155 00:08:34,090 --> 00:08:38,820 I'll also add a padding of 0.5rem, 1.5rem 156 00:08:39,919 --> 00:08:43,230 to have some spacing around the text instead of the button 157 00:08:43,230 --> 00:08:47,850 and set the border radius to four pixels here 158 00:08:48,840 --> 00:08:50,700 and set the cursor to pointer 159 00:08:50,700 --> 00:08:52,750 so that we get this hand cursor 160 00:08:52,750 --> 00:08:54,523 when we hover over the buttons. 161 00:08:56,070 --> 00:08:59,250 But then we have differently styled buttons 162 00:08:59,250 --> 00:09:00,890 and we can reflect this 163 00:09:00,890 --> 00:09:03,500 by assigning different IDs to the buttons 164 00:09:03,500 --> 00:09:07,060 and targeting those IDs with CSS, 165 00:09:07,060 --> 00:09:10,390 or if it would be possible that we use those button styles 166 00:09:10,390 --> 00:09:12,860 for our buttons on the page as well, 167 00:09:12,860 --> 00:09:14,510 even though here in this demo, 168 00:09:14,510 --> 00:09:16,890 we only have two buttons overall, 169 00:09:16,890 --> 00:09:19,670 then we could also use classes. 170 00:09:19,670 --> 00:09:22,020 And I'll use class selectors here, 171 00:09:22,020 --> 00:09:24,950 but again, you could also use ID selectors. 172 00:09:24,950 --> 00:09:27,330 We just need some different selectors 173 00:09:27,330 --> 00:09:29,610 for the two buttons we have. 174 00:09:29,610 --> 00:09:33,210 And here I'll add a button filled selector 175 00:09:33,210 --> 00:09:37,149 and I'll add a button empty selector. 176 00:09:37,149 --> 00:09:39,080 And for the button field selector, 177 00:09:39,080 --> 00:09:44,080 I wanna set a background color of that blue grayish color, 178 00:09:45,900 --> 00:09:48,870 which I used for the border of the button as well. 179 00:09:48,870 --> 00:09:51,673 And I'll set the text color here to white then, 180 00:09:52,970 --> 00:09:54,780 and for the empty button, 181 00:09:54,780 --> 00:09:57,620 I'll set the background color to transparent 182 00:09:57,620 --> 00:09:59,730 so that there's no background, 183 00:09:59,730 --> 00:10:01,480 but I'll set the text color 184 00:10:01,480 --> 00:10:06,480 to this dark blue gray color here, like this. 185 00:10:08,290 --> 00:10:11,380 Now we probably also want some hover styles 186 00:10:11,380 --> 00:10:14,090 and for this I'll select the filled button 187 00:10:14,090 --> 00:10:15,540 in the hover state, 188 00:10:15,540 --> 00:10:18,580 by combining this button field class selector 189 00:10:18,580 --> 00:10:20,903 with that hover sudo selector, 190 00:10:21,920 --> 00:10:25,230 and then here we can set the background color 191 00:10:25,230 --> 00:10:27,480 to this color we used before, 192 00:10:27,480 --> 00:10:30,963 but now use a lighter version maybe, 193 00:10:32,050 --> 00:10:35,010 and do the same for the border color here. 194 00:10:35,010 --> 00:10:38,243 Use that same lighter color now. 195 00:10:39,320 --> 00:10:42,730 And for btn-empty, when hovered, 196 00:10:42,730 --> 00:10:46,520 then I wanna set a background color 197 00:10:46,520 --> 00:10:51,520 of a very light blue gray, something like this maybe. 198 00:10:51,640 --> 00:10:53,083 Let's see if that works. 199 00:10:54,620 --> 00:10:58,470 And now we just need to assign those classes to the buttons. 200 00:10:58,470 --> 00:11:00,170 For this on that first button, 201 00:11:00,170 --> 00:11:02,560 I'll add a class of button empty 202 00:11:02,560 --> 00:11:05,250 because that should be this empty button. 203 00:11:05,250 --> 00:11:08,243 On the second button, I'll add button filled. 204 00:11:09,850 --> 00:11:11,550 And if we now save this, 205 00:11:11,550 --> 00:11:15,193 we got those buttons with the appropriate hover effects. 206 00:11:16,300 --> 00:11:19,110 Now the buttons also should sit on the right here 207 00:11:19,110 --> 00:11:22,070 and we can achieve this by targeting section 208 00:11:22,070 --> 00:11:23,670 which contains the buttons, 209 00:11:23,670 --> 00:11:27,400 and then we can either use Flexbox on this section 210 00:11:27,400 --> 00:11:30,370 to control the positioning of the child elements, 211 00:11:30,370 --> 00:11:34,300 or since buttons are inline elements, as you learned, 212 00:11:34,300 --> 00:11:36,900 we can also adjust you was text align, 213 00:11:36,900 --> 00:11:38,950 and that's what I'll do here. 214 00:11:38,950 --> 00:11:42,090 And for selecting this section, I'll use an ID 215 00:11:42,090 --> 00:11:44,823 and just name it, form-actions. 216 00:11:45,660 --> 00:11:50,250 The idea of course is up to you and then install CSS, 217 00:11:50,250 --> 00:11:54,490 maybe here after the button selector, 218 00:11:54,490 --> 00:11:59,163 I'll target form-actions and set text-align to right here. 219 00:12:00,050 --> 00:12:05,050 And that will move the buttons to the right, like that. 220 00:12:05,630 --> 00:12:07,410 And this doesn't look too bad. 221 00:12:07,410 --> 00:12:09,990 That's a nice form, if I try to submit it, 222 00:12:09,990 --> 00:12:12,390 I also get my validation here. 223 00:12:12,390 --> 00:12:16,263 And with that, we got this task solved.