1 00:00:00,540 --> 00:00:01,630 Hello and welcome. 2 00:00:01,660 --> 00:00:07,090 In this video I will be dialling the calculator. 3 00:00:07,160 --> 00:00:11,400 So I'm going to be using a mixture of in-line styling. 4 00:00:11,680 --> 00:00:16,770 It's in the style attribute and using an external success. 5 00:00:17,280 --> 00:00:27,900 So while the ninth time in what I want to do I want to keep each of the operators a different background 6 00:00:27,900 --> 00:00:31,430 colour so that they are unique. 7 00:00:31,440 --> 00:00:40,610 They standout came back calculate and want to do that is to add style attribute inside the helmet. 8 00:00:40,830 --> 00:00:43,520 So this is the plus operate. 9 00:00:43,540 --> 00:00:45,040 So what I'm going to do. 10 00:00:45,360 --> 00:00:54,560 I'm just going to expand this half of the actual plots before the quotes there. 11 00:00:54,580 --> 00:00:59,320 I'm just going to attach playstyle attribute. 12 00:00:59,320 --> 00:01:06,020 So after the quote after this single visitable quote here I am going to attach. 13 00:01:06,050 --> 00:01:15,730 Here's our tribute So you just type in style which is S T L S T Y. 14 00:01:16,130 --> 00:01:24,210 And I'm going to set that to equal to the Anita specify the propertys. 15 00:01:24,240 --> 00:01:31,170 I want to add to the button so it's going to be a background colour so I'll sell it by ground colour 16 00:01:31,910 --> 00:01:35,220 and I'm going to use an Hexa value. 17 00:01:35,220 --> 00:01:46,380 I already know what I want so I'll just add that you can add whatever colour you want if you know the 18 00:01:46,380 --> 00:01:48,620 name of the call or you can add it. 19 00:01:48,780 --> 00:01:52,400 You know the X decimal value you can add it as well. 20 00:01:52,440 --> 00:02:01,560 Don't forget you always have to end it end of values with a semicolon when you are using attributes 21 00:02:01,680 --> 00:02:02,540 it can see. 22 00:02:02,600 --> 00:02:03,910 And they did it. 23 00:02:03,930 --> 00:02:11,630 So Michael on you can see the cortizone and tribute here is or even closely in quotes. 24 00:02:11,700 --> 00:02:18,470 So I'm just gonna say that and take a quick look and see how that is reflected. 25 00:02:18,480 --> 00:02:25,790 You can see here now the background call of use is now apply to the Titian operator. 26 00:02:26,010 --> 00:02:34,510 So basically I'm going to use the same technique for the all of our operators and also for the course 27 00:02:34,530 --> 00:02:38,450 to a button I want to keep it its own background colour. 28 00:02:38,640 --> 00:02:50,200 I have now attached a style a tribute to all the operators you can see here the addition operator of 29 00:02:50,290 --> 00:02:57,510 colour background colour on that if you put your mouth so you can see the colour the suppression operate 30 00:02:57,590 --> 00:02:58,740 on the same plane. 31 00:02:58,740 --> 00:03:02,970 This is the I've given it the multiplication. 32 00:03:02,970 --> 00:03:05,030 This is a collage. 33 00:03:05,760 --> 00:03:15,820 We have got one or so for the clear button a clear button I've given that colour and be cause to bottom. 34 00:03:16,070 --> 00:03:17,620 In this column. 35 00:03:17,990 --> 00:03:25,800 And also the devotion button I've given the green collar on giving a close call. 36 00:03:25,910 --> 00:03:32,440 GREENE So you can also use if you know the name of the colour you can specify that like I've done here 37 00:03:32,880 --> 00:03:40,670 or if you prefer to use the hexadecimal value like I've done in the others you can also do that. 38 00:03:40,680 --> 00:03:43,590 So let's take a look at this and see. 39 00:03:43,600 --> 00:03:47,970 So this is what this is the effect of what I have done. 40 00:03:47,970 --> 00:03:50,620 So you can see the overall poor background colour. 41 00:03:51,000 --> 00:03:55,880 So that is all I'm going to do for the line styling. 42 00:03:56,010 --> 00:04:05,890 Next I'm going to move on to my external style sheet and do more styling in order to make the little 43 00:04:06,480 --> 00:04:12,690 one and make the buttars big create some spaces and make it look more presentable. 44 00:04:12,780 --> 00:04:19,440 So I'm going to open up my style sheet which is this one here of course that CFS have already linked 45 00:04:19,440 --> 00:04:24,080 it to my phone use in my link attribute here. 46 00:04:24,390 --> 00:04:25,860 So click on this file. 47 00:04:25,860 --> 00:04:30,510 So this is where I'm going to add some external styling. 48 00:04:30,520 --> 00:04:39,060 So the first thing I want to do is target the input element so and then type in put. 49 00:04:41,030 --> 00:04:45,770 Separate that with curly braces in between the curly braces. 50 00:04:45,800 --> 00:04:48,720 Here's where I will specify the input. 51 00:04:48,740 --> 00:04:57,860 So for example here I'm going to specify with height the size of the font the border radius there it 52 00:04:57,870 --> 00:05:08,900 does come I gives it the rounded edge and then to also add my own property background colour and then 53 00:05:08,900 --> 00:05:10,090 be quite low. 54 00:05:10,130 --> 00:05:18,650 I want to give the text so this airport here is thailin had hit the wall applying to all the import 55 00:05:18,740 --> 00:05:22,360 element so anything that is known as an import. 56 00:05:22,360 --> 00:05:24,450 You can see all this complex here. 57 00:05:24,470 --> 00:05:30,110 This is what this thiamine Im going to add here all affect. 58 00:05:30,380 --> 00:05:38,210 So this is the stylin I have attached to all my input elements so you can see here. 59 00:05:38,210 --> 00:05:39,460 I've got the whip. 60 00:05:39,800 --> 00:05:48,860 I have set two hundred and fifty pixels the height 200 pixels the font font refers to the size of the 61 00:05:48,860 --> 00:05:50,230 text in the button. 62 00:05:50,360 --> 00:05:55,550 So I've said that to 75 pixels by their radius 10 pixels. 63 00:05:55,550 --> 00:06:03,860 The margin margin refers to the space around the element so the margin of giving it 10 pixels which 64 00:06:03,860 --> 00:06:08,930 will apply and then require the background colour which upset to black. 65 00:06:08,960 --> 00:06:15,980 This is black for hexadecimal and then the column represents a lot inside the text. 66 00:06:16,250 --> 00:06:20,570 So this would represent the colour of the output text on the button. 67 00:06:21,050 --> 00:06:22,630 But our style is none. 68 00:06:22,640 --> 00:06:26,990 So basically the body removed and dialling from the border. 69 00:06:27,080 --> 00:06:31,200 So let me see that and let's take a look. 70 00:06:31,890 --> 00:06:40,320 All right so this is what it looks like half this time in see it looks a bit more decent doesn't it. 71 00:06:40,650 --> 00:06:51,390 Alright so this is how it looks at the moment it still works if I do two plus two equals four. 72 00:06:51,410 --> 00:06:58,630 It's clear that there are four times four and that gives you 16. 73 00:06:58,640 --> 00:07:00,330 So calculators working. 74 00:07:00,530 --> 00:07:11,430 The next thing I want to do I want to send to this head in head in title development. 75 00:07:11,570 --> 00:07:19,680 I want to make it more Centre and I want to move the code collate all from the end one and more it a 76 00:07:19,910 --> 00:07:22,080 bit more central. 77 00:07:22,100 --> 00:07:31,460 How to achieve that using the margin element just to move the entire container which is the form I'm 78 00:07:31,460 --> 00:07:34,270 going to move it's more centrally to the page. 79 00:07:34,580 --> 00:07:41,920 So I've completed this stylin now so this here is the form I go in to my index. 80 00:07:41,940 --> 00:07:45,560 You can see I have called the form clouds form. 81 00:07:45,700 --> 00:07:48,030 I go back into my style it. 82 00:07:48,260 --> 00:07:50,750 So this here is this time. 83 00:07:50,930 --> 00:07:55,490 I have give in to the form. 84 00:07:57,080 --> 00:08:04,710 To all that to move from the left which is margin left 225 five pixels. 85 00:08:04,870 --> 00:08:09,080 Obviously you can play around with values and see which one suits you. 86 00:08:09,070 --> 00:08:12,240 So it's moving the form from the left. 87 00:08:12,250 --> 00:08:20,200 Two hundred and twenty five pixels from the top is going to drop 20 pixels so it's going to create some 88 00:08:20,200 --> 00:08:22,670 space from the top 20 pixels. 89 00:08:22,670 --> 00:08:25,190 And this is my head tag here. 90 00:08:25,600 --> 00:08:32,620 So my head element I have set the text to align to the centre. 91 00:08:33,250 --> 00:08:38,840 And here the font size I have set to be 80 pixels. 92 00:08:38,860 --> 00:08:44,400 This would be the size of the text on the button margin from the right. 93 00:08:44,540 --> 00:08:56,130 I'm told from the right in the elemental 150 pixels from the right is going to move from the top from 94 00:08:56,140 --> 00:09:03,160 minute 20 pixels is going to from the top is going to drop 20 pixels to create some space. 95 00:09:03,160 --> 00:09:04,110 So that's. 96 00:09:04,200 --> 00:09:06,990 Let me see that. 97 00:09:07,270 --> 00:09:08,200 Let's take a look. 98 00:09:08,200 --> 00:09:09,400 So this is what it looks like. 99 00:09:09,400 --> 00:09:13,880 You can see this is the heading so that I've sent it. 100 00:09:14,020 --> 00:09:16,370 And this is thin margin. 101 00:09:16,820 --> 00:09:24,780 If you don't want any spaces between the buttons you can reduce the margin. 102 00:09:24,780 --> 00:09:30,270 This line 7 here is what's responsible for this spaces between the bottom. 103 00:09:30,270 --> 00:09:36,850 So if you want very little space maybe you can set that to one pixels but play around with the values 104 00:09:37,270 --> 00:09:39,720 and see what suits you best. 105 00:09:39,880 --> 00:09:46,740 So that is basically cockily top projet complete. 106 00:09:46,780 --> 00:09:48,560 So thank you so much for watching. 107 00:09:48,580 --> 00:09:55,160 If you have any problems at all please feel free to let me know. 108 00:09:55,300 --> 00:09:55,820 Thank you. 109 00:09:55,870 --> 00:09:56,650 All the best. 110 00:09:56,650 --> 00:09:57,440 Bye for now.