 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this module, I'm going to discuss how you can apply CSS and components. Let's understand how we can apply CSS and components. So CSS basically stands for cascading style sheet. So if you want to use your style file, so if I go and create new lightning component. So I'm naming it as CSS demo. And if I create any component, so here you can see we have a style file. So in this module, you will understand how we can use this style file. So I'm going to demonstrate this. So basically, if you create any other component and let's say I'm using a dev and inside dev. I'm going to write hello lightning, right? So this way this div is created. And if I open any existing application, so I'm just opening demo app. And here I'm placing CSS demo. And if I preview it, so here you can see hello lightning is displayed. Now what I'm going to do, I'm going to use a class here. Right. And in this class, I'm just writing white. So name of class is white. Right. And if I go here in this dot CSS. So basically, if you write dot like dot this is already available. And if you don't write any class here and you directly write, let's say background. Hello, and great. And I'm just removing this as well. Right. So what will happen? This CSS will be applied to the whole component. If I go here and refresh the page. So here you can see this gray color is applied on the dip. Right. So in this component, we just implemented the dip. So on the whole dip, this color is applied. Right. Because it is written in this along with dot this. So dot this basically refers to the component. Now if I write dot this dot white. And if I use it here as well. So what happens? So for this dip, like where classes white. So dot this will be applied for other tags and for the tags where you used class as white. So this will be applied. So if I copy this and paste it here and change the color to white. So you will see the difference. So if I go here and do a refresh. So you can see now it is in white color. Right. Now, if I create one more dip, let's say I write hello aura and I am just removing this class. So what will happen? For this dip background color will be white, but for this dip background color will be great because we have not applied any class here. So if I go here and refresh, so you will see the changes. So hello lightning background color is white and hello aura background color is great. Okay. So this way it is implemented now. Let's suppose I created an ordered list tag and inside this, I'm going to use list items. So here I'm going to use the colors. So I'm using class red and next will be my background is red. Then again, list item class equals to green. And here I'm writing my ground is green. Right. So this way these two list items are available. Okay. So this is our main tag UI and this is the sub tag of this UL unordered list. Right. So if you want to apply CSS on this class, which is the sub tag of particular time, or you can say like it's part. So what you can do, you can just copy this. And if you want to apply that, so you need to just provide a space before this dot. It is important. Right. So for this list item, you need to provide the space because it is not the main tag. Right. Now here you can write classes red and color will be red. And if I copy this, so I can paste it one more time for being and I'm saving this. Now I'm coming here and doing a refresh. So here you can see this list item is coming in red and another one is coming in the green. So this way if you provide the space, then it will work. Let's see what happens if I don't provide space. So I just removed the space from this red one. So if I go here and do a refresh. So you can see that red color is not applied. Gray color is applied because in this case. This you an ordered list is not having any class. And the CSS is assuming like this red glasses related to the main tag, not to the tag, which is written inside a particular tag. So if you have any sub tags, so in that case, you need to use this space, then only it will be applicable. I hope with this example, you understood like for top level tags, you don't need to use space, but the tags which are available under the top level tags. So you need to use the space, then only your CSS will be working properly. So this way you can use any class name and accordingly you can provide the CSS. And in a particular block, you can have like multiple properties. So if I want to apply color, so for this, I am applying color as red. If I save it and do a refresh. So you can see big down like color is red for all all the tags because I applied it for this. And here only background color is applied, not the foreground color. So that red color is applied for all. So instead of applying it for all, so you can remove it. And if let's say you want to apply it for wherever class white is used. So now if you refresh, so red color is applied only on this hello lightning, not for others. So dot this is for the whole component. And if you want to use CSS for particular tags. So in that case, you can create a class and don't forget to decide like whether it is the top level tag or it is the tag which is under the top level tag. So accordingly you can just remove the space or you can use the space. So this is all about how to use CSS in the components which are built with the help of our framework.