1 00:00:01,160 --> 00:00:02,900 Hello everyone and welcome back. 2 00:00:04,260 --> 00:00:09,730 In today's video we learn how to state next elements like headings and paragraphs. 3 00:00:09,720 --> 00:00:17,690 Jesus provides us with properties change font size color X alignment on much more let's try all these 4 00:00:17,690 --> 00:00:20,520 properties with examples to understand them better. 5 00:00:20,930 --> 00:00:24,830 So first let's write a new color on this text. 6 00:00:24,830 --> 00:00:34,830 So let's bring up our good Ed. Let's start in other cities inspire so index don't see as this 7 00:00:37,910 --> 00:00:41,020 lets linguists find view so length. 8 00:00:41,270 --> 00:00:43,690 The relation is stained sheet. 9 00:00:46,070 --> 00:00:58,680 The location is for its largest index dots CSX and then the diapers text C uses let's say it on let's 10 00:00:58,680 --> 00:01:02,420 try giving this adding up other so say it sure. 11 00:01:04,190 --> 00:01:06,000 So we've got the statement dog here. 12 00:01:06,200 --> 00:01:16,350 So let's use the color So color is a blue let's say it. 13 00:01:17,150 --> 00:01:20,070 And as you can see the color of the headings seems to blue. 14 00:01:20,640 --> 00:01:31,360 Similarly if we want to change the color of the paragraphs so let's say color on Brown let's save it. 15 00:01:32,370 --> 00:01:36,080 As you can see the color of the paragraph is also changed. 16 00:01:36,210 --> 00:01:38,520 The next property is text alignment. 17 00:01:39,300 --> 00:01:43,530 So as you can see right now the text is aligned on the left. 18 00:01:44,070 --> 00:01:49,800 So we've got another property text aligned to align the stakes to left center and right. 19 00:01:49,800 --> 00:01:50,670 So let's try that. 20 00:01:51,810 --> 00:01:53,670 So text aligned say center. 21 00:01:54,030 --> 00:01:55,760 Let's save it. 22 00:01:55,760 --> 00:01:58,200 And as you can see the heading is in the center of the screen. 23 00:01:59,760 --> 00:02:02,900 Similarly if we change it do text aligned right. 24 00:02:03,930 --> 00:02:06,850 So the heading goes to the right hand side of the screen. 25 00:02:07,740 --> 00:02:14,590 Similarly for the bar graphs let's say text align center all of text the center line. 26 00:02:15,300 --> 00:02:23,920 Similarly if you do write all the text is right in line and you've got another option say justified. 27 00:02:24,060 --> 00:02:28,850 So now all this takes will be scraped across the available space. 28 00:02:29,180 --> 00:02:34,950 And as you can see all this text is stretched across the width of our screen. 29 00:02:36,630 --> 00:02:44,850 So if you change just left it save it you see the second line as a space and being the first line had 30 00:02:44,850 --> 00:02:49,400 this piece of being but if you're keeping it justified. 31 00:02:49,770 --> 00:02:53,980 So it's straight below the end of the screen to the end of the line. 32 00:02:54,120 --> 00:02:56,210 The next one is font style. 33 00:02:56,280 --> 00:02:59,490 So we can define what it often does normal or italics 34 00:03:02,300 --> 00:03:05,620 so let's say let's bring this back to center. 35 00:03:06,170 --> 00:03:07,120 Let's see that. 36 00:03:07,760 --> 00:03:11,570 Let's try this small boat on the heading same font style. 37 00:03:11,660 --> 00:03:21,180 Italics let's say it as you can see beheading is not in italics font the next property that we have 38 00:03:21,270 --> 00:03:23,350 is one tweet. 39 00:03:23,460 --> 00:03:32,650 So this is defined the thickness of the font so let's say Alexa so let's try this property save for 40 00:03:32,650 --> 00:03:35,350 a tweet so we can light up normal. 41 00:03:35,360 --> 00:03:41,860 So currently the default value which is normal you can have it bold let's save it. 42 00:03:42,040 --> 00:03:48,310 And as you can see in our funders ball or in through that we can give the values save four hundred so 43 00:03:48,310 --> 00:03:49,800 four hundred which is a bit of. 44 00:03:49,880 --> 00:03:56,130 So at this point we'd both from hundred 224 and make up to 800 900. 45 00:03:56,150 --> 00:03:57,620 All right so let's say that. 46 00:03:57,700 --> 00:03:59,510 And as you can see F1 is a big ten. 47 00:04:00,170 --> 00:04:03,440 But if you make it 600 the font is a bit trickier. 48 00:04:04,190 --> 00:04:10,400 So it's more do it's the ball inside the move but another property called text decoration. 49 00:04:10,400 --> 00:04:16,530 So the purpose of this property is to underline the text or have a language with the text what you call 50 00:04:16,530 --> 00:04:23,930 text so let's try not so text declarations on underline. 51 00:04:23,960 --> 00:04:32,670 Let's say that and as you can see our heading is underlined similarly to accepts another value overlay. 52 00:04:33,480 --> 00:04:40,220 And as you can see we've got a line over the next or about the text that it also accepts little value 53 00:04:42,090 --> 00:04:42,880 line through. 54 00:04:43,680 --> 00:04:48,770 So as you can see our text get straight through the line goes through our dates and accepts another 55 00:04:48,780 --> 00:04:49,770 value going none. 56 00:04:49,770 --> 00:04:59,050 So in that gives no line is shown or there's no line with the text that's all the text negation base. 57 00:04:59,110 --> 00:05:03,650 So you can use this text like we should to remove the underlying phone links. 58 00:05:03,760 --> 00:05:06,630 So when we explore in length we will talk about this again. 59 00:05:06,640 --> 00:05:13,720 All right so we've got other property called text transform so the purpose of this property is to make 60 00:05:13,720 --> 00:05:18,030 our text uppercase lowercase or capitalized. 61 00:05:18,320 --> 00:05:22,690 So which is I think is so let's write up. 62 00:05:22,930 --> 00:05:29,210 So text transform let's say public is. 63 00:05:29,420 --> 00:05:36,080 And as you can see our entire text is now uppercase similarly lowercase. 64 00:05:36,080 --> 00:05:40,380 And now as you can see you've done hitting all the alphabets are in lowercase. 65 00:05:40,760 --> 00:05:43,000 And then you've got capitalized. 66 00:05:43,070 --> 00:05:44,630 So this is like application. 67 00:05:44,720 --> 00:05:48,080 So the first alphabet of a b word is capitalized. 68 00:05:48,230 --> 00:05:50,030 I don't do apologies. 69 00:05:50,240 --> 00:05:55,220 That's all for X transform then leave but another property letter spacing. 70 00:05:55,280 --> 00:06:00,110 So the purpose of this property is to increase or decrease the space between alphabets. 71 00:06:00,290 --> 00:06:07,870 So let's write about so you let us be saying don't make sense in Argentina. 72 00:06:07,880 --> 00:06:08,720 The paragraphs. 73 00:06:08,750 --> 00:06:12,170 So each alphabet has a little more space between each other. 74 00:06:12,380 --> 00:06:18,720 So if you increase in say four pixels so we've got more space between the letters. 75 00:06:18,750 --> 00:06:20,380 So if we reduce it to zero. 76 00:06:20,460 --> 00:06:28,200 So it goes back to the original spacing but if you make it negative say minus one the text gets closer. 77 00:06:28,440 --> 00:06:29,990 So let's say minus four. 78 00:06:30,720 --> 00:06:32,950 And now the text is overlapping with each other. 79 00:06:33,060 --> 00:06:41,290 So let's just increase it to say two pixels or let's just say one pixel just similar to this we have 80 00:06:41,410 --> 00:06:43,330 another problem decoding good spacing. 81 00:06:43,540 --> 00:06:49,030 So as name suggests what it does is it increases the space between two words. 82 00:06:49,330 --> 00:06:55,670 So let's write like so let's start with zero pixels sense. 83 00:06:55,690 --> 00:07:05,680 So this is the default value let's increase in say two pixels let's increase it a bit more say it pixels. 84 00:07:05,680 --> 00:07:11,990 And now as you can see they've got more space between other words let's try using some negative values. 85 00:07:12,020 --> 00:07:21,970 So minus 1 C minus 4 C minus a C minus twelve. 86 00:07:22,840 --> 00:07:28,450 So as you can see now our roads are getting overlap with each other because of the negative little spacing. 87 00:07:28,510 --> 00:07:33,000 So let's just bring it back to normal which is zero pixels. 88 00:07:33,370 --> 00:07:36,090 That's all about the word spacing. 89 00:07:36,140 --> 00:07:38,200 They've got another body like height. 90 00:07:38,260 --> 00:07:48,840 So what this does is it increases the space between two lines so let's use Dr. C 1. 91 00:07:49,080 --> 00:07:52,170 So this is the default dividing line. 92 00:07:52,170 --> 00:07:56,290 How does one so let's just make it one point. 93 00:07:56,350 --> 00:08:01,300 Do so it is now 1 1 2 times the default value. 94 00:08:01,820 --> 00:08:04,030 Similarly let's make it one point five. 95 00:08:04,660 --> 00:08:08,070 And as you can see the space with me online is going to increase. 96 00:08:08,150 --> 00:08:13,930 Let's make it do so now it's the double off money for value that's also line. 97 00:08:13,930 --> 00:08:15,140 Hi guys. 98 00:08:15,200 --> 00:08:17,440 So we've got another property called for family. 99 00:08:17,450 --> 00:08:24,210 So what it does is you can define the kind of phone that you want to use so to get some online funds 100 00:08:24,220 --> 00:08:25,690 we can go to Google funds. 101 00:08:25,690 --> 00:08:28,930 So let's open a new job and search for Google funds 102 00:08:31,990 --> 00:08:32,870 let's select it. 103 00:08:33,520 --> 00:08:36,910 Let's open this webpage. 104 00:08:37,110 --> 00:08:46,820 As you can see it has got a list of lots of funds so let's say we want to use this open sounds. 105 00:08:46,830 --> 00:08:52,030 So you have to just click on this plus button so then click here. 106 00:08:52,050 --> 00:08:53,220 This fund is selected. 107 00:08:54,210 --> 00:09:02,250 So just click on this bottom sheet now and it opens so as you can see just giving you a link here. 108 00:09:02,260 --> 00:09:04,750 So this is a link to the Google funds API. 109 00:09:05,140 --> 00:09:06,550 So to use it and CSF. 110 00:09:06,560 --> 00:09:13,180 We just this one family under the name of the fund family and we can customize it. 111 00:09:13,200 --> 00:09:15,870 So if you come here it shows you. 112 00:09:15,870 --> 00:09:18,700 So you've got light which is 300 fund weight. 113 00:09:18,740 --> 00:09:25,280 Then you've got like italics then you've got regular which is 400 fund weight on the most smallest atrium 114 00:09:25,310 --> 00:09:26,410 decline to eat. 115 00:09:26,580 --> 00:09:29,310 So let's say we won 700 gold. 116 00:09:30,300 --> 00:09:35,850 So if you come back to this embed and now as you can see here we've got two different values. 117 00:09:35,970 --> 00:09:45,390 So open sounds forced 400 and 700 let's copy this let's come back Hugh voodoo and make sort of stream 118 00:09:45,400 --> 00:09:55,320 of fire and do I add links we added in the head element let's fix that here so coming back here that's 119 00:09:55,350 --> 00:09:56,030 copy this. 120 00:09:56,040 --> 00:09:58,820 So fine family open signs sans serif. 121 00:09:59,520 --> 00:10:04,360 So coming back to that page let's other sites. 122 00:10:04,520 --> 00:10:08,290 So let's say you want to add this fine family to that paragraph. 123 00:10:08,630 --> 00:10:10,120 So let's just paste it here. 124 00:10:10,490 --> 00:10:11,280 Let's save it. 125 00:10:11,830 --> 00:10:17,650 And now as you can see we have a differing point similarly if you want to use some other find. 126 00:10:17,670 --> 00:10:19,350 Just go back here. 127 00:10:19,360 --> 00:10:20,210 Move it. 128 00:10:20,310 --> 00:10:24,120 Say you want to report to just click on this. 129 00:10:24,230 --> 00:10:36,710 It selects the font just copy this come back and pasted here so in sort of this open I'm saying you 130 00:10:36,710 --> 00:10:37,850 don't want open sounds. 131 00:10:37,880 --> 00:10:39,510 So we would just replace it here. 132 00:10:39,570 --> 00:10:47,330 Or for example we want to vote so we could just add another link here let's save it. 133 00:10:47,500 --> 00:10:57,090 Coming back to index to on a define family value so let's just be sit here coming back to the beach. 134 00:10:57,630 --> 00:10:59,860 And now let's save this. 135 00:11:00,080 --> 00:11:03,390 And as you can see are fun family changed again. 136 00:11:03,990 --> 00:11:05,150 That's all for today guys. 137 00:11:05,160 --> 00:11:09,960 If there's something that you did not understand feels you did drop a comment and we will discuss it. 138 00:11:10,020 --> 00:11:12,480 See you in the next video by Sunday get.