‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us discuss about a few common properties in the previous few lectures we have
‫been discussing about how to select this, how to select dark, but what to do after selecting.
‫That's where this whole style or CFS and its property come into Badejo.
‫So we have discussed how to select these items.
‫But now what we can do with them, what type of property or what type of customization we can do in
‫this lecture, we are going to discuss a mode for you because it's a thesis part, and we should have
‫some knowledge below.
‫So that's where we are going to discuss about common things like width and height colors.
‫Then there will be borders, and there will be some information about phone list, styling, castle
‫and few other things.
‫So what I'm going to do is I'm going to first discuss about two important resource.
‫The first one is about CSS tricks.
‫Link will be in the resource part, so this is important.
‫You get all types of properties that you want, actually.
‫These are the all properties related to CSF and don't remember them.
‫Don't even try to remember them as we grow.
‫You will remember automatically in your memory, like if I say how to change the color, you know,
‫right?
‫We are going to use color tag.
‫Similarly, if you if I ask you how to generate the I know you remember, right?
‫So don't remember them as we move forward or as you practice, you will get knowledge about them.
‫And if by chance you don't have any knowledge, search on Google.
‫Don't remember.
‫He had resources, CSIS referenced I what website you get all of different properties along with their
‫topic name again.
‫Don't try to remember them.
‫So basically, all the properties in both of them are same, but that demonstration is different.
‫That's why I'm considering both.
‫OK, let's get back here, and the first thing I'm going to discuss is about work and hype that has
‫already done.
‫But there are few other properties that we can aren't like.
‫If I wanted to change the opacity of this image.
‫I can do that.
‫All I could do is just jump, head and head.
‫I can add opacity and I can use different value.
‫But if you don't have any idea about opacity, all you can do is hover over this and click on this empty
‫reference.
‫Click here.
‫You will get all the information with few examples.
‫OK.
‫That's one way.
‫But you can also visit these two website, these two resources and search about opacity.
‫We do control F and search about opacity.
‫Here it is, if I click here.
‫This will give me examples, different value and how things work.
‫So I suppose if I'm when opacity one, this will be awfully opaque.
‫Then if I am using zero, this will be a fully transparent 0.3.
‫It will be semi-transparent and so on.
‫So if I try to add a value of maybe 0.5, save this one.
‫Get back here.
‫You can see the opposite is decrease now.
‫Similarly, we need to test other values.
‫Now, I guess you don't need to remember about opacity, right?
‫It should be in your memory by default now.
‫The more we explore, the more we understand about them.
‫Let's discuss a moat border so we can add border on our images, as well as to all the boxes that we
‫are working with.
‫Maybe let's select this tag that is my hair daytime jump over here, and this is my tagline.
‫So what I'm going to do is I'm going to select my tagline.
‫So edge to dog.
‫My tagline?
‫What this means, H2 with a class off the tagline, I'm only going to select them, OK, this is great
‫and then I'm going to try out border.
‫So how to understand about border jumper and simply signage about border?
‫OK, there are too many things scroll down and jump on to this spot, which has border itself.
‫Now, Border takes three value wait, which has four pixel hair style, which started hair and color,
‫which is really hard.
‫So you can see an example.
‫Similarly, if you scroll down to a pixel solid, that means this color field was optional.
‫And now we have something like this.
‫You can try this out.
‫But one important thing you can also set them individually.
‫Let me discuss about this.
‫So first here I'm going to add a border.
‫And then the first thing I'm going to take is one big issue, which is the very tough border.
‫Then I need to select the type which is solid and then the color.
‫For now, I'm going to take something related to blue.
‫And here, let me save this one.
‫Let me get back here.
‫Test this out.
‫And you can see now we have a one pixel border.
‫Now, as I discussed, we can sell these properties individually.
‫That means I can send moderate style as well as Port O'Connor for this will be the property name and
‫that's how their values will be.
‫Now, this whole combined thing is known as shorthand property.
‫What I mean with this is I can add these values individually or I can add these values together.
‫So instead of applying this whole border thing, I can directly use border and then I can apply it.
‫Ah, let's take one picture.
‫And then I can apply a border style.
‫Again, there are multiple values dash, a double room hidden than there are multiple values.
‫Let's go for solid now and then I can apply.
‫Maude O'Connor.
‫And here we can apply for now, Aqua.
‫And if I save this one.
‫Get back here, refresh.
‫You can see now the border closure exchange.
‫So that's how things are going to work.
‫I think it's pretty late, but I hope you got the idea.
‫There is a border between the Pixel two five.
‫See, I again.
‫See?
‫So that's all this is going to work.
‫This is exactly the same value like we did with border.
‫So border, there's going to be three values.
‫One picks indirectly.
‫Then we are going to pass solid.
‫Then we are going to pass across.
‫These both are same, but he preferred this one.
‫If you have all these values, we prefer this one.
‫It's not recommended to use individual values if you are going to use it.
‫But by chance, there will be certain cases in which you just need one value.
‫Add that specific case effort to that individual values.
‫If you are using all three, then utilize the border itself.
‫So I hope you got the concept of sharpening property.
‫So that's the basic thing about water.
‫Let me close all of them.
‫Now, there are other properties maybe I want to add border radius.
‫So what I can do is I can just add on next property, which is order, and then I can select Radius.
‫And if I shoot out five Bixler, I set off one.
‫Let me take five here and save.
‫You can see the corners.
‫The reason I'm taking five so we can have proper visualization, let me dig in and let me take blog
‫for now so we can have proper visualization.
‫Get back here, you can see the call here.
‫So that's how this border radius is going to up.
‫And I hope you got the idea now.
‫You don't need to remember them as we used.
‫You keep these dams already in your mind.
‫So now we have understanding about border as well as border areas.
‫Now there are few other things we can play with.
‫So if you jump head.
‫And if you're just such a bold font.
‫OK, yeah, so just jump on to this one property, which is going to work with Chakan properties of
‫multiple elements.
‫So we have font style, we have font varying font, we on size, line height as well as one family.
‫So let me pick up paragraph.
‫Let me remove all of them.
‫And instead of this, let me add a paragraph here properly, so not in safe.
‫So this is a proper paragraph.
‫I have not.
‫OK, this is the paragraph.
‫Let me try to add different properties individually and then we will understand this and property and
‫apply to form directly.
‫So suppose I need to pass one style.
‫What I'm going to do is I'm going to select this fee, which is inside my now, so I can directly do
‫that, jump and select all of the fees inside my now and then I can apply property.
‫So here I am, applying the font style.
‫There are multiple options currently.
‫Let's keep this normal.
‫OK, that's fine.
‫Things are seen.
‫Then we have wondering now if you don't understand any one of them such a motive.
‫The usual thing is we don't use all these property, you basically.
‫You are not going to utilize this want variant every now and then.
‫Similarly, if I use want which, it will change the thickness, so you will see this won't be normal,
‫then ball, then there are numeric values that you can pass and then a slider.
‫So let me add one week.
‫So here.
‫On too big, you can pass exact value 900 will be proper bowl and lipstick.
‫For it, I guess it's around 400.
‫Let me take 600 so you can see the change.
‫Get back here.
‫You can see now.
‫It's pretty bold now.
‫Here I can also change the font size.
‫So again, let me jump here.
‫Use font size property and try to apply.
‫I can basically pass.
‫These are maybe values in Pixel.
‫So for now, I'm providing by default at 16 Pixel.
‫I'm going to take 18 pixels quad change.
‫OK, it's increased.
‫Then we have linotype, then we have one family.
‫One to understand what is flying high jumper Nancy or normal by default, it's normal.
‫You can change these to 1.6 how the Pixel or any other value.
‫Now, this 1.6 will depend on the default size.
‫Currently, 16 Pixel four 1.6 will be two 24.
‫That does.
‫So let me try this line right here.
‫Here, let me use line height and then we try to target Pixel.
‫Get back here.
‫You can see it's changed now.
‫Similarly, I can add different values like one family that are multiple families, which will change
‫your font style.
‫So we have these common one.
‫These will also be visible with the army escort.
‫So if I use this same it back here, OK, I want this change.
‫Now remember one important thing why we have these multiple properties.
‫So we start with this and this is not available.
‫We jump on to the second one third one and keep on calling.
‫Several browsers don't support several different type of front.
‫So if by a chance none of them work, then pretty sure this will work because this is the common point
‫which is supported by almost all browsers.
‫So maybe you have your custom homes later on.
‫We are going to import Google Forms, say if by any chance these Google Fonts are not supported by a
‫browser, that means you can always and if I do backups, that's done with foreign family.
‫Now again, remember that shorthand property.
‫Instead of passing all these values separately, we can pass just on and then pass all the values.
‫So here, if you hover over this, it will give you the same text.
‫Plus we need to pass style than on median.
‫Then on read on stretchers, size, line height on family.
‫Anything else that we want to pass?
‫We can pass here.
‫Let me jump on to see us drinks now and say about font.
‫Click here to get an example.
‫Hey, you can see that's all we can pass.
‫Let me copy this one.
‫And positively.
‫And I can remove all these content, actually, and this is going to work exactly the same way.
‫Get back here, you can see a talking.
‫Had it be generalized, font family is Georgia line height is one point four, then font size at 16
‫pics, then we have font weight as well as one stretch and then we have font, meaning small gaps.
‫You can always refer to these two reference, and you will get an idea.
‫So there will be more information as you scroll down, you will get an idea.
‫I hope you got the idea of these basic things.
‫So now we covered about border as well as we want.
‫You don't need all of them, basically.
‫Maybe you just want to change font size.
‫You can use that individually.
‫But if you are changing multiple values, then I strongly recommend to utilize the font itself.
‫That's done.
‫We can also utilize different other values, maybe with caution, maybe with less style or maybe even
‫text.
‫For example, let me remove this one for now.
‫Get back ahead.
‫Maybe we have these attacks, right?
‫And if I just scroll down with these attacks, dogs, you can see we have these underlines and we have
‫these default color.
‫So what I can do is I can jump back here and I should select these dogs so I can basically select all
‫the attacks and default and I can set fixed decoration.
‫None.
‫So by default, they have decoration for on the line.
‫So this is not no.
‫Get back here and all the underline is gone.
‫Now if you see the Coast Guard as they jump on to the next, they are changed.
‫You can also customize it.
‫We were discussing about this later.
‫Then we have less style.
‫If you see currently these are dots, so my jump here about last, this is style.
‫Select this one.
‫Now I can boss multiple information this fireplace to make this position, so if I utilized Lisk style
‫type, I can choose these.
‫Maybe two squared and decimal none, that means normally I can copy this one.
‫Get back here, select all the allied dogs that I have saved this lifestyle to.
‫None, get back here.
‫They are gone.
‫Similarly, I have no other properties here you can see I cannot custom link custom image for them by
‫default, it's none.
‫We are seeing the start, but we can also have custom image for this type.
‫So that's how this is going to work.
‫We are going to customize a lot more things later on.
‫But the lecture implies that we can customize things and discuss about few common properties related
‫to our success.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫Make sure to visit these two resources.
‫Don't try everything.
‫Just try a few common things that I did, and then I see you guys in the next one.
‫Maybe I to discuss a few other concept.