1
00:00:02,230 --> 00:00:05,930
Now that we added this form element,

2
00:00:05,930 --> 00:00:08,967
we can, of course, also use it for styling.

3
00:00:08,967 --> 00:00:11,095
We don't have to, but we can,

4
00:00:11,095 --> 00:00:13,830
because even though the form element

5
00:00:13,830 --> 00:00:18,690
is a special element in the way that it interacts

6
00:00:18,690 --> 00:00:20,310
with its child elements,

7
00:00:20,310 --> 00:00:22,610
that it establishes this connection,

8
00:00:22,610 --> 00:00:24,460
even though that's the case,

9
00:00:24,460 --> 00:00:27,567
we of course can still work with that form element

10
00:00:27,567 --> 00:00:31,215
as we do with any other element in the body.

11
00:00:31,215 --> 00:00:36,215
We can target it with CSS and assign our own styles.

12
00:00:36,550 --> 00:00:39,370
It is worth mentioning though, that by default,

13
00:00:39,370 --> 00:00:41,870
the form element has no styles.

14
00:00:41,870 --> 00:00:43,438
We don't see it on the page,

15
00:00:43,438 --> 00:00:46,247
whether we have a form element or not,

16
00:00:46,247 --> 00:00:48,747
does not change the look of the page.

17
00:00:48,747 --> 00:00:53,324
It just changes to behavior of this forum.

18
00:00:53,324 --> 00:00:55,250
But now I want to change the look.

19
00:00:55,250 --> 00:00:56,705
So in Styles, CSS,

20
00:00:56,705 --> 00:01:00,940
I will now also select the form element

21
00:01:00,940 --> 00:01:04,709
by its tag here and then there

22
00:01:04,709 --> 00:01:07,250
it's up to you how you want to style it.

23
00:01:07,250 --> 00:01:10,490
I'll give it a width of, let's say

24
00:01:10,490 --> 00:01:15,490
30rem and a margin of 3rem and auto to center it.

25
00:01:16,571 --> 00:01:21,571
And I'll actually remove this margin here on the body.

26
00:01:22,991 --> 00:01:24,253
Get rid of that.

27
00:01:25,130 --> 00:01:26,930
And on that form, I'll give it

28
00:01:26,930 --> 00:01:31,493
a background color off RGB, 255, 255, 255.

29
00:01:33,500 --> 00:01:36,060
Which will be a light color.

30
00:01:36,060 --> 00:01:38,660
And for the input here,

31
00:01:38,660 --> 00:01:43,660
there, I'll actually give it a width of 100%.

32
00:01:44,300 --> 00:01:47,830
And percent is a special unit in CSS,

33
00:01:47,830 --> 00:01:49,730
which basically means that the width

34
00:01:49,730 --> 00:01:54,340
of this input will be 100% off the width

35
00:01:54,340 --> 00:01:56,720
of the parent of that element.

36
00:01:56,720 --> 00:01:58,400
So in this case off the form,

37
00:01:58,400 --> 00:02:00,160
since input is inside of forum,

38
00:02:00,160 --> 00:02:02,502
the parent width is now used.

39
00:02:02,502 --> 00:02:06,403
So 100% of the parent width which is 30rem.

40
00:02:08,169 --> 00:02:10,564
I could set this to 30rem here as well,

41
00:02:10,564 --> 00:02:12,940
but that means that whenever I changed the width

42
00:02:12,940 --> 00:02:15,830
on the forum, I also have to change it down there.

43
00:02:15,830 --> 00:02:17,814
If I use 100%, instead,

44
00:02:17,814 --> 00:02:19,654
I can change the form width,

45
00:02:19,654 --> 00:02:23,023
and the input with changes with it automatically.

46
00:02:24,180 --> 00:02:26,050
Now on that forum, I'll also add

47
00:02:26,050 --> 00:02:28,722
some padding of 1rem so that we have some

48
00:02:28,722 --> 00:02:33,314
inside spacing between the border and the content.

49
00:02:33,314 --> 00:02:35,430
And speaking off the border,

50
00:02:35,430 --> 00:02:38,380
even though we have no border color,

51
00:02:38,380 --> 00:02:39,830
we of course have a border,

52
00:02:39,830 --> 00:02:41,360
which we'll be able to see

53
00:02:41,360 --> 00:02:44,530
because of the contrast between this background color

54
00:02:44,530 --> 00:02:48,460
of the form and the overall page background color.

55
00:02:48,460 --> 00:02:51,610
And therefore, I'll give this border radius,

56
00:02:51,610 --> 00:02:53,710
I'll give that form a border radius,

57
00:02:53,710 --> 00:02:57,343
of six pixels to have some rounded corners here.

58
00:02:59,310 --> 00:03:00,760
And with all of that,

59
00:03:00,760 --> 00:03:02,850
now we got this box here

60
00:03:02,850 --> 00:03:04,250
with the form inside of it.

61
00:03:04,250 --> 00:03:08,240
And in there we got our input element.

62
00:03:08,240 --> 00:03:11,550
Now I see that the spacing here

63
00:03:11,550 --> 00:03:15,540
is actually not the same on the left and the right.

64
00:03:15,540 --> 00:03:16,870
And the reason for this

65
00:03:16,870 --> 00:03:20,010
is that the input here is using

66
00:03:20,010 --> 00:03:21,900
the wrong box sizing.

67
00:03:21,900 --> 00:03:24,227
We need to change it to box sizing,

68
00:03:24,227 --> 00:03:27,980
border box and save that.

69
00:03:27,980 --> 00:03:30,703
And now that is set correctly.

70
00:03:31,680 --> 00:03:34,700
Now that's it for the form styling,

71
00:03:34,700 --> 00:03:36,943
But one important thing is missing here.