1 00:00:00,780 --> 00:00:10,500 Hello and welcome to this lecture in this lecture we are going to be creating the styling for our calculator 2 00:00:10,890 --> 00:00:12,500 using CSX. 3 00:00:12,600 --> 00:00:19,560 So we'll be using a combination of external CSX and in line CSX. 4 00:00:21,180 --> 00:00:24,990 So this is what the calculator looks like. 5 00:00:24,990 --> 00:00:26,350 Have a moment. 6 00:00:26,400 --> 00:00:35,370 So by the time we're done with this lecture it should look a little bit prettier. 7 00:00:35,370 --> 00:00:38,680 So this is my text and it all. 8 00:00:38,700 --> 00:00:48,990 And this is my style sheet where we will implement the external styling for the calculator the way I'm 9 00:00:48,990 --> 00:00:57,960 going to structure this lecture is to add a chunk of code at a time and then explain it to you. 10 00:01:00,740 --> 00:01:01,410 OK. 11 00:01:01,410 --> 00:01:07,050 I have added some code from line 1 to line 10. 12 00:01:07,050 --> 00:01:13,640 So let me run through these some of these you may already know the line one here. 13 00:01:13,800 --> 00:01:15,800 I've got input input. 14 00:01:15,870 --> 00:01:19,430 This is known as the selector. 15 00:01:19,650 --> 00:01:22,500 So you must have something that you want to do something too. 16 00:01:22,500 --> 00:01:31,320 For example if you're going to have a haircut your hair will be the selector and then you have to tell 17 00:01:31,320 --> 00:01:33,530 the barber what to do to the head. 18 00:01:33,870 --> 00:01:36,720 So CSF works in the same way. 19 00:01:36,720 --> 00:01:41,660 The input here is the selector and the items in blue here. 20 00:01:41,670 --> 00:01:48,770 This on the the items on the left of the colon is known as the property. 21 00:01:48,960 --> 00:01:53,600 The property is what we want to apply to the selector. 22 00:01:53,940 --> 00:02:03,900 And the values outside the call on here is the VAT is what we want to have for example I want the width 23 00:02:04,230 --> 00:02:10,140 which is a property of the input to be one hundred and fifty pixels wide. 24 00:02:10,170 --> 00:02:20,400 OK so you separate the property from the value with a colon and then you end up with a semicolon without 25 00:02:20,400 --> 00:02:21,350 a semicolon. 26 00:02:21,360 --> 00:02:23,070 It will not work. 27 00:02:23,070 --> 00:02:27,830 So make sure you end with a semicolon once you've finished the height. 28 00:02:27,900 --> 00:02:36,420 I have set it to that the font size which is the size of the text I have set it to this the border radius 29 00:02:36,440 --> 00:02:40,940 but outrageous is what gives it a bit of rounded corner. 30 00:02:41,100 --> 00:02:46,770 So this is a broader border retail property and I've said it to 10 pixels. 31 00:02:46,920 --> 00:02:48,210 These values. 32 00:02:48,210 --> 00:02:52,940 Feel free to play around with them so that you can see how they work. 33 00:02:52,980 --> 00:02:59,940 The beauty of browser development is that you can see what the result of what you're developing straight 34 00:02:59,940 --> 00:03:00,890 away. 35 00:03:01,240 --> 00:03:01,790 OK. 36 00:03:01,800 --> 00:03:08,520 The margin of given it 10 pixels margin refers to the space outside. 37 00:03:08,520 --> 00:03:10,360 So for example you've got a box. 38 00:03:10,470 --> 00:03:13,590 So the space outside is known as a margin. 39 00:03:13,650 --> 00:03:17,610 Why the space inside is known as padding. 40 00:03:17,700 --> 00:03:24,870 So where you've got where the margin is usually Four Corners you've got the top the right the bottom 41 00:03:24,990 --> 00:03:26,310 and the left. 42 00:03:26,310 --> 00:03:28,110 That's how the styling is applied. 43 00:03:28,110 --> 00:03:34,860 The way I remember it is by using the word trouble and then taking out the vowels which are the cause 44 00:03:35,250 --> 00:03:40,940 that leaves you with Top Right Bottom Left. 45 00:03:41,010 --> 00:03:48,030 So when you have just two one values specified a tool use that value on all the four corners like Top 46 00:03:48,030 --> 00:03:55,320 Right Bottom Left the background call I've set it to this I have used hex color hexadecimal colors you 47 00:03:55,320 --> 00:04:00,060 can also use the name of the color if you know it for example this means black. 48 00:04:00,210 --> 00:04:06,960 So I could use black instead of that and then color this color here offense refers to the color of the 49 00:04:06,960 --> 00:04:08,160 text. 50 00:04:08,160 --> 00:04:17,390 So this is white in x values and then borders style is not I don't want any shadow anything on the borders. 51 00:04:17,520 --> 00:04:22,430 So this is a styling for the input. 52 00:04:23,130 --> 00:04:25,510 The input basically is the Yeah. 53 00:04:25,650 --> 00:04:35,420 This is the styling for the input tech have added some more CODE HERE FROM line 12 to 24. 54 00:04:35,670 --> 00:04:36,820 Line twelve here. 55 00:04:36,870 --> 00:04:40,310 I've got my I've got an idea here. 56 00:04:40,320 --> 00:04:45,450 You identify an I.D. with the hash tag so I.D. Here is my form. 57 00:04:46,140 --> 00:04:48,060 So they form here. 58 00:04:48,060 --> 00:04:52,560 These are the styling I have applied to it. 59 00:04:52,560 --> 00:04:53,670 I don't need that. 60 00:04:53,670 --> 00:04:55,240 This is just a comment. 61 00:04:55,260 --> 00:05:00,750 So if you want to write a comment on a on a CSF page. 62 00:05:00,770 --> 00:05:02,830 This is how you implement a comment. 63 00:05:02,910 --> 00:05:07,920 So anything that you've got to comment on will not reflect on the styling. 64 00:05:08,280 --> 00:05:08,570 OK. 65 00:05:08,580 --> 00:05:10,290 So comments are quite good. 66 00:05:10,350 --> 00:05:13,920 You can use them for troubleshooting or trying things out. 67 00:05:13,920 --> 00:05:21,810 So this idea here this is the styling I'm giving to the I.D. I want the margin from I want the margin 68 00:05:21,960 --> 00:05:25,860 on the left to be two hundred and twenty five pixels. 69 00:05:25,860 --> 00:05:33,720 So what I'm saying is that from the left of the book from the left I wanted to move two hundred and 70 00:05:33,720 --> 00:05:40,550 twenty five pixels and then from the top I wanted to drop down twenty pixels. 71 00:05:40,590 --> 00:05:41,640 That's what that means. 72 00:05:42,120 --> 00:05:47,280 And then this here is the styling for the h1 tag which is the head in tag. 73 00:05:47,490 --> 00:05:51,990 Again the text a line one the text to be centered. 74 00:05:51,990 --> 00:05:55,060 I've given it a font size of 80 pixels. 75 00:05:55,080 --> 00:05:56,870 That's how big I want it to be. 76 00:05:57,030 --> 00:06:00,350 And the margin of said from the right. 77 00:06:00,600 --> 00:06:08,400 I want it to move feet 150 pixels and from the top I want you to drop 20 pixels. 78 00:06:08,940 --> 00:06:14,850 So let's save that and see what it all looks like at the moment. 79 00:06:14,850 --> 00:06:16,750 So this is our calculator. 80 00:06:16,770 --> 00:06:22,240 If I refresh this is what you can see is looking a little bit prettier. 81 00:06:22,670 --> 00:06:23,030 OK. 82 00:06:23,040 --> 00:06:30,060 So this is what it looks like at the moment where the styling we have you next we are going to use some 83 00:06:30,180 --> 00:06:31,340 inline styling. 84 00:06:31,350 --> 00:06:38,250 That means we're going to go inside the hasty AML document and apply the styling in line with the actual 85 00:06:38,250 --> 00:06:38,670 tag. 86 00:06:39,770 --> 00:06:40,320 OK. 87 00:06:40,320 --> 00:06:49,320 So I am on the actual history AML document which is the index hit hate e-mail here and on line 17 which 88 00:06:49,320 --> 00:06:56,300 is the actual input for the display which is the screen that will display the results of the calculator 89 00:06:56,850 --> 00:06:59,910 have attached form into in line styling. 90 00:07:00,360 --> 00:07:04,080 So this is inside the actual tag itself. 91 00:07:04,080 --> 00:07:09,990 I have added a style tag so you begin will you use the style as an attribute. 92 00:07:10,020 --> 00:07:16,890 So the actual style becomes an attribute and the value would be the become the property and the values 93 00:07:17,250 --> 00:07:19,560 for that input tag. 94 00:07:19,560 --> 00:07:28,900 So this input tank here I've given it a whiff of six seven five pixels have given a height of that the 95 00:07:28,940 --> 00:07:30,680 text aligned to be centered. 96 00:07:30,690 --> 00:07:34,500 That means any text that is that it displays. 97 00:07:34,500 --> 00:07:42,510 I want it to be centered I've given a background color of this and this break Tokyo basically creates 98 00:07:42,510 --> 00:07:43,800 a space underneath it. 99 00:07:43,860 --> 00:07:49,680 So if I save that and refresh you should see the display should be blue. 100 00:07:49,680 --> 00:07:52,710 Now you can see here who is now blue. 101 00:07:52,740 --> 00:07:55,770 So this is what we have just applied styling to 102 00:07:58,540 --> 00:08:03,960 I have added some more in line styling inside the HMO document. 103 00:08:04,270 --> 00:08:10,570 So on line 21 here I want the buttons for the operators. 104 00:08:10,570 --> 00:08:15,160 That means the plus the minus the equals the Times and the division. 105 00:08:15,160 --> 00:08:20,860 I want them to all have different colors so that's the styling I have implemented. 106 00:08:20,860 --> 00:08:22,900 Line 21 here. 107 00:08:22,930 --> 00:08:30,700 Notice I've used that style here as an attribute and then the value of course to the properties the 108 00:08:30,700 --> 00:08:31,300 property. 109 00:08:31,300 --> 00:08:34,390 I want a style and then the value for the property. 110 00:08:34,390 --> 00:08:40,090 So the background color here basically set the background color for the plus I've said the background 111 00:08:40,090 --> 00:08:52,930 color on line 25 for the miners and on line twenty nine for the Times on line thirty one for the C which 112 00:08:52,930 --> 00:08:54,270 is a clear function. 113 00:08:54,280 --> 00:09:02,340 Now we clear the screen and on line 33 for the divisions. 114 00:09:02,350 --> 00:09:10,020 I've said that green so I'll save that and if I launch the browser you should see the difference. 115 00:09:10,030 --> 00:09:10,510 There you go. 116 00:09:10,570 --> 00:09:15,030 So you can see all the operators have different background colors. 117 00:09:15,060 --> 00:09:19,150 I so I've made the C here and given a different background. 118 00:09:19,150 --> 00:09:20,640 So this is what we'll clear. 119 00:09:20,680 --> 00:09:23,030 You can use to clear the values. 120 00:09:23,110 --> 00:09:27,130 So if I press on the button you can see nothing is happening at the moment. 121 00:09:27,310 --> 00:09:32,380 The javascript will create the functionality for that. 122 00:09:32,410 --> 00:09:40,120 So for this lecture we have done the styling of the calculator ready in the next lecture will implement 123 00:09:40,150 --> 00:09:46,970 the javascript to make the buttons actually work and perform some calculation. 124 00:09:47,050 --> 00:09:49,160 Take care bye for now.