1 00:00:00,570 --> 00:00:01,530 Hello and welcome. 2 00:00:01,560 --> 00:00:09,870 In this lecture we are going to be styling our hasty e-mail that we created for our app. 3 00:00:11,610 --> 00:00:15,780 So I am inside my text editor on this is the says fall. 4 00:00:15,810 --> 00:00:21,370 So this is where we're going to define the styling for our app. 5 00:00:21,420 --> 00:00:26,340 So we're going to use the I.D. where we've got I.D. to use. 6 00:00:26,340 --> 00:00:32,630 If not we'll use the actual elements to style the T.M.. 7 00:00:33,150 --> 00:00:39,660 I have added some basic styling here for the body of the actual hate mail. 8 00:00:39,660 --> 00:00:43,350 So this style would be applied to the body when you're styling. 9 00:00:43,350 --> 00:00:45,160 You need to have a selector. 10 00:00:45,330 --> 00:00:47,670 In this case the body is a selector. 11 00:00:47,670 --> 00:00:55,650 And then in between the curly braces this one and this one here you specify the properties and the value 12 00:00:55,950 --> 00:00:58,880 you want to apply to the selector. 13 00:00:58,890 --> 00:01:06,480 So in this case I have got several properties here in the text line is a property and I want the text 14 00:01:06,480 --> 00:01:11,570 to be centered quite another property called background color. 15 00:01:11,610 --> 00:01:15,020 I've given it a hex value background color. 16 00:01:15,060 --> 00:01:20,580 You don't have to use hex value for example if you know the actual color name you could specify that 17 00:01:21,000 --> 00:01:23,510 in place of the hex value. 18 00:01:23,580 --> 00:01:30,150 Here again the color I specify a white this color here refers to the color of the text you use for the 19 00:01:30,150 --> 00:01:35,990 body not the actual not the actual background. 20 00:01:36,080 --> 00:01:36,720 Okay. 21 00:01:36,780 --> 00:01:44,160 If you want a background color you need to specify background color font family refers to the font the 22 00:01:44,190 --> 00:01:45,610 type of font that you can use. 23 00:01:45,660 --> 00:01:49,150 It's always good to specify more than one. 24 00:01:49,200 --> 00:01:59,850 So objects and area just in case the first font is not available on the machine that is viewing this 25 00:01:59,850 --> 00:02:00,780 page. 26 00:02:00,780 --> 00:02:02,940 So it can default to the other one. 27 00:02:02,940 --> 00:02:07,370 So what I'm seeing here this is my first choice here the font is now available. 28 00:02:07,370 --> 00:02:08,510 Default to that. 29 00:02:08,520 --> 00:02:14,050 So most computers should have either both or either. 30 00:02:14,340 --> 00:02:20,660 I have that a chunk more of styling from line eight here to line 18. 31 00:02:20,740 --> 00:02:31,310 Notice here I've used the I.D. attribute this idea here is for I have from this I.D. inside here we've 32 00:02:31,320 --> 00:02:36,570 got an I.D. here called and that's the I.D. I am referring to here. 33 00:02:36,570 --> 00:02:38,330 All right so that's the target. 34 00:02:38,520 --> 00:02:44,430 And these are the properties and these are the values that you separate the property from the value 35 00:02:44,430 --> 00:02:45,740 with a colon. 36 00:02:45,780 --> 00:02:46,260 OK. 37 00:02:46,260 --> 00:02:50,630 So again this is the I.D. I'm styling the background color. 38 00:02:50,640 --> 00:02:54,990 I've given it red border set to zero. 39 00:02:55,020 --> 00:02:56,620 I don't want a border color. 40 00:02:56,650 --> 00:03:02,840 It's white which is a color that it's referring to color of the text padding. 41 00:03:03,050 --> 00:03:03,500 OK. 42 00:03:03,520 --> 00:03:09,540 Pattern is the space inside the element while margin is the space outside it. 43 00:03:09,540 --> 00:03:16,200 So these are the values are specified for the padding cursor the cursor property basically specifies 44 00:03:16,350 --> 00:03:23,290 a type of cursor to be displayed when pointing on an element as well that is. 45 00:03:23,310 --> 00:03:28,330 I've just said pointer margin again refers to this space outside. 46 00:03:28,350 --> 00:03:31,300 All I'm saying here from the top one. 47 00:03:31,410 --> 00:03:36,780 I want you to want there to be a space 35 pixels from the top. 48 00:03:36,780 --> 00:03:39,970 That's what that means. 49 00:03:40,530 --> 00:03:45,250 I have added some more styling from line 19 to 25. 50 00:03:45,510 --> 00:03:48,480 And this time I am styling a class. 51 00:03:48,480 --> 00:03:52,140 So if you got a dot followed by a name that is a class. 52 00:03:52,140 --> 00:03:53,720 So I'm styling that class. 53 00:03:53,730 --> 00:04:01,500 This class will be added automatically with our Java script but I'm just preparing this styling for 54 00:04:01,500 --> 00:04:04,380 that beforehand. 55 00:04:04,380 --> 00:04:08,340 So again the class here is the selector. 56 00:04:08,480 --> 00:04:11,370 By the property Margene I'm saying from the top. 57 00:04:11,370 --> 00:04:19,990 I want it to drop 13 pixels background Clive's set that to X color x value float means float. 58 00:04:20,010 --> 00:04:25,080 Basically if you've got a means I want the element to move to the right. 59 00:04:25,110 --> 00:04:25,890 Okay. 60 00:04:25,920 --> 00:04:30,350 And where you have elements moving to the right you need to also specify a clay. 61 00:04:30,360 --> 00:04:32,860 So we use float you need to use Claire. 62 00:04:32,940 --> 00:04:39,110 Claire basically is used to clear any obstruction on either side. 63 00:04:40,050 --> 00:04:41,430 And then the background color. 64 00:04:42,090 --> 00:04:49,080 So we've got padding padding refers to the space inside time same space inside from the right. 65 00:04:49,170 --> 00:04:54,510 I wanted to move 20 pixels border regions is what gives the around it corner. 66 00:04:54,540 --> 00:04:58,670 So if you've got a square the border radius can likes makes it browned a bit. 67 00:04:59,070 --> 00:05:01,640 So that's what the outrageous property does. 68 00:05:03,260 --> 00:05:03,710 All right. 69 00:05:03,760 --> 00:05:13,100 Did a couple of more properties to this class here giving it a with of 60 pixels and a height of 20 70 00:05:13,100 --> 00:05:21,470 pixels border style I've said it to none so that there are no shadows or nothing on the borders. 71 00:05:21,830 --> 00:05:29,720 I've added some more styling to this I.D. called wrapper which if we go into our hasty e-mail here we'll 72 00:05:29,720 --> 00:05:35,210 see that we've got an idea here called wrapper which is the main div. 73 00:05:35,210 --> 00:05:36,140 Does he want. 74 00:05:36,150 --> 00:05:38,110 I'm targeting here. 75 00:05:38,210 --> 00:05:46,640 These are the styling up applied to that I.D. again the width of said a width of 450 pixels a background 76 00:05:46,640 --> 00:05:47,390 color. 77 00:05:47,420 --> 00:05:49,550 I've given it a hex value. 78 00:05:49,940 --> 00:05:53,690 The margin I've set it margin from the top. 79 00:05:53,690 --> 00:05:58,730 I've said I want it to drop a hundred and twenty pixels margin from the left. 80 00:05:58,730 --> 00:06:04,810 I wanted to move to 4 2 9 5 pixels padding from the bottom. 81 00:06:04,850 --> 00:06:11,660 Remember padding is a space inside the element while margin is a space outside the element. 82 00:06:11,660 --> 00:06:19,560 So padding from the bottom 30 pixels padding left 50 pixels padding top 30 right. 83 00:06:19,720 --> 00:06:22,630 65 body radial 25 pixels. 84 00:06:22,850 --> 00:06:25,010 By all means play around with these values. 85 00:06:25,010 --> 00:06:28,190 You don't necessarily have to stick to my values. 86 00:06:28,190 --> 00:06:34,100 Just play around and experiment and see what works for you. 87 00:06:34,100 --> 00:06:42,140 I have handed a chunk more of styling from line 43 to 57 so forth. 88 00:06:42,170 --> 00:06:45,340 I'll explain 43 to 48 first. 89 00:06:45,380 --> 00:06:54,350 That is the U L which is the on order list which I will insert using the using JavaScript. 90 00:06:54,380 --> 00:07:01,280 Basically these are the styling the lists all I want and don't want it to have any styling on the list. 91 00:07:01,400 --> 00:07:08,900 And I've said that text aligned to left line height is the space between each text. 92 00:07:08,900 --> 00:07:09,430 OK. 93 00:07:09,440 --> 00:07:20,030 And then on line 49 the I.D. called task so that's where we'll actually input the task we want to carry 94 00:07:20,030 --> 00:07:32,170 out so the task idea here on line 49 giving it a with of 320 pixels a height of 30 pixels the margin 95 00:07:32,170 --> 00:07:41,770 from the left told you to move 17 pixels and line 54 is the hate one tag which I've given a margin from 96 00:07:41,770 --> 00:07:42,760 the top. 97 00:07:42,820 --> 00:07:47,950 I've said I wanted to move 30 pixels from the top. 98 00:07:48,010 --> 00:07:49,040 That's what that means. 99 00:07:49,880 --> 00:07:50,370 Okay. 100 00:07:50,920 --> 00:07:52,980 So that's all our styling done. 101 00:07:52,990 --> 00:08:00,630 I just save that we can try and review our app and see what it looks like. 102 00:08:00,690 --> 00:08:01,030 All right. 103 00:08:01,060 --> 00:08:03,590 So this is what the app looks like before the styling. 104 00:08:03,610 --> 00:08:05,520 So I'll just refresh. 105 00:08:05,800 --> 00:08:13,840 And this is what it looks like now after the styling so it looks much nicer more presentable with the 106 00:08:13,840 --> 00:08:14,560 styling. 107 00:08:14,830 --> 00:08:25,250 So that's it for this styling for this project in the next lecture or be doing the actual java script 108 00:08:25,270 --> 00:08:29,680 writing javascript code that will make all this work. 109 00:08:29,680 --> 00:08:31,210 Thanks for watching. 110 00:08:31,210 --> 00:08:31,750 Bye for now.