WEBVTT

0
00:00.310 --> 00:05.320
Let's talk about styling forms in a little bit more detail.

1
00:05.350 --> 00:10.480
The first thing I want to mention is that to style form controls that are easy to style, remember those

2
00:10.480 --> 00:11.200
good ones?

3
00:11.200 --> 00:17.740
You shouldn't face much difficulties at all, since they mostly behave like any other HTML element.

4
00:17.740 --> 00:25.810
And as well as some basic CSS tools, we can also access several selectors, UI pseudo classes, that enable

5
00:25.810 --> 00:33.250
styling based on the current state of the UI. And we've already seen many examples of using these pseudo

6
00:33.250 --> 00:38.170
classes in the course already. And there are few kind of important points I just want to make.

7
00:38.170 --> 00:44.110
Firstly, I want to look at fonts and text when it comes to styling our form widgets.

8
00:44.110 --> 00:50.770
The first thing I want to say about it, is that the CSS font and text features can be used easily with

9
00:50.770 --> 00:57.100
most form widgets. And to make your form appearance consistent, you can use this CSS rule.

10
00:57.100 --> 01:02.530
You can actually target the font-family and font-size, and when you set it to `inherit`, what it does

11
01:02.530 --> 01:08.710
is that all the child elements will inherit the font family from their parent, and this will make most

12
01:08.710 --> 01:12.280
form widgets consistent with your overall theme of your site.

13
01:12.280 --> 01:16.690
But my dear students, browser behavior is often inconsistent.

14
01:16.690 --> 01:21.820
And what I mean by this is that by default, some widgets will not inherit font-family and font-size

15
01:21.820 --> 01:22.720
from their parents 😖.

16
01:22.720 --> 01:24.670
So just bear that in mind.

17
01:24.670 --> 01:26.290
So that's fonts and text.

18
01:26.290 --> 01:31.630
The other very important CSS property we need to discuss is box sizing.

19
01:31.630 --> 01:36.130
Because this can make or break the styling of your form, it really is good to know.

20
01:36.130 --> 01:38.050
So what is this box sizing all about?

21
01:38.050 --> 01:45.340
Well, firstly when it comes to fonts and texts, they have support for every property related to the

22
01:45.340 --> 01:46.720
CSS box model.

23
01:46.720 --> 01:51.940
And what do I mean when I say that all text fields have complete support for every property related

24
01:51.940 --> 01:53.470
to the CSS box model?

25
01:53.470 --> 01:58.780
Well, I just mean all of these text fields allow us to manipulate the width, height, padding, margin,

26
01:58.780 --> 02:00.250
and border properties.

27
02:00.250 --> 02:07.510
And remember, every browser relies on their system default styling when displaying widgets, so it's

28
02:07.510 --> 02:11.380
up to you to define how you wish to blend them into your content.

29
02:11.380 --> 02:16.420
If you want to keep the native look and feel of the widgets, you'll face difficulty if you want to

30
02:16.420 --> 02:18.670
give them a consistent size.

31
02:18.670 --> 02:24.580
And this is because each widget has their own rules for border padding and margin.

32
02:24.580 --> 02:28.750
So if each widget has their own rules, what do we do to make it consistent?

33
02:29.140 --> 02:33.400
Well, it's actually surprisingly easy. To give the same size to different widgets,

34
02:33.400 --> 02:36.820
we can just target the `box-sizing` property.

35
02:36.820 --> 02:37.570
(what?)

36
02:37.570 --> 02:38.740
Whaaaat?

37
02:38.770 --> 02:40.270
Well, don't stress, don't stress.

38
02:40.270 --> 02:41.080
You know me.

39
02:41.080 --> 02:43.990
I love looking at examples.

40
02:43.990 --> 02:49.420
So why don't we hop over to the text editor and let me show you how it works in action?

41
02:49.420 --> 02:52.180
I mean, you can see here, just a snapshot,

42
02:52.180 --> 02:56.620
we target the box-sizing property and we set its value to border-box.

43
02:57.220 --> 02:58.780
Let me show you what that does.

44
02:59.110 --> 03:02.830
Very quickly I want to show you how this box-sizing property works.

45
03:02.830 --> 03:05.620
So let's just create a very simple HTML page.

46
03:05.620 --> 03:09.040
We're going to have a style section, because I want to use this box-styling property.

47
03:09.400 --> 03:14.350
But for now let's just create our form widgets, and see the default styling that's applied.

48
03:14.350 --> 03:17.560
The first form widget I want to create is an input with type text.

49
03:17.560 --> 03:20.230
We save this, refresh the browser and there we go.

50
03:20.230 --> 03:21.910
We don't need an ID and name.

51
03:21.910 --> 03:24.820
We can actually just put a placeholder. "box 

52
03:25.180 --> 03:26.920
sizing is cool."

53
03:27.520 --> 03:28.420
There we go.

54
03:29.750 --> 03:31.010
Pretty straightforward.

55
03:31.100 --> 03:37.670
All right, let's put a break and then let's now create another input, this time with its type attribute

56
03:37.670 --> 03:40.460
set to date. Input date.

57
03:41.890 --> 03:42.670
Save this.

58
03:42.670 --> 03:43.390
And there we go.

59
03:43.390 --> 03:49.330
You can already see the browsers applying different styling, different widths to different types of

60
03:49.330 --> 03:50.230
form controls.

61
03:50.230 --> 03:51.970
Again, we don't need name and ID.

62
03:52.940 --> 03:54.500
Let's have another break. This time,

63
03:54.500 --> 03:57.080
let's try, you know, a select element.

64
03:57.080 --> 03:57.740
How about that?

65
03:57.740 --> 04:00.080
We will even move away from the input element

66
04:00.880 --> 04:03.940
entirely 😲. I know, I know, I'm daring, I'm daring.

67
04:03.940 --> 04:04.660
So there we go.

68
04:04.660 --> 04:07.300
Here's another default sizing applied by the browser.

69
04:07.810 --> 04:09.910
Um, why don't we try `textarea`? Break, 

70
04:09.910 --> 04:11.500
let's try textarea.

71
04:12.420 --> 04:15.210
Uh, we don't need a name, ID, columns or rows.

72
04:15.240 --> 04:19.380
We'll just have the default. Wnd we can say "box sizing is cool."

73
04:19.410 --> 04:20.670
Save this.

74
04:20.790 --> 04:21.690
And there we go.

75
04:21.720 --> 04:24.930
Yet another width applied to another form control.

76
04:24.960 --> 04:26.250
Okay, Clyde, these are just elements.

77
04:26.250 --> 04:27.180
But what about buttons?

78
04:27.180 --> 04:28.770
Well, let's do an input.

79
04:28.770 --> 04:30.570
Oh, well, firstly, let me do a break.

80
04:30.570 --> 04:32.520
Let's do an input of type submit.

81
04:32.520 --> 04:35.760
And we can have the value being submit.

82
04:36.410 --> 04:43.940
Save that. There's a button ... yet another width. And we can even try yet another button, this time the

83
04:43.940 --> 04:46.910
actual button element of type `submit`.

84
04:48.110 --> 04:49.430
Give it the value of submit.

85
04:49.430 --> 04:51.170
And there we go.

86
04:51.200 --> 04:53.120
All right, let's expand this.

87
04:53.860 --> 05:00.250
You can see we've got different form controls, all with their own styling applied by the browser.

88
05:00.250 --> 05:04.120
But ... this is where the benefit of box-sizing comes in

89
05:04.120 --> 05:05.530
my dear students. You know what,

90
05:05.530 --> 05:09.610
let me actually have this side by side because you're going to see a massive transformation now.

91
05:09.610 --> 05:16.870
And let's target absolutely everything - all our inputs, all our select elements, all of our textarea

92
05:16.870 --> 05:19.570
elements, and of course our buttons.

93
05:19.570 --> 05:27.460
Now this is where the magic happens, because if we access the CSS box-sizing property and we set it

94
05:27.460 --> 05:29.020
to content-box,

95
05:29.930 --> 05:31.010
nothing seems to happen.

96
05:31.010 --> 05:32.660
But actually, let me prove it to you.

97
05:32.660 --> 05:36.050
Let's say we want our form to be uniform.

98
05:36.050 --> 05:37.760
We want all our widgets to be the same width.

99
05:37.760 --> 05:40.880
So let's set a width of, I don't know, 150 pixels.

100
05:40.880 --> 05:44.210
We can see that because it's the content box.

101
05:44.210 --> 05:47.630
It's only literally the content that's 150 pixels.

102
05:47.630 --> 05:51.740
The browser then still applies the default padding and borders to it.

103
05:51.740 --> 05:54.230
So that's why we can see different widths on all of our widgets

104
05:54.230 --> 05:59.960
even though we've tried to say we want it all at 150 pixels! The most easiest solution is to not have

105
05:59.960 --> 06:01.850
content-box, we can have

106
06:01.850 --> 06:03.560
that's right, border-box.

107
06:03.560 --> 06:06.710
And if we hit save, look how cool that is.

108
06:06.710 --> 06:07.850
It's all aligned.

109
06:07.850 --> 06:10.190
And we can even, you know, affect padding.

110
06:10.340 --> 06:15.650
Um, and we know that the width will always be the same.

111
06:16.130 --> 06:17.930
This is the benefit with border-box.

112
06:17.930 --> 06:21.020
But let's say you have to use content-box.

113
06:21.020 --> 06:23.060
How would you make the widths the same.

114
06:23.060 --> 06:27.110
Well remember that the content-box doesn't include padding and borders.

115
06:27.110 --> 06:33.470
So let's remove the padding and let's put our own border of 1 pixel solid black.

116
06:33.500 --> 06:35.750
The same border then will apply to every single widget.

117
06:35.750 --> 06:39.890
And if we hit save, now we've got the same width for every single widget.

118
06:39.890 --> 06:41.570
But it's kind of cumbersome.

119
06:41.930 --> 06:48.080
And quite frankly, sometimes you want padding and you want to keep the content-box dynamic.

120
06:48.080 --> 06:51.620
So yeah, often you don't want the content-box.

121
06:51.620 --> 06:53.540
We want the border-box.

122
06:55.090 --> 06:56.770
Very simple, very quick example.

123
06:57.040 --> 06:58.030
Let's jump back to the lecture.

124
06:59.140 --> 06:59.920
(music)

125
07:00.500 --> 07:02.330
(music)

126
07:02.360 --> 07:02.570
(music)

127
07:03.430 --> 07:04.390
(music)

128
07:04.390 --> 07:06.160
(music)

129
07:06.160 --> 07:07.000
(music)

130
07:07.060 --> 07:08.770
(music)

131
07:08.800 --> 07:10.720
(music)

132
07:10.720 --> 07:13.660
(music)