1 00:00:00,720 --> 00:00:09,330 Hello and welcome to this lecture in this lecture we will be creating the presentation which is the 2 00:00:09,480 --> 00:00:13,500 SS for our app. 3 00:00:14,070 --> 00:00:21,350 Before we start to apply the CSF our app let's have a look what it looks like at the moment. 4 00:00:21,380 --> 00:00:22,980 So open up your project. 5 00:00:22,980 --> 00:00:33,390 This is my project directory and click on this index which is what we created before double and a tool 6 00:00:33,390 --> 00:00:36,390 display what the app looks like. 7 00:00:36,420 --> 00:00:40,160 So this is what the app currently looks like. 8 00:00:40,500 --> 00:00:47,780 There is no functionality because I've not applied the javascript yet JavaScript has not been implemented. 9 00:00:47,970 --> 00:00:50,250 This is the structure. 10 00:00:50,250 --> 00:00:59,070 So once we apply this ESFs it should look a lot prettier than it is at the moment. 11 00:00:59,070 --> 00:00:59,390 All right. 12 00:00:59,400 --> 00:01:02,110 This is R blank CSF file. 13 00:01:02,460 --> 00:01:03,960 So what I'm gonna do. 14 00:01:03,960 --> 00:01:15,380 I've already written out the C Ss for this app project to save time so you then have to watch me type. 15 00:01:15,420 --> 00:01:23,580 I will paste the code inside a text editor and then explain the code to you a thing that helps Dowd 16 00:01:23,700 --> 00:01:24,910 make more sense to you. 17 00:01:24,960 --> 00:01:29,310 Then you watch me type so I paste the coding. 18 00:01:31,060 --> 00:01:31,700 Okay. 19 00:01:31,710 --> 00:01:35,140 I have now got my CSX added on. 20 00:01:35,160 --> 00:01:38,170 So let me run through the code with you. 21 00:01:38,220 --> 00:01:50,010 So the first line one here I got the body so we'll see it says you can start using the tag name or I.D. 22 00:01:50,010 --> 00:01:50,870 or class. 23 00:01:50,910 --> 00:01:52,540 Anyway you see the hash tag here. 24 00:01:52,540 --> 00:02:01,500 That means it's an I.D. so I'm using the I.D. to style that element. 25 00:02:01,500 --> 00:02:05,870 So every CSX malls have this format. 26 00:02:05,880 --> 00:02:08,360 So you've got the tool. 27 00:02:08,430 --> 00:02:15,180 This is what we are going to style which is a body and we'll place it in between this curly braces Darcy 28 00:02:15,210 --> 00:02:17,440 opening that's closing. 29 00:02:17,460 --> 00:02:24,050 And after we've ident we've defined the style we need to end that with a semicolon. 30 00:02:24,180 --> 00:02:24,660 All right. 31 00:02:24,660 --> 00:02:26,970 So this is a property we want. 32 00:02:26,970 --> 00:02:29,670 This is a property we want to apply. 33 00:02:29,670 --> 00:02:32,700 And this is the value we're giving that properties. 34 00:02:32,700 --> 00:02:40,860 So we separate the property from the value using a colon and then we end it using a semi colon. 35 00:02:41,640 --> 00:02:49,440 So here what I'm saying here is that I want the background for the body the background color to be this 36 00:02:49,440 --> 00:02:50,250 color. 37 00:02:50,280 --> 00:02:55,000 This is an hexadecimal value it's called hex value. 38 00:02:55,180 --> 00:03:00,370 Anyway you see the hash with numbers like this is called a hex values or you can use. 39 00:03:00,420 --> 00:03:07,290 I could replace this and just type in the word red so you could add I use color names if you know the 40 00:03:07,290 --> 00:03:13,860 color names or you can use a hex value if you know the hex value so that's it for the body of a plus 41 00:03:13,860 --> 00:03:16,740 giving it this color. 42 00:03:16,740 --> 00:03:20,540 Next is the input the input is the actual box. 43 00:03:20,580 --> 00:03:23,470 Are people typing this here is the input here. 44 00:03:23,490 --> 00:03:25,970 This here that's the input. 45 00:03:26,100 --> 00:03:27,280 So what. 46 00:03:27,930 --> 00:03:29,730 That's what I'm styling here. 47 00:03:29,820 --> 00:03:31,310 The margin from the top. 48 00:03:31,320 --> 00:03:33,060 I wanted to be 100 pixels. 49 00:03:33,090 --> 00:03:40,520 If you look at it at the moment it's it's kind of like joint today so I'm saying that from the top I 50 00:03:40,530 --> 00:03:44,600 want it to move down certain level of pixels. 51 00:03:44,630 --> 00:03:47,110 I say the margin from the top. 52 00:03:47,400 --> 00:03:52,260 I want you to move a hundred pixels from the top from the left. 53 00:03:52,260 --> 00:03:54,690 I want you to move to 20 pixels. 54 00:03:54,690 --> 00:03:56,790 These values you can play around with. 55 00:03:56,790 --> 00:04:04,050 So these are just my values so please feel free to experiment and change the values is really cool to 56 00:04:04,050 --> 00:04:04,280 do. 57 00:04:04,280 --> 00:04:06,120 So you can see how it works. 58 00:04:06,420 --> 00:04:09,080 And then the width here how wide the box will be. 59 00:04:09,090 --> 00:04:14,600 I've given it three fifty pixels all this I've got to semicolon here. 60 00:04:14,620 --> 00:04:15,620 That would not work. 61 00:04:16,230 --> 00:04:23,250 So again the height of given a height and display I want it to be in blocks. 62 00:04:23,250 --> 00:04:29,390 That is the way it gonna be display as a block. 63 00:04:29,400 --> 00:04:30,900 So everything in blue. 64 00:04:30,900 --> 00:04:35,490 Here are the properties I want to I want. 65 00:04:35,520 --> 00:04:42,990 I have defined purple are the values for the property and you separate the property from the value with 66 00:04:42,990 --> 00:04:43,840 the call on here. 67 00:04:43,920 --> 00:04:44,780 OK. 68 00:04:44,850 --> 00:04:47,960 So again the same thing with the output. 69 00:04:47,970 --> 00:04:49,550 This is an output. 70 00:04:49,710 --> 00:04:55,740 This is where the actual length of the word typed into this box will be displayed. 71 00:04:55,740 --> 00:05:04,520 Similar thing Marjane from the top I wanted to drop down 45 pixels from the top the with hundred pixels 72 00:05:05,120 --> 00:05:15,340 with is how wide would be the background is like green margin less from the left 400 pixels. 73 00:05:15,590 --> 00:05:22,240 And this is the button which is this button here. 74 00:05:22,280 --> 00:05:23,080 All right. 75 00:05:23,270 --> 00:05:30,740 So the button the width given that the height and given and that this is a color which refers to the 76 00:05:30,740 --> 00:05:34,800 color of the text inside the button. 77 00:05:34,880 --> 00:05:36,480 This is a background color. 78 00:05:36,560 --> 00:05:37,850 I've given it blue here. 79 00:05:37,860 --> 00:05:40,160 I've not used hex colors here. 80 00:05:40,190 --> 00:05:44,120 I've used the actual color name border style. 81 00:05:44,150 --> 00:05:48,130 I've said none without the border style. 82 00:05:48,140 --> 00:05:54,590 Without this there will be shadows you can see is there will be there are some shadows around so the 83 00:05:54,590 --> 00:06:00,710 bottom style will remove any shadow on the button that's what that does. 84 00:06:00,710 --> 00:06:01,940 OK. 85 00:06:02,030 --> 00:06:05,980 And then we've got border radios is what will make it round it. 86 00:06:06,650 --> 00:06:09,130 So at the moment the button looks like a square. 87 00:06:09,140 --> 00:06:14,720 The border regions will make it round it makes the edges rounded. 88 00:06:14,810 --> 00:06:17,950 That's what border radius does. 89 00:06:17,960 --> 00:06:20,450 And again these values play around with it. 90 00:06:20,450 --> 00:06:22,100 I've used 15 pixels here. 91 00:06:22,100 --> 00:06:23,970 You don't have to use 15. 92 00:06:24,020 --> 00:06:29,060 Just try different values and see which one you like best. 93 00:06:29,060 --> 00:06:33,970 Again inside this button idea here the margin from the top. 94 00:06:33,980 --> 00:06:38,150 I wanted to drop a hundred pixels margin from the left. 95 00:06:38,150 --> 00:06:39,950 I wanted to move from the left. 96 00:06:40,010 --> 00:06:42,960 Three hundred and eighty five pixels again. 97 00:06:43,160 --> 00:06:49,720 These values play around with them apply on values and see how it looks. 98 00:06:49,730 --> 00:06:51,520 So that's the end of that one. 99 00:06:51,530 --> 00:07:02,300 Then this head in tag here the hate phone tag which is this text here type a word does he hate on tag 100 00:07:02,300 --> 00:07:02,600 here. 101 00:07:03,230 --> 00:07:10,040 So this is the styling I've applied I want the text to be centered. 102 00:07:10,190 --> 00:07:14,680 So this text align property centered the color. 103 00:07:14,690 --> 00:07:16,460 This is a color which is black. 104 00:07:16,910 --> 00:07:19,700 It's a hex value for black. 105 00:07:19,910 --> 00:07:21,500 The margin from the top. 106 00:07:21,500 --> 00:07:25,070 I wanted to move 50 pixels from the top. 107 00:07:25,130 --> 00:07:26,910 So let me save that. 108 00:07:26,930 --> 00:07:28,520 Save it. 109 00:07:28,520 --> 00:07:31,370 Go back to the document refresh. 110 00:07:32,060 --> 00:07:33,620 And this is what it looks like. 111 00:07:33,620 --> 00:07:38,390 You can see it looks much better where the styling applied. 112 00:07:38,390 --> 00:07:48,500 So in this lecture we have applied styling or presentation to how our app there is no functionality 113 00:07:48,530 --> 00:07:51,630 because we have not applied any javascript yet. 114 00:07:51,650 --> 00:07:54,410 So if I type in something nothing will work. 115 00:07:54,410 --> 00:07:55,550 So if I say 116 00:07:59,420 --> 00:08:01,610 typing hello and click that. 117 00:08:01,790 --> 00:08:09,800 Nothing will happen because I have not implemented the java script which will be responsible for the 118 00:08:09,800 --> 00:08:11,280 function. 119 00:08:11,360 --> 00:08:12,390 That's it for now. 120 00:08:12,580 --> 00:08:13,400 Thank you. 121 00:08:13,610 --> 00:08:14,330 Bye for now.