1 00:00:00,690 --> 00:00:01,660 Hello and welcome. 2 00:00:01,680 --> 00:00:10,860 In this lecture we are going to create some very basic inline styling for the form we created for our 3 00:00:10,860 --> 00:00:13,400 web app. 4 00:00:13,470 --> 00:00:16,310 So inside our visual studio. 5 00:00:17,130 --> 00:00:24,310 Make sure you've got the identity or aspect selected. 6 00:00:24,570 --> 00:00:24,950 OK. 7 00:00:24,960 --> 00:00:25,860 Which is this. 8 00:00:25,950 --> 00:00:30,950 Here in the solution explorer and you should feel double click on and you should see it. 9 00:00:30,960 --> 00:00:34,980 And then you should see the code here. 10 00:00:34,980 --> 00:00:45,780 While you are in the code go to we need to activate the formatting toolbar so you get to view 11 00:00:48,210 --> 00:00:51,290 and you go to toolbars. 12 00:00:51,300 --> 00:00:58,260 There's an option here for toolbars and there's one for formatting. 13 00:00:58,770 --> 00:01:01,050 So we need to look for the formatting. 14 00:01:01,050 --> 00:01:01,660 There you go. 15 00:01:01,680 --> 00:01:07,800 That on click on that and that should activate the formatting toolbar you notice here. 16 00:01:08,220 --> 00:01:14,930 It has appeared here so he says this now becomes a target rule. 17 00:01:14,940 --> 00:01:21,450 So we're going to switch to our design view by clicking on this design tab here so we can see what the 18 00:01:21,450 --> 00:01:23,760 styling will look like in the design. 19 00:01:24,440 --> 00:01:24,900 All right. 20 00:01:24,900 --> 00:01:26,440 So what I'm going to do. 21 00:01:26,530 --> 00:01:35,050 Why when the design of you I want to click on the first box here I just like to expand that a bit. 22 00:01:35,190 --> 00:01:38,770 So I just drag it along to make it bigger. 23 00:01:38,790 --> 00:01:43,560 Notice as I'm dragging the pixels is also increasing. 24 00:01:43,560 --> 00:01:49,740 I'll do the same for this one and just drag it along to make it slightly bigger. 25 00:01:49,740 --> 00:01:55,330 Next hour click notice the whole area here. 26 00:01:55,340 --> 00:02:01,580 The div notice I've got noticed the DB they're highlighted which is the one highlighted here. 27 00:02:01,580 --> 00:02:02,540 That's what we're looking at. 28 00:02:02,540 --> 00:02:06,140 So the styling we're doing and we are applying it to this DB. 29 00:02:06,150 --> 00:02:09,320 It did is a division on a web page. 30 00:02:09,320 --> 00:02:09,650 All right. 31 00:02:09,650 --> 00:02:11,180 Notice the Davis highlighted. 32 00:02:11,600 --> 00:02:15,990 So while we've got it we've highlighted these are some options here. 33 00:02:16,010 --> 00:02:18,260 It says New Line style. 34 00:02:18,290 --> 00:02:25,130 If I click on the dropdown it's got new inline style new auto class automatic but we're not going to 35 00:02:25,130 --> 00:02:31,400 focus on the default here which is the new inline style because we just want to apply some very basic 36 00:02:31,400 --> 00:02:32,300 styling. 37 00:02:32,420 --> 00:02:34,070 So let's just go through the options here. 38 00:02:34,070 --> 00:02:39,400 Here you've got reuse existence style sure overlay. 39 00:02:39,710 --> 00:02:46,070 And he has got dropdown gives you paragraphs and so I'm gonna skip that and yeah he's got different 40 00:02:46,220 --> 00:02:51,110 font size so the font size here is the default has been used. 41 00:02:51,110 --> 00:02:59,930 If you want to make the font size bigger we can come here and make it X X which is small small large 42 00:03:00,140 --> 00:03:01,700 it in pixels is large. 43 00:03:01,700 --> 00:03:02,720 Let's see what it looks like. 44 00:03:02,720 --> 00:03:03,660 Large. 45 00:03:03,860 --> 00:03:04,370 Okay. 46 00:03:04,400 --> 00:03:05,840 Does the default. 47 00:03:05,900 --> 00:03:06,200 Sorry. 48 00:03:06,200 --> 00:03:07,010 That is large. 49 00:03:07,040 --> 00:03:09,300 So we live it at large and see what happens. 50 00:03:09,320 --> 00:03:12,930 So we're just doing some basic formatting here and CSX. 51 00:03:13,220 --> 00:03:15,170 Next we'll go to. 52 00:03:15,170 --> 00:03:16,910 We can make it board if we wish. 53 00:03:16,910 --> 00:03:20,950 So this tabs here they just like in the Word document. 54 00:03:20,960 --> 00:03:22,010 So really simple. 55 00:03:22,010 --> 00:03:29,450 So next I don't want anything on the line here we've got foreground color is the color of the actual 56 00:03:29,450 --> 00:03:30,790 text. 57 00:03:30,950 --> 00:03:33,430 I'll leave it for that color the moment here. 58 00:03:33,440 --> 00:03:34,930 The background color. 59 00:03:34,940 --> 00:03:40,520 Notice the styling I'm applying this style into the deep notice that Davis highlighted there and that's 60 00:03:40,520 --> 00:03:40,950 it. 61 00:03:41,600 --> 00:03:43,340 So I'll go for the background color. 62 00:03:43,370 --> 00:03:49,760 Our click on this for the background and then it gives me color thing. 63 00:03:49,970 --> 00:03:51,730 So I just need to select a color. 64 00:03:51,740 --> 00:03:55,790 I would like so that's I like that color. 65 00:03:55,820 --> 00:04:01,970 So I just click OK and notice it as I apply the color to the div. 66 00:04:01,970 --> 00:04:02,440 All right. 67 00:04:02,450 --> 00:04:06,230 So the div is actually the form itself. 68 00:04:06,230 --> 00:04:08,900 So we've got that covered next. 69 00:04:09,230 --> 00:04:14,810 I want to target this button here. 70 00:04:14,890 --> 00:04:20,550 The clicked me button actually before I do that I want to make this a bit. 71 00:04:21,160 --> 00:04:21,920 Well no it doesn't. 72 00:04:22,820 --> 00:04:23,430 Okay. 73 00:04:23,450 --> 00:04:26,800 I was trying to make it a bit wider actually. 74 00:04:26,840 --> 00:04:31,980 Let me see if I can bring that down a bit. 75 00:04:32,060 --> 00:04:32,810 Okay. 76 00:04:32,960 --> 00:04:34,850 I'll leave that as it is. 77 00:04:34,970 --> 00:04:41,630 Next I'm going to target notice I'm just we're just trying to apply some basic styling and formatting 78 00:04:41,660 --> 00:04:43,600 it doesn't have to be perfect. 79 00:04:43,730 --> 00:04:48,270 We're just trying to find out where things are and how to apply them. 80 00:04:48,300 --> 00:04:54,240 That's basically what this exercise is about we don't have to make things perfect. 81 00:04:54,260 --> 00:04:57,080 Next thing I want to do I want to change this button here. 82 00:04:57,110 --> 00:05:03,490 I want to make you red and I also want to make the text inside White. 83 00:05:03,510 --> 00:05:03,790 All right. 84 00:05:03,800 --> 00:05:12,890 So I click on the button just drag down to make it a bit bigger and drag along to make it wider. 85 00:05:12,920 --> 00:05:13,330 All right. 86 00:05:13,340 --> 00:05:20,360 So one needs to do not why the button is clicked ahead of are here to the properties for the button. 87 00:05:20,480 --> 00:05:23,150 Notice why the button is clicked. 88 00:05:23,450 --> 00:05:31,400 I can come here and change the background color where's go foreground color foreground clothes different 89 00:05:31,400 --> 00:05:37,190 from background color foreground refers to the foreground and background paper. 90 00:05:37,310 --> 00:05:41,230 So I click on the background one here which is this. 91 00:05:41,300 --> 00:05:45,850 And I won't make it red click Okay. 92 00:05:45,910 --> 00:05:51,920 And notice it has now applied the red color to the button but the text is black. 93 00:05:51,920 --> 00:05:57,230 I want to make the text black so we go over here and go to the foreground color which is gonna be the 94 00:05:57,230 --> 00:06:01,570 text so we're going to use white OK. 95 00:06:01,610 --> 00:06:03,900 Notice this is a current color showing. 96 00:06:04,000 --> 00:06:09,640 Click white notice now the text is now showing as white. 97 00:06:09,670 --> 00:06:11,530 So that's all we can do for now. 98 00:06:11,530 --> 00:06:16,910 I just wanted to show you just some basic styling so why we've got that. 99 00:06:16,930 --> 00:06:25,990 I will go if I go back into my source code you see that the styling and the formatting we've done has 100 00:06:25,990 --> 00:06:30,360 been added to the code so let's click on source. 101 00:06:30,370 --> 00:06:31,210 There you go. 102 00:06:31,210 --> 00:06:38,230 So on that the form here we've got div style limits inside the DB is applied an inline styling which 103 00:06:38,230 --> 00:06:44,980 is this one here is giving it that font size of large background color is giving it to this color. 104 00:06:44,980 --> 00:06:46,180 All right. 105 00:06:46,180 --> 00:06:55,840 And in the button notice is given the button a height here a scroll and giving it a style color and 106 00:06:55,840 --> 00:06:56,870 a background color. 107 00:06:57,300 --> 00:06:58,200 OK. 108 00:06:58,390 --> 00:07:02,650 So it's actually inserted the styling. 109 00:07:02,650 --> 00:07:07,310 We applied in line with the HMO element and the ESB. 110 00:07:07,330 --> 00:07:09,400 So that's this organ is going to save. 111 00:07:09,400 --> 00:07:15,400 Notice all these yellow strips here means I have got code that I have not saved. 112 00:07:15,640 --> 00:07:18,220 I'm just going to click save and they should all turn green. 113 00:07:18,380 --> 00:07:18,780 OK. 114 00:07:18,810 --> 00:07:20,710 So they both turn green now. 115 00:07:20,810 --> 00:07:26,140 I'm going to do is execute the code again so we can see the changes we have made. 116 00:07:26,140 --> 00:07:27,900 So I click on the Google Chrome here. 117 00:07:27,910 --> 00:07:37,360 If you don't see Google Chrome it will display whatever web browser is your default click. 118 00:07:37,500 --> 00:07:48,090 So it's currently building the project at issue launched the local server to display the project so 119 00:07:48,090 --> 00:07:51,580 soon issued display. 120 00:07:51,710 --> 00:07:52,180 All right. 121 00:07:52,190 --> 00:07:55,960 So it's a display so this is just the basic styling we've applied. 122 00:07:56,090 --> 00:08:03,220 So let's try and typing something there first name last name and click. 123 00:08:03,490 --> 00:08:03,800 You can. 124 00:08:03,800 --> 00:08:04,940 This is hello. 125 00:08:04,940 --> 00:08:05,750 Rick Williams. 126 00:08:05,810 --> 00:08:08,940 So the code is to working as designed. 127 00:08:09,050 --> 00:08:12,710 We just applied some basic styling to the D. 128 00:08:12,800 --> 00:08:15,890 Notice the styling has not extended to the rest of the page. 129 00:08:15,890 --> 00:08:20,720 It's only applied to the div I wanted the whole page to be this color. 130 00:08:20,720 --> 00:08:27,530 I would have applied the styling of the background color to the body and not to Dave. 131 00:08:27,530 --> 00:08:28,580 That's the difference. 132 00:08:28,580 --> 00:08:32,480 The styling was applied to the div. 133 00:08:32,480 --> 00:08:42,560 That's it for this lecture in this lecture we styled and formatted the web form we created earlier. 134 00:08:43,220 --> 00:08:44,150 Thanks for watching. 135 00:08:44,150 --> 00:08:45,750 I hope it's been useful. 136 00:08:45,750 --> 00:08:46,360 Bye for now.