1 00:00:02,080 --> 00:00:06,247 So, let's use CSS to style our contact form. 2 00:00:08,232 --> 00:00:10,965 So, back here, I notice two things. 3 00:00:10,965 --> 00:00:14,108 First, that these elements here don't 4 00:00:14,108 --> 00:00:16,775 fill, 100% of their column. 5 00:00:17,856 --> 00:00:19,915 And, the other thing, is that we 6 00:00:19,915 --> 00:00:23,460 clearly don't need all the entire width 7 00:00:23,460 --> 00:00:26,668 of the parent element of this row here. 8 00:00:26,668 --> 00:00:28,687 'Cause there is way too much space 9 00:00:28,687 --> 00:00:32,331 here between the labels and the elements. 10 00:00:32,331 --> 00:00:36,248 And this doesn't look good. So, let's fix that. 11 00:00:37,797 --> 00:00:41,047 So, back in our HTML file, this will be 12 00:00:42,116 --> 00:00:45,033 the form and the class that we want 13 00:00:45,917 --> 00:00:48,250 to format, the contact form. 14 00:00:50,323 --> 00:00:54,466 So, add a new class, and some white space. 15 00:00:54,466 --> 00:00:55,799 That's all this. 16 00:00:56,835 --> 00:00:58,502 Delete this as well. 17 00:01:04,485 --> 00:01:08,652 Alright, so let's say we want a width of only 60%. 18 00:01:12,264 --> 00:01:14,440 This should be much better. 19 00:01:14,440 --> 00:01:18,469 And then we also want to center that thing, 20 00:01:18,469 --> 00:01:20,457 and we could use that technique where 21 00:01:20,457 --> 00:01:24,469 we say that we want the left margin to be 20%, 22 00:01:24,469 --> 00:01:28,834 which is half of the difference between 100 and 60. 23 00:01:28,834 --> 00:01:33,480 But in the case, I want to format it the other way, 24 00:01:33,480 --> 00:01:34,811 that I showed you before. 25 00:01:34,811 --> 00:01:36,235 Which is saying that the margin 26 00:01:36,235 --> 00:01:39,129 top and bottom should be zero. 27 00:01:39,129 --> 00:01:41,962 And auto on left and right margin. 28 00:01:42,814 --> 00:01:45,430 So, this will center this contact form 29 00:01:45,430 --> 00:01:47,847 inside of its parent element. 30 00:01:48,875 --> 00:01:52,615 And now I want to format my other form elements. 31 00:01:52,615 --> 00:01:55,198 So, input and the other one was 32 00:01:56,431 --> 00:01:59,598 the select element, and the text area. 33 00:02:02,849 --> 00:02:06,016 And the first thing, I want them to be 34 00:02:07,770 --> 00:02:11,937 100% wide, so that they fill their whole column. 35 00:02:14,960 --> 00:02:17,548 And I also want them a little bit bigger, 36 00:02:17,548 --> 00:02:21,269 by adding some padding inside of them. 37 00:02:21,269 --> 00:02:25,436 Let's say seven pixels, that is a number that I like to use. 38 00:02:26,382 --> 00:02:28,965 And also a little border radius 39 00:02:31,026 --> 00:02:33,276 of let's say, three pixels. 40 00:02:35,517 --> 00:02:38,184 Alright, let's see, what we got. 41 00:02:39,809 --> 00:02:43,392 Okay, now we have some strange border here. 42 00:02:45,470 --> 00:02:49,161 And we also have another thing, that we don't want, 43 00:02:49,161 --> 00:02:52,661 which is this input element, and this one, 44 00:02:53,761 --> 00:02:55,935 also fill the whole content. 45 00:02:55,935 --> 00:02:59,687 But, in fact, we only want these two. 46 00:02:59,687 --> 00:03:02,761 So, how do we achieve that? 47 00:03:02,761 --> 00:03:06,261 Let me go back, and let me show it to you. 48 00:03:07,585 --> 00:03:11,752 So, the one step we want are the ones with type text, 49 00:03:12,842 --> 00:03:14,675 and type email, right? 50 00:03:16,147 --> 00:03:19,502 So I will show a new selector in CSS now, 51 00:03:19,502 --> 00:03:21,199 which does the following. 52 00:03:21,199 --> 00:03:25,434 With them, we can select all input elements, 53 00:03:25,434 --> 00:03:27,434 which has the type text. 54 00:03:29,095 --> 00:03:31,845 So we say type should equal text. 55 00:03:33,003 --> 00:03:36,836 And then we can say the same thing with email. 56 00:03:43,254 --> 00:03:45,171 And, alright. It works. 57 00:03:46,278 --> 00:03:48,681 So the bottom is back to normal 58 00:03:48,681 --> 00:03:51,181 and this check button as well. 59 00:03:52,607 --> 00:03:57,109 And now we gotta get rid of this weird border here. 60 00:03:57,109 --> 00:03:59,080 And that should be quite easy, 61 00:03:59,080 --> 00:04:02,163 just say border one pixel, as always, 62 00:04:03,605 --> 00:04:06,188 and solid, and some grey color. 63 00:04:08,011 --> 00:04:11,428 So, the color picker here, and let's say, 64 00:04:13,674 --> 00:04:15,533 it shouldn't be too dark. 65 00:04:15,533 --> 00:04:18,335 As always, we want something very subtle here. 66 00:04:18,335 --> 00:04:21,593 I think this one is good. CCC. 67 00:04:21,593 --> 00:04:25,926 That's also a grey color that I like to use a lot. 68 00:04:25,926 --> 00:04:28,593 Alright, let's see. Okay, great. 69 00:04:31,220 --> 00:04:35,061 You see that this select element here, 70 00:04:35,061 --> 00:04:38,811 doesn't have the width of these two elements. 71 00:04:41,378 --> 00:04:43,862 And, in fact, it's very difficult to 72 00:04:43,862 --> 00:04:46,706 style these select elements, 73 00:04:46,706 --> 00:04:49,706 and so we'll leave it just as it is. 74 00:04:51,924 --> 00:04:55,025 Now we want this text area to be a little bigger, 75 00:04:55,025 --> 00:04:57,687 and we want this send button here to 76 00:04:57,687 --> 00:05:00,020 look like the other buttons. 77 00:05:02,535 --> 00:05:05,982 I mean, like this button, like the full button. 78 00:05:05,982 --> 00:05:07,482 So, let's go back. 79 00:05:08,425 --> 00:05:10,675 So, I'll just say text area 80 00:05:11,945 --> 00:05:14,362 and the height of 100 pixels. 81 00:05:16,927 --> 00:05:21,094 And now for the button, we do a very simple thing now, 82 00:05:23,980 --> 00:05:28,147 so we go back to the original buttons that we defined. 83 00:05:30,047 --> 00:05:32,350 Oh, here they are. 84 00:05:32,350 --> 00:05:35,039 And since we want them to look 85 00:05:35,039 --> 00:05:37,176 exactly the same as these buttons, 86 00:05:37,176 --> 00:05:38,425 we can just add a line here, 87 00:05:38,425 --> 00:05:42,008 and then, they will be styled the same way. 88 00:05:42,978 --> 00:05:45,848 And that button down there, 89 00:05:45,848 --> 00:05:48,931 is an input, with type submit, right? 90 00:05:51,315 --> 00:05:53,057 Do you remember? 91 00:05:53,057 --> 00:05:56,047 So we just have to do this, 92 00:05:56,047 --> 00:06:00,214 now let's copy this, because we also want to have it here. 93 00:06:01,663 --> 00:06:05,830 So now it will look exactly like this full button. 94 00:06:07,232 --> 00:06:11,399 Though here, of course, it is an equal, not an underscore. 95 00:06:13,250 --> 00:06:17,417 And then we also, of course, want this hover effect here. 96 00:06:19,644 --> 00:06:22,357 So let's place it here as well, 97 00:06:22,357 --> 00:06:24,107 change that to equal, 98 00:06:25,059 --> 00:06:27,304 and let's check this now. 99 00:06:27,304 --> 00:06:29,387 Alright, this looks good. 100 00:06:30,533 --> 00:06:34,307 And now we have to make this hover effect here work as well. 101 00:06:34,307 --> 00:06:36,865 And that should be easy enough, 102 00:06:36,865 --> 00:06:40,032 and back here, we just put, this code. 103 00:06:46,259 --> 00:06:47,926 This one, of course. 104 00:06:49,334 --> 00:06:53,501 Put it here and say hover, and the same thing with active. 105 00:06:59,661 --> 00:07:01,911 And that should do the job. 106 00:07:04,198 --> 00:07:05,031 Alright. 107 00:07:08,866 --> 00:07:09,866 Okay, great. 108 00:07:13,420 --> 00:07:17,652 So this looks, already, pretty formatted, right? 109 00:07:17,652 --> 00:07:19,787 Maybe one thing that we can do here 110 00:07:19,787 --> 00:07:22,200 to make this look even better is to 111 00:07:22,200 --> 00:07:24,651 add some space around this checkbox here 112 00:07:24,651 --> 00:07:28,818 because I think this looks a little wide space here. 113 00:07:30,887 --> 00:07:34,406 You can actually see this here with those labels. 114 00:07:34,406 --> 00:07:36,906 They look a little weird here. 115 00:07:38,556 --> 00:07:39,666 So, I'm going to do that. 116 00:07:39,666 --> 00:07:41,201 And the other thing is that I want to 117 00:07:41,201 --> 00:07:45,368 get rid of these blue borders that will chromats to this. 118 00:07:47,413 --> 00:07:50,246 So, let's do these two things now. 119 00:07:53,637 --> 00:07:55,637 First, I add a checkbox, 120 00:07:56,646 --> 00:07:57,895 and that's pretty easy. 121 00:07:57,895 --> 00:08:02,062 Just say input and then, of course, type equals checkbox. 122 00:08:08,995 --> 00:08:13,084 And I want some margin on maybe all sides, 123 00:08:13,084 --> 00:08:15,608 so we didn't do this for a long time. 124 00:08:15,608 --> 00:08:19,612 So, at the top I want, let's say 10 pixels, 125 00:08:19,612 --> 00:08:22,549 at right side, I want some five pixels, 126 00:08:22,549 --> 00:08:26,139 so between the checkbox and the text. 127 00:08:26,139 --> 00:08:29,229 At the bottom, also 10 pixels, 128 00:08:29,229 --> 00:08:32,939 and on the left side, no margin at all. 129 00:08:32,939 --> 00:08:36,057 And the last thing is to get rid of those borders, 130 00:08:36,057 --> 00:08:38,724 when we focus on those elements. 131 00:08:40,482 --> 00:08:42,566 And the best thing of doing that is to 132 00:08:42,566 --> 00:08:45,711 get rid of it for all elements. 133 00:08:45,711 --> 00:08:49,878 So we have a lot of zero class here, which is called focus. 134 00:08:50,865 --> 00:08:55,032 And we just say, outline none, and then it should go away. 135 00:08:56,459 --> 00:08:58,042 So, check this out. 136 00:08:59,808 --> 00:09:02,326 Alright, no focus here anymore, 137 00:09:02,326 --> 00:09:04,477 and we have some distance here, 138 00:09:04,477 --> 00:09:09,092 between those elements, which looks much better now. 139 00:09:09,092 --> 00:09:09,925 So, yeah. 140 00:09:11,009 --> 00:09:14,560 Now there's only the footer left to do, 141 00:09:14,560 --> 00:09:17,296 and we'll do that right in the next lecture. 142 00:09:17,296 --> 00:09:18,796 So, see you there.