Original subtitles

1 1

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.