Voiceover: So, let's use CSS to style our contact form. 2 2
So, back here, I notice two things. 3 3
First, that these elements here don't 4 4
fill, 100% of their column. 5 5
And, the other thing, is that we 6 6
clearly don't need all the entire width 7 7
of the parent element of this row here. 8 8
'Cause there is way too much space 9 9
here between the labels and the elements. 10 10
And this doesn't look good. So, let's fix that. 11 11
So, back in our HTML file, this will be 12 12
the form and the class that we want 13 13
to format, the contact form. 14 14
So, add a new class, and some white space. 15 15
That's all this. 16 16
Delete this as well. 17 17
Alright, so let's say we want a width of only 60%. 18 18
This should be much better. 19 19
And then we also want to center that thing, 20 20
and we could use that technique where 21 21
we say that we want the left margin to be 20%, 22 22
which is half of the difference between 100 and 60. 23 23
But in the case, I want to format it the other way, 24 24
that I showed you before. 25 25
Which is saying that the margin 26 26
top and bottom should be zero. 27 27
And auto on left and right margin. 28 28
So, this will center this contact form 29 29
inside of its parent element. 30 30
And now I want to format my other form elements. 31 31
So, input and the other one was 32 32
the select element, and the text area. 33 33
And the first thing, I want them to be 34 34
100% wide, so that they fill their whole column. 35 35
And I also want them a little bit bigger, 36 36
by adding some padding inside of them. 37 37
Let's say seven pixels, that is a number that I like to use. 38 38
And also a little border radius 39 39
of let's say, three pixels. 40 40
Alright, let's see, what we got. 41 41
Okay, now we have some strange border here. 42 42
And we also have another thing, that we don't want, 43 43
which is this input element, and this one, 44 44
also fill the whole content. 45 45
But, in fact, we only want these two. 46 46
So, how do we achieve that? 47 47
Let me go back, and let me show it to you. 48 48
So, the one step we want are the ones with type text, 49 49
and type email, right? 50 50
So I will show a new selector in CSS now, 51 51
which does the following. 52 52
With them, we can select all input elements, 53 53
which has the type text. 54 54
So we say type should equal text. 55 55
And then we can say the same thing with email. 56 56
And, alright. It works. 57 57
So the bottom is back to normal 58 58
and this check button as well. 59 59
And now we gotta get rid of this weird border here. 60 60
And that should be quite easy, 61 61
just say border one pixel, as always, 62 62
and solid, and some grey color. 63 63
So, the color picker here, and let's say, 64 64
it shouldn't be too dark. 65 65
As always, we want something very subtle here. 66 66
I think this one is good. CCC. 67 67
That's also a grey color that I like to use a lot. 68 68
Alright, let's see. Okay, great. 69 69
You see that this select element here, 70 70
doesn't have the width of these two elements. 71 71
And, in fact, it's very difficult to 72 72
style these select elements, 73 73
and so we'll leave it just as it is. 74 74
Now we want this text area to be a little bigger, 75 75
and we want this send button here to 76 76
look like the other buttons. 77 77
I mean, like this button, like the full button. 78 78
So, let's go back. 79 79
So, I'll just say text area 80 80
and the height of 100 pixels. 81 81
And now for the button, we do a very simple thing now, 82 82
so we go back to the original buttons that we defined. 83 83
Oh, here they are. 84 84
And since we want them to look 85 85
exactly the same as these buttons, 86 86
we can just add a line here, 87 87
and then, they will be styled the same way. 88 88
And that button down there, 89 89
is an input, with type submit, right? 90 90
Do you remember? 91 91
So we just have to do this, 92 92
now let's copy this, because we also want to have it here. 93 93
So now it will look exactly like this full button. 94 94
Though here, of course, it is an equal, not an underscore. 95 95
And then we also, of course, want this hover effect here. 96 96
So let's place it here as well, 97 97
change that to equal, 98 98
and let's check this now. 99 99
Alright, this looks good. 100 100
And now we have to make this hover effect here work as well. 101 101
And that should be easy enough, 102 102
and back here, we just put, this code. 103 103
This one, of course. 104 104
Put it here and say hover, and the same thing with active. 105 105
And that should do the job. 106 106
Alright. 107 107
Okay, great. 108 108
So this looks, already, pretty formatted, right? 109 109
Maybe one thing that we can do here 110 110
to make this look even better is to 111 111
add some space around this checkbox here 112 112
because I think this looks a little wide space here. 113 113
You can actually see this here with those labels. 114 114
They look a little weird here. 115 115
So, I'm going to do that. 116 116
And the other thing is that I want to 117 117
get rid of these blue borders that will chromats to this. 118 118
So, let's do these two things now. 119 119
First, I add a checkbox, 120 120
and that's pretty easy. 121 121
Just say input and then, of course, type equals checkbox. 122 122
And I want some margin on maybe all sides, 123 123
so we didn't do this for a long time. 124 124
So, at the top I want, let's say 10 pixels, 125 125
at right side, I want some five pixels, 126 126
so between the checkbox and the text. 127 127
At the bottom, also 10 pixels, 128 128
and on the left side, no margin at all. 129 129
And the last thing is to get rid of those borders, 130 130
when we focus on those elements. 131 131
And the best thing of doing that is to 132 132
get rid of it for all elements. 133 133
So we have a lot of zero class here, which is called focus. 134 134
And we just say, outline none, and then it should go away. 135 135
So, check this out. 136 136
Alright, no focus here anymore, 137 137
and we have some distance here, 138 138
between those elements, which looks much better now. 139 139
So, yeah. 140 140
Now there's only the footer left to do, 141 141
and we'll do that right in the next lecture. 142 142
So, see you there.