1
00:00:00,630 --> 00:00:01,290
‫Hey, there.

2
00:00:01,320 --> 00:00:01,980
‫Welcome back.

3
00:00:02,250 --> 00:00:08,670
‫Now in this lecture, let us discuss about a few common properties in the previous few lectures we have

4
00:00:08,670 --> 00:00:13,770
‫been discussing about how to select this, how to select dark, but what to do after selecting.

5
00:00:14,040 --> 00:00:18,330
‫That's where this whole style or CFS and its property come into Badejo.

6
00:00:18,870 --> 00:00:21,800
‫So we have discussed how to select these items.

7
00:00:22,260 --> 00:00:28,800
‫But now what we can do with them, what type of property or what type of customization we can do in

8
00:00:28,800 --> 00:00:34,650
‫this lecture, we are going to discuss a mode for you because it's a thesis part, and we should have

9
00:00:34,650 --> 00:00:35,970
‫some knowledge below.

10
00:00:36,450 --> 00:00:42,330
‫So that's where we are going to discuss about common things like width and height colors.

11
00:00:42,510 --> 00:00:49,020
‫Then there will be borders, and there will be some information about phone list, styling, castle

12
00:00:49,020 --> 00:00:50,070
‫and few other things.

13
00:00:50,730 --> 00:00:54,870
‫So what I'm going to do is I'm going to first discuss about two important resource.

14
00:00:55,410 --> 00:00:57,630
‫The first one is about CSS tricks.

15
00:00:58,230 --> 00:01:01,860
‫Link will be in the resource part, so this is important.

16
00:01:01,860 --> 00:01:06,390
‫You get all types of properties that you want, actually.

17
00:01:07,230 --> 00:01:11,430
‫These are the all properties related to CSF and don't remember them.

18
00:01:11,430 --> 00:01:14,410
‫Don't even try to remember them as we grow.

19
00:01:14,430 --> 00:01:19,140
‫You will remember automatically in your memory, like if I say how to change the color, you know,

20
00:01:19,140 --> 00:01:19,410
‫right?

21
00:01:19,770 --> 00:01:21,620
‫We are going to use color tag.

22
00:01:22,140 --> 00:01:26,310
‫Similarly, if you if I ask you how to generate the I know you remember, right?

23
00:01:26,700 --> 00:01:32,100
‫So don't remember them as we move forward or as you practice, you will get knowledge about them.

24
00:01:32,550 --> 00:01:36,990
‫And if by chance you don't have any knowledge, search on Google.

25
00:01:36,990 --> 00:01:37,860
‫Don't remember.

26
00:01:38,980 --> 00:01:46,420
‫He had resources, CSIS referenced I what website you get all of different properties along with their

27
00:01:46,420 --> 00:01:48,430
‫topic name again.

28
00:01:48,460 --> 00:01:49,960
‫Don't try to remember them.

29
00:01:50,710 --> 00:01:55,220
‫So basically, all the properties in both of them are same, but that demonstration is different.

30
00:01:55,240 --> 00:01:56,890
‫That's why I'm considering both.

31
00:01:57,800 --> 00:02:03,490
‫OK, let's get back here, and the first thing I'm going to discuss is about work and hype that has

32
00:02:03,490 --> 00:02:04,210
‫already done.

33
00:02:04,720 --> 00:02:07,330
‫But there are few other properties that we can aren't like.

34
00:02:07,330 --> 00:02:10,030
‫If I wanted to change the opacity of this image.

35
00:02:10,360 --> 00:02:11,230
‫I can do that.

36
00:02:11,620 --> 00:02:14,410
‫All I could do is just jump, head and head.

37
00:02:14,410 --> 00:02:18,370
‫I can add opacity and I can use different value.

38
00:02:18,790 --> 00:02:24,160
‫But if you don't have any idea about opacity, all you can do is hover over this and click on this empty

39
00:02:24,160 --> 00:02:24,700
‫reference.

40
00:02:25,210 --> 00:02:25,810
‫Click here.

41
00:02:25,840 --> 00:02:28,540
‫You will get all the information with few examples.

42
00:02:28,900 --> 00:02:29,240
‫OK.

43
00:02:29,260 --> 00:02:30,280
‫That's one way.

44
00:02:30,730 --> 00:02:36,370
‫But you can also visit these two website, these two resources and search about opacity.

45
00:02:36,980 --> 00:02:39,790
‫We do control F and search about opacity.

46
00:02:42,060 --> 00:02:43,680
‫Here it is, if I click here.

47
00:02:45,340 --> 00:02:49,300
‫This will give me examples, different value and how things work.

48
00:02:49,630 --> 00:02:54,560
‫So I suppose if I'm when opacity one, this will be awfully opaque.

49
00:02:54,890 --> 00:02:59,080
‫Then if I am using zero, this will be a fully transparent 0.3.

50
00:02:59,080 --> 00:03:01,150
‫It will be semi-transparent and so on.

51
00:03:01,690 --> 00:03:06,700
‫So if I try to add a value of maybe 0.5, save this one.

52
00:03:06,730 --> 00:03:07,570
‫Get back here.

53
00:03:09,290 --> 00:03:11,540
‫You can see the opposite is decrease now.

54
00:03:12,140 --> 00:03:14,480
‫Similarly, we need to test other values.

55
00:03:16,880 --> 00:03:20,360
‫Now, I guess you don't need to remember about opacity, right?

56
00:03:20,720 --> 00:03:23,000
‫It should be in your memory by default now.

57
00:03:24,070 --> 00:03:26,980
‫The more we explore, the more we understand about them.

58
00:03:27,400 --> 00:03:33,460
‫Let's discuss a moat border so we can add border on our images, as well as to all the boxes that we

59
00:03:33,460 --> 00:03:34,210
‫are working with.

60
00:03:34,600 --> 00:03:42,310
‫Maybe let's select this tag that is my hair daytime jump over here, and this is my tagline.

61
00:03:42,430 --> 00:03:45,490
‫So what I'm going to do is I'm going to select my tagline.

62
00:03:46,420 --> 00:03:48,490
‫So edge to dog.

63
00:03:48,790 --> 00:03:49,720
‫My tagline?

64
00:03:52,790 --> 00:04:01,340
‫What this means, H2 with a class off the tagline, I'm only going to select them, OK, this is great

65
00:04:01,340 --> 00:04:03,470
‫and then I'm going to try out border.

66
00:04:04,010 --> 00:04:09,590
‫So how to understand about border jumper and simply signage about border?

67
00:04:10,960 --> 00:04:16,810
‫OK, there are too many things scroll down and jump on to this spot, which has border itself.

68
00:04:19,310 --> 00:04:26,570
‫Now, Border takes three value wait, which has four pixel hair style, which started hair and color,

69
00:04:26,570 --> 00:04:27,590
‫which is really hard.

70
00:04:27,860 --> 00:04:29,330
‫So you can see an example.

71
00:04:29,720 --> 00:04:35,210
‫Similarly, if you scroll down to a pixel solid, that means this color field was optional.

72
00:04:35,510 --> 00:04:37,130
‫And now we have something like this.

73
00:04:37,520 --> 00:04:38,540
‫You can try this out.

74
00:04:38,660 --> 00:04:42,500
‫But one important thing you can also set them individually.

75
00:04:42,950 --> 00:04:44,270
‫Let me discuss about this.

76
00:04:44,630 --> 00:04:46,730
‫So first here I'm going to add a border.

77
00:04:47,870 --> 00:04:53,450
‫And then the first thing I'm going to take is one big issue, which is the very tough border.

78
00:04:53,840 --> 00:04:57,680
‫Then I need to select the type which is solid and then the color.

79
00:04:58,040 --> 00:05:00,890
‫For now, I'm going to take something related to blue.

80
00:05:02,730 --> 00:05:04,290
‫And here, let me save this one.

81
00:05:04,620 --> 00:05:05,760
‫Let me get back here.

82
00:05:05,910 --> 00:05:06,750
‫Test this out.

83
00:05:07,800 --> 00:05:11,280
‫And you can see now we have a one pixel border.

84
00:05:13,120 --> 00:05:18,220
‫Now, as I discussed, we can sell these properties individually.

85
00:05:18,670 --> 00:05:26,050
‫That means I can send moderate style as well as Port O'Connor for this will be the property name and

86
00:05:26,050 --> 00:05:27,730
‫that's how their values will be.

87
00:05:28,980 --> 00:05:33,030
‫Now, this whole combined thing is known as shorthand property.

88
00:05:33,630 --> 00:05:41,370
‫What I mean with this is I can add these values individually or I can add these values together.

89
00:05:41,670 --> 00:05:49,140
‫So instead of applying this whole border thing, I can directly use border and then I can apply it.

90
00:05:50,200 --> 00:05:51,850
‫Ah, let's take one picture.

91
00:05:53,510 --> 00:05:55,610
‫And then I can apply a border style.

92
00:05:58,640 --> 00:06:04,310
‫Again, there are multiple values dash, a double room hidden than there are multiple values.

93
00:06:04,640 --> 00:06:07,940
‫Let's go for solid now and then I can apply.

94
00:06:07,940 --> 00:06:08,630
‫Maude O'Connor.

95
00:06:11,920 --> 00:06:15,520
‫And here we can apply for now, Aqua.

96
00:06:15,760 --> 00:06:17,080
‫And if I save this one.

97
00:06:18,510 --> 00:06:20,250
‫Get back here, refresh.

98
00:06:20,820 --> 00:06:22,800
‫You can see now the border closure exchange.

99
00:06:23,430 --> 00:06:25,120
‫So that's how things are going to work.

100
00:06:25,140 --> 00:06:27,440
‫I think it's pretty late, but I hope you got the idea.

101
00:06:27,480 --> 00:06:31,560
‫There is a border between the Pixel two five.

102
00:06:32,380 --> 00:06:34,290
‫See, I again.

103
00:06:34,290 --> 00:06:34,590
‫See?

104
00:06:35,250 --> 00:06:36,840
‫So that's all this is going to work.

105
00:06:36,870 --> 00:06:40,920
‫This is exactly the same value like we did with border.

106
00:06:41,100 --> 00:06:43,350
‫So border, there's going to be three values.

107
00:06:43,920 --> 00:06:45,180
‫One picks indirectly.

108
00:06:45,180 --> 00:06:46,690
‫Then we are going to pass solid.

109
00:06:46,690 --> 00:06:48,630
‫Then we are going to pass across.

110
00:06:50,190 --> 00:06:53,830
‫These both are same, but he preferred this one.

111
00:06:53,850 --> 00:06:56,670
‫If you have all these values, we prefer this one.

112
00:06:57,000 --> 00:07:00,990
‫It's not recommended to use individual values if you are going to use it.

113
00:07:01,410 --> 00:07:05,400
‫But by chance, there will be certain cases in which you just need one value.

114
00:07:05,850 --> 00:07:09,930
‫Add that specific case effort to that individual values.

115
00:07:10,110 --> 00:07:13,650
‫If you are using all three, then utilize the border itself.

116
00:07:14,490 --> 00:07:18,180
‫So I hope you got the concept of sharpening property.

117
00:07:19,780 --> 00:07:21,700
‫So that's the basic thing about water.

118
00:07:21,850 --> 00:07:23,050
‫Let me close all of them.

119
00:07:24,710 --> 00:07:28,100
‫Now, there are other properties maybe I want to add border radius.

120
00:07:28,250 --> 00:07:33,710
‫So what I can do is I can just add on next property, which is order, and then I can select Radius.

121
00:07:34,160 --> 00:07:38,630
‫And if I shoot out five Bixler, I set off one.

122
00:07:38,630 --> 00:07:41,330
‫Let me take five here and save.

123
00:07:43,550 --> 00:07:45,160
‫You can see the corners.

124
00:07:46,400 --> 00:07:52,880
‫The reason I'm taking five so we can have proper visualization, let me dig in and let me take blog

125
00:07:52,880 --> 00:07:55,640
‫for now so we can have proper visualization.

126
00:07:56,390 --> 00:07:58,850
‫Get back here, you can see the call here.

127
00:07:59,780 --> 00:08:02,390
‫So that's how this border radius is going to up.

128
00:08:02,630 --> 00:08:04,390
‫And I hope you got the idea now.

129
00:08:04,400 --> 00:08:06,530
‫You don't need to remember them as we used.

130
00:08:07,010 --> 00:08:09,500
‫You keep these dams already in your mind.

131
00:08:09,800 --> 00:08:12,950
‫So now we have understanding about border as well as border areas.

132
00:08:13,490 --> 00:08:15,420
‫Now there are few other things we can play with.

133
00:08:16,280 --> 00:08:17,330
‫So if you jump head.

134
00:08:19,780 --> 00:08:21,610
‫And if you're just such a bold font.

135
00:08:22,860 --> 00:08:29,080
‫OK, yeah, so just jump on to this one property, which is going to work with Chakan properties of

136
00:08:29,080 --> 00:08:30,040
‫multiple elements.

137
00:08:30,460 --> 00:08:37,660
‫So we have font style, we have font varying font, we on size, line height as well as one family.

138
00:08:38,260 --> 00:08:40,210
‫So let me pick up paragraph.

139
00:08:40,390 --> 00:08:41,890
‫Let me remove all of them.

140
00:08:43,060 --> 00:08:49,640
‫And instead of this, let me add a paragraph here properly, so not in safe.

141
00:08:50,530 --> 00:08:52,740
‫So this is a proper paragraph.

142
00:08:52,750 --> 00:08:53,680
‫I have not.

143
00:08:54,460 --> 00:08:55,720
‫OK, this is the paragraph.

144
00:08:56,380 --> 00:09:02,140
‫Let me try to add different properties individually and then we will understand this and property and

145
00:09:02,390 --> 00:09:04,000
‫apply to form directly.

146
00:09:04,840 --> 00:09:07,000
‫So suppose I need to pass one style.

147
00:09:07,090 --> 00:09:12,910
‫What I'm going to do is I'm going to select this fee, which is inside my now, so I can directly do

148
00:09:12,910 --> 00:09:19,390
‫that, jump and select all of the fees inside my now and then I can apply property.

149
00:09:20,050 --> 00:09:22,810
‫So here I am, applying the font style.

150
00:09:23,650 --> 00:09:26,200
‫There are multiple options currently.

151
00:09:26,200 --> 00:09:27,580
‫Let's keep this normal.

152
00:09:27,790 --> 00:09:28,780
‫OK, that's fine.

153
00:09:29,110 --> 00:09:29,980
‫Things are seen.

154
00:09:31,440 --> 00:09:37,050
‫Then we have wondering now if you don't understand any one of them such a motive.

155
00:09:37,890 --> 00:09:42,090
‫The usual thing is we don't use all these property, you basically.

156
00:09:43,440 --> 00:09:47,010
‫You are not going to utilize this want variant every now and then.

157
00:09:47,580 --> 00:09:53,310
‫Similarly, if I use want which, it will change the thickness, so you will see this won't be normal,

158
00:09:53,400 --> 00:09:58,560
‫then ball, then there are numeric values that you can pass and then a slider.

159
00:09:58,920 --> 00:10:00,720
‫So let me add one week.

160
00:10:01,200 --> 00:10:01,770
‫So here.

161
00:10:04,070 --> 00:10:11,510
‫On too big, you can pass exact value 900 will be proper bowl and lipstick.

162
00:10:12,050 --> 00:10:13,630
‫For it, I guess it's around 400.

163
00:10:13,650 --> 00:10:16,340
‫Let me take 600 so you can see the change.

164
00:10:16,790 --> 00:10:17,690
‫Get back here.

165
00:10:18,080 --> 00:10:18,690
‫You can see now.

166
00:10:18,720 --> 00:10:20,510
‫It's pretty bold now.

167
00:10:23,370 --> 00:10:25,710
‫Here I can also change the font size.

168
00:10:25,890 --> 00:10:27,930
‫So again, let me jump here.

169
00:10:28,080 --> 00:10:31,360
‫Use font size property and try to apply.

170
00:10:31,380 --> 00:10:32,460
‫I can basically pass.

171
00:10:32,460 --> 00:10:34,440
‫These are maybe values in Pixel.

172
00:10:35,100 --> 00:10:39,690
‫So for now, I'm providing by default at 16 Pixel.

173
00:10:40,020 --> 00:10:43,260
‫I'm going to take 18 pixels quad change.

174
00:10:46,460 --> 00:10:47,660
‫OK, it's increased.

175
00:10:48,710 --> 00:10:51,950
‫Then we have linotype, then we have one family.

176
00:10:54,810 --> 00:11:00,450
‫One to understand what is flying high jumper Nancy or normal by default, it's normal.

177
00:11:00,780 --> 00:11:05,010
‫You can change these to 1.6 how the Pixel or any other value.

178
00:11:05,850 --> 00:11:10,080
‫Now, this 1.6 will depend on the default size.

179
00:11:10,320 --> 00:11:14,350
‫Currently, 16 Pixel four 1.6 will be two 24.

180
00:11:14,400 --> 00:11:14,850
‫That does.

181
00:11:15,360 --> 00:11:17,940
‫So let me try this line right here.

182
00:11:18,570 --> 00:11:23,190
‫Here, let me use line height and then we try to target Pixel.

183
00:11:24,180 --> 00:11:25,170
‫Get back here.

184
00:11:26,320 --> 00:11:27,850
‫You can see it's changed now.

185
00:11:28,450 --> 00:11:34,660
‫Similarly, I can add different values like one family that are multiple families, which will change

186
00:11:34,660 --> 00:11:35,500
‫your font style.

187
00:11:35,530 --> 00:11:37,660
‫So we have these common one.

188
00:11:40,510 --> 00:11:43,510
‫These will also be visible with the army escort.

189
00:11:43,790 --> 00:11:49,540
‫So if I use this same it back here, OK, I want this change.

190
00:11:49,900 --> 00:11:53,980
‫Now remember one important thing why we have these multiple properties.

191
00:11:54,400 --> 00:11:56,680
‫So we start with this and this is not available.

192
00:11:56,690 --> 00:11:59,530
‫We jump on to the second one third one and keep on calling.

193
00:11:59,890 --> 00:12:03,760
‫Several browsers don't support several different type of front.

194
00:12:04,180 --> 00:12:11,440
‫So if by a chance none of them work, then pretty sure this will work because this is the common point

195
00:12:11,440 --> 00:12:14,500
‫which is supported by almost all browsers.

196
00:12:14,980 --> 00:12:17,350
‫So maybe you have your custom homes later on.

197
00:12:17,350 --> 00:12:22,750
‫We are going to import Google Forms, say if by any chance these Google Fonts are not supported by a

198
00:12:22,750 --> 00:12:29,020
‫browser, that means you can always and if I do backups, that's done with foreign family.

199
00:12:29,320 --> 00:12:31,630
‫Now again, remember that shorthand property.

200
00:12:31,780 --> 00:12:38,650
‫Instead of passing all these values separately, we can pass just on and then pass all the values.

201
00:12:39,130 --> 00:12:42,370
‫So here, if you hover over this, it will give you the same text.

202
00:12:42,790 --> 00:12:46,230
‫Plus we need to pass style than on median.

203
00:12:46,510 --> 00:12:52,840
‫Then on read on stretchers, size, line height on family.

204
00:12:53,020 --> 00:12:54,880
‫Anything else that we want to pass?

205
00:12:54,880 --> 00:12:55,900
‫We can pass here.

206
00:12:56,470 --> 00:13:00,610
‫Let me jump on to see us drinks now and say about font.

207
00:13:01,000 --> 00:13:02,920
‫Click here to get an example.

208
00:13:04,020 --> 00:13:06,270
‫Hey, you can see that's all we can pass.

209
00:13:07,800 --> 00:13:08,940
‫Let me copy this one.

210
00:13:10,010 --> 00:13:11,090
‫And positively.

211
00:13:14,200 --> 00:13:19,250
‫And I can remove all these content, actually, and this is going to work exactly the same way.

212
00:13:22,490 --> 00:13:25,550
‫Get back here, you can see a talking.

213
00:13:26,970 --> 00:13:33,990
‫Had it be generalized, font family is Georgia line height is one point four, then font size at 16

214
00:13:34,000 --> 00:13:40,500
‫pics, then we have font weight as well as one stretch and then we have font, meaning small gaps.

215
00:13:42,770 --> 00:13:47,570
‫You can always refer to these two reference, and you will get an idea.

216
00:13:48,560 --> 00:13:52,640
‫So there will be more information as you scroll down, you will get an idea.

217
00:13:53,570 --> 00:13:56,300
‫I hope you got the idea of these basic things.

218
00:13:56,300 --> 00:13:59,120
‫So now we covered about border as well as we want.

219
00:14:00,080 --> 00:14:02,740
‫You don't need all of them, basically.

220
00:14:02,750 --> 00:14:04,790
‫Maybe you just want to change font size.

221
00:14:04,790 --> 00:14:06,620
‫You can use that individually.

222
00:14:06,860 --> 00:14:12,640
‫But if you are changing multiple values, then I strongly recommend to utilize the font itself.

223
00:14:13,720 --> 00:14:14,410
‫That's done.

224
00:14:14,860 --> 00:14:20,780
‫We can also utilize different other values, maybe with caution, maybe with less style or maybe even

225
00:14:20,780 --> 00:14:21,280
‫text.

226
00:14:21,910 --> 00:14:24,610
‫For example, let me remove this one for now.

227
00:14:25,840 --> 00:14:26,710
‫Get back ahead.

228
00:14:27,580 --> 00:14:29,530
‫Maybe we have these attacks, right?

229
00:14:29,580 --> 00:14:36,460
‫And if I just scroll down with these attacks, dogs, you can see we have these underlines and we have

230
00:14:36,460 --> 00:14:37,690
‫these default color.

231
00:14:38,080 --> 00:14:45,520
‫So what I can do is I can jump back here and I should select these dogs so I can basically select all

232
00:14:45,520 --> 00:14:49,540
‫the attacks and default and I can set fixed decoration.

233
00:14:51,040 --> 00:14:51,460
‫None.

234
00:14:52,090 --> 00:14:55,720
‫So by default, they have decoration for on the line.

235
00:14:56,000 --> 00:14:57,540
‫So this is not no.

236
00:14:57,670 --> 00:14:59,860
‫Get back here and all the underline is gone.

237
00:15:00,560 --> 00:15:06,400
‫Now if you see the Coast Guard as they jump on to the next, they are changed.

238
00:15:07,920 --> 00:15:09,390
‫You can also customize it.

239
00:15:09,710 --> 00:15:11,370
‫We were discussing about this later.

240
00:15:11,850 --> 00:15:13,080
‫Then we have less style.

241
00:15:13,320 --> 00:15:20,900
‫If you see currently these are dots, so my jump here about last, this is style.

242
00:15:21,000 --> 00:15:22,050
‫Select this one.

243
00:15:23,430 --> 00:15:31,320
‫Now I can boss multiple information this fireplace to make this position, so if I utilized Lisk style

244
00:15:31,320 --> 00:15:33,540
‫type, I can choose these.

245
00:15:34,680 --> 00:15:40,170
‫Maybe two squared and decimal none, that means normally I can copy this one.

246
00:15:40,200 --> 00:15:46,100
‫Get back here, select all the allied dogs that I have saved this lifestyle to.

247
00:15:46,110 --> 00:15:47,460
‫None, get back here.

248
00:15:48,620 --> 00:15:49,250
‫They are gone.

249
00:15:51,340 --> 00:15:59,860
‫Similarly, I have no other properties here you can see I cannot custom link custom image for them by

250
00:15:59,860 --> 00:16:01,030
‫default, it's none.

251
00:16:01,540 --> 00:16:05,860
‫We are seeing the start, but we can also have custom image for this type.

252
00:16:06,520 --> 00:16:07,980
‫So that's how this is going to work.

253
00:16:07,990 --> 00:16:10,900
‫We are going to customize a lot more things later on.

254
00:16:11,290 --> 00:16:17,860
‫But the lecture implies that we can customize things and discuss about few common properties related

255
00:16:17,860 --> 00:16:18,880
‫to our success.

256
00:16:19,600 --> 00:16:21,190
‫I hope this lecture was helpful.

257
00:16:21,220 --> 00:16:22,330
‫Thank you for calling.

258
00:16:22,630 --> 00:16:25,030
‫Make sure to visit these two resources.

259
00:16:25,360 --> 00:16:26,530
‫Don't try everything.

260
00:16:26,530 --> 00:16:31,590
‫Just try a few common things that I did, and then I see you guys in the next one.

261
00:16:31,600 --> 00:16:33,790
‫Maybe I to discuss a few other concept.