1 00:00:00,690 --> 00:00:04,160 Hello and welcome to this mini project. 2 00:00:04,350 --> 00:00:13,920 Part two in this part we will be spile in the form we created using hastier male in part one. 3 00:00:14,010 --> 00:00:25,200 So this is the hastier male quote used to create the form and this is the output from this hastier male 4 00:00:25,200 --> 00:00:26,000 code. 5 00:00:26,040 --> 00:00:28,090 So we've got the structure of the form. 6 00:00:28,140 --> 00:00:34,840 Now we want to start styling it our style sheet is blank at the moment. 7 00:00:35,070 --> 00:00:42,530 So to begin styling we need to pick out the elements selector's that we want to style. 8 00:00:42,570 --> 00:00:47,260 So we start from the top of the page look up what we want to style. 9 00:00:47,280 --> 00:00:51,100 Make sure your link to your style sheet is correct. 10 00:00:51,600 --> 00:00:53,930 So now scroll down. 11 00:00:54,280 --> 00:00:54,880 Okay. 12 00:00:54,930 --> 00:00:56,400 I want to style this. 13 00:00:56,400 --> 00:01:00,960 This is a container that wraps around it's like a border. 14 00:01:01,260 --> 00:01:11,840 So we named out a few set older doors copy that feels set to my style sheets and just put it there. 15 00:01:11,880 --> 00:01:20,130 So plus on Selecter a scroll down the head in head in which is this one log in with your e-mail. 16 00:01:20,130 --> 00:01:23,670 So I want the hate to Hard Copy that 17 00:01:26,470 --> 00:01:32,590 is that until my CNS is good down again. 18 00:01:32,820 --> 00:01:34,800 Well a class here full input. 19 00:01:34,800 --> 00:01:38,230 These are the input boxes here. 20 00:01:38,340 --> 00:01:49,460 So we've got a class causa bra for the input compeer head so let's sipa. 21 00:01:49,810 --> 00:01:55,090 Notice this is a class so you must have a dot beside it. 22 00:01:55,110 --> 00:01:58,330 And then let's go back to that document again. 23 00:01:58,350 --> 00:02:01,010 What else do we need. 24 00:02:01,060 --> 00:02:08,290 Of course this class will style all be all the inputs we don't need to study checkboxes. 25 00:02:08,310 --> 00:02:09,570 These aren't teacher books. 26 00:02:09,570 --> 00:02:11,210 This is a check box. 27 00:02:11,250 --> 00:02:18,810 We don't want to style that our leave that as it is for now to save time radio button These radio buttons 28 00:02:18,870 --> 00:02:20,770 I'm going to leave that style. 29 00:02:20,780 --> 00:02:23,930 But you can if you want to know. 30 00:02:24,060 --> 00:02:27,000 I like to sound the log in box which is this one here. 31 00:02:27,030 --> 00:02:30,120 It's got an idea off logging school. 32 00:02:30,150 --> 00:02:43,580 Copy that log in into my salchow it because this one Heidi you need to put the hash tag before the name. 33 00:02:44,430 --> 00:02:47,720 So hash tag make sure to log in. 34 00:02:47,880 --> 00:02:51,490 So we've got one two three four so we've got our selector's. 35 00:02:51,510 --> 00:02:52,870 We want to style. 36 00:02:53,130 --> 00:02:57,070 So we just need to ship them out properly in the stylesheet. 37 00:02:57,330 --> 00:03:06,960 So we need to create some curly braces to place the csx code so to create calibrators each of the curly 38 00:03:06,960 --> 00:03:08,950 braces on your computer. 39 00:03:09,120 --> 00:03:16,110 Some got the ped want make sure they are paired and then just tab in between to create a space and just 40 00:03:16,110 --> 00:03:17,760 check to make sure they are properly paid. 41 00:03:17,770 --> 00:03:29,640 You see the highlighted and come here and do the same and separate them come here in the same vein as 42 00:03:29,680 --> 00:03:31,760 separate. 43 00:03:32,010 --> 00:03:38,650 And then finally eidy come here and separate. 44 00:03:38,940 --> 00:03:41,870 So I'll go on my quarterly basis in place. 45 00:03:42,140 --> 00:03:46,490 And I got my selector's in place or will start styling. 46 00:03:46,970 --> 00:03:47,540 All right. 47 00:03:47,550 --> 00:03:52,760 I have just written some could here to start with fieldset. 48 00:03:52,880 --> 00:03:53,550 Phil said. 49 00:03:53,540 --> 00:03:55,150 Is our trial border here. 50 00:03:55,140 --> 00:04:05,010 The box the container have given it a background column of both and I've said I don't want any border 51 00:04:05,040 --> 00:04:09,430 to show I have given him board a radius of 10 peaks. 52 00:04:09,450 --> 00:04:18,300 This will make it a bit round in the corners and the margin at torday to create this space from the 53 00:04:18,300 --> 00:04:28,040 top 55 pixels from the top and nothing from B right now to him from the bottom but from the left I've 54 00:04:28,080 --> 00:04:30,230 told it to move 250 pixels. 55 00:04:30,240 --> 00:04:38,400 What this box here will move 250 pixels have given it with course currently is the width is quite long. 56 00:04:38,670 --> 00:04:42,720 So I will let me show you what the corrin with look like. 57 00:04:43,050 --> 00:04:47,720 This is how longer these Handelman meant it as the and the size of BP. 58 00:04:47,790 --> 00:04:55,080 So I'm going to reuse that and then a set the weight to 450 pixels wide and I'm one to make it 350 pixels 59 00:04:55,620 --> 00:04:57,220 long in height. 60 00:04:57,420 --> 00:04:59,350 So that would be this box here so. 61 00:04:59,500 --> 00:05:00,650 I saved the quote. 62 00:05:00,660 --> 00:05:03,810 You should see the changes reflect here. 63 00:05:03,810 --> 00:05:06,990 Our goal is to save the fair refresh. 64 00:05:07,490 --> 00:05:08,080 Okay. 65 00:05:08,210 --> 00:05:11,370 So it's giving us liars around the corner. 66 00:05:11,390 --> 00:05:15,610 Around it is done using the body radius property. 67 00:05:15,650 --> 00:05:17,870 So we've got a nice colour there. 68 00:05:17,870 --> 00:05:27,320 So this is for the fieldset the actual container that we apply this time into next we are going to apply 69 00:05:27,320 --> 00:05:31,990 styling to the hatch to which is this here. 70 00:05:32,030 --> 00:05:34,480 The title log in which Are you male. 71 00:05:34,490 --> 00:05:36,410 That's what we're going to start now. 72 00:05:36,410 --> 00:05:43,220 I've written some style so I'm going to give it a background colour of this music the hex value. 73 00:05:43,220 --> 00:05:45,400 You can always change things. 74 00:05:45,410 --> 00:05:52,100 Change things around you know use yeong collars and experiment with some of the values you don't have 75 00:05:52,100 --> 00:05:56,630 to stick to my values just experiment and see what works for you. 76 00:05:56,630 --> 00:06:02,120 So I've given the background quite a lot of this and this colleague here refers to the colour of the 77 00:06:02,120 --> 00:06:10,070 text so this is white collar or white and then I'm giving it a margin margin basically So space. 78 00:06:10,070 --> 00:06:10,980 So I've took it. 79 00:06:11,090 --> 00:06:17,480 I've given it a negative value you keep with margins you can apply a negative value. 80 00:06:17,480 --> 00:06:23,130 That means it will it will go in the opposite direction of movement. 81 00:06:23,270 --> 00:06:23,790 All right. 82 00:06:23,810 --> 00:06:33,600 So this is I've given this a value of negative and then this is for the this is the top is zero right. 83 00:06:33,720 --> 00:06:42,050 Given the negative of 11 pixels top red bottom zero and then left of giving it a negative pixel value 84 00:06:42,560 --> 00:06:45,020 padding is the space between. 85 00:06:45,020 --> 00:06:53,810 So I've given it 15 pixels or round top right bottom left and then position I've set the position to 86 00:06:53,810 --> 00:07:04,880 be relative the value of giving it toward it to move four point five pixels from the bottom. 87 00:07:04,930 --> 00:07:07,620 It will move up 4.5. 88 00:07:08,050 --> 00:07:14,880 Giving the body's radius of 10 pixels to give it coalesce around at corners just like this fieldset 89 00:07:14,890 --> 00:07:15,620 here. 90 00:07:15,680 --> 00:07:20,760 So if I say this you see the changes to the hitch too. 91 00:07:20,830 --> 00:07:27,900 All right so this we've got to now stalled up right which is in these values. 92 00:07:28,460 --> 00:07:34,080 Next I'm going to apply styling to the input boxes. 93 00:07:34,160 --> 00:07:40,280 This input here this is email and then the parsable section and will apply styling to them. 94 00:07:40,460 --> 00:07:48,620 So I've given it a week to be three hundred and thirty pixels a height of 40 pixels that here's how 95 00:07:49,340 --> 00:07:51,710 long it will be said. 96 00:07:51,770 --> 00:07:59,940 I don't want anybody to give me the body radius of 10 pixels or he has slightly rounded corners. 97 00:08:00,080 --> 00:08:01,180 Said the text. 98 00:08:01,220 --> 00:08:04,300 I want the text to be centred. 99 00:08:04,580 --> 00:08:09,820 So that's what this value is giving the margin from the left. 100 00:08:09,830 --> 00:08:16,160 So I've told it to move 50 pixels from the left so from the left ear I've told you to move this way 101 00:08:16,630 --> 00:08:26,060 will do that with 50 pixels to the font size to be 15 pixels large so this text in between will be 15 102 00:08:26,060 --> 00:08:27,230 pixels. 103 00:08:27,230 --> 00:08:31,340 And I've also specified that the text should be in bold. 104 00:08:31,400 --> 00:08:39,440 So if I save that around that you should see some changes in this input boxes see that soon has the 105 00:08:39,950 --> 00:08:44,000 stylee applied using these values. 106 00:08:44,000 --> 00:08:51,970 Finally our final select on to start will be the submit button which is the log in boxier. 107 00:08:51,980 --> 00:08:53,100 This one here. 108 00:08:53,330 --> 00:08:55,600 So this is where we're going on target now. 109 00:08:55,820 --> 00:08:58,970 So this is the stylin. 110 00:08:59,060 --> 00:09:03,770 Giving it a with 150 pixels how wide it will be. 111 00:09:03,940 --> 00:09:12,020 I've given it a height of 45 pixels how long it will be given by the radius of 10 pixels. 112 00:09:12,020 --> 00:09:19,400 That is to give it a slightly rounded pitch and then I've told it I'll give it a margin from the top 113 00:09:19,680 --> 00:09:26,420 of giving it a negative margin to to negate seven pixels from the top. 114 00:09:26,460 --> 00:09:34,020 Give me a background Kelong of this value and the cholo of the text will be white. 115 00:09:34,040 --> 00:09:41,130 That's what this file is falsely told it to have a margin from the left margin from the left. 116 00:09:41,150 --> 00:09:46,620 I've told it from this left here to move 145 pixels. 117 00:09:47,090 --> 00:09:55,820 There's font size given the size of 20 pixels I love to do font to wait to be bored so this text will 118 00:09:55,820 --> 00:09:58,600 be bold and it be 20 pixels. 119 00:09:58,610 --> 00:09:59,310 If I say. 120 00:09:59,780 --> 00:10:03,020 You'll see fair refresh. 121 00:10:03,060 --> 00:10:03,970 Excellent. 122 00:10:04,020 --> 00:10:05,790 Nice red button there. 123 00:10:06,030 --> 00:10:07,350 So this is the log in. 124 00:10:07,350 --> 00:10:07,680 Got it. 125 00:10:07,680 --> 00:10:13,580 So we are done with the stylin of the fall slide Pookie. 126 00:10:13,580 --> 00:10:17,690 Notice there is no space between this import and these. 127 00:10:17,870 --> 00:10:24,870 This check box here and this radio so this shoebox and this way there's no space or I'm going to go 128 00:10:24,870 --> 00:10:29,390 back to my history airmail form and try and adjust that. 129 00:10:29,400 --> 00:10:32,240 So let's go to the phones to this is a fun. 130 00:10:32,470 --> 00:10:36,840 So when I use it break tag to me to create space. 131 00:10:36,900 --> 00:10:46,920 So right click on that break and I'll look for where the input tag NC it and then so a concert on another 132 00:10:46,930 --> 00:10:51,320 break there say that refresh. 133 00:10:51,780 --> 00:10:52,620 Excellent. 134 00:10:52,620 --> 00:10:54,080 I think this is all right. 135 00:10:54,120 --> 00:10:57,890 So has created a space so if you want more just certain and break. 136 00:10:58,140 --> 00:11:04,190 So we are done with a stylin of the fall or you may be able to do better. 137 00:11:04,200 --> 00:11:05,710 In fact you should do better. 138 00:11:05,730 --> 00:11:09,560 Play around with his values and see what suits you.