 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate how you can share CSS style rules between components. So the idea behind this demonstration is I will be creating a component named as CSS library. And in this component, I will be having two files, CSS library dot CSS and CSS library dot matter dot XML. So this component will only be having the CSS implemented. Remember, whenever you want to share CSS of a component in form of library to other components. So in that component, you don't need to implement dot HTML and dot JS file. If they are available, you just need to delete those. Otherwise your sharing of CSS won't be working fine. Then I will be creating one more component in that component. I will be having all the files and the CSS library dot CSS that will be created in separate component. I will be importing that CSS file into my component dot CSS. So actually there will be two components. One will work as a library, which will be responsible for sharing CSS to other components. And other components, you can create any number of components. And in those components, you can just import the CSS, which is available in the library. So the benefit of this is to share one CSS into another more than one components. So let's jump into visual studio code and I will be creating the components from the beginning. So I'm right clicking on the LWC folder and I'm creating new lightning web component. So I'm naming it as CSS live and you can see dot HTML and dot JavaScript files are already created. So I'm going to right click and delete those files. So you can move them to bin or trash. Sorry, I just need to delete it as well. Now I'm going to create a new file and I'm naming it as CSS live dot CSS, right? So in this file, I will be writing the CSS. So I'm writing CSS for H1 tag. And here I'm writing font size colon xx hyphen large. So this way in the CSS live component, I just created the CSS file and I just deleted dot HTML and dot JavaScript file. So this is important. If you don't delete, then your component won't be working. Now I'm going to create one more component. So I'm right clicking on LWC folder and selecting create new lightning web component. So naming it as CSS share CMP. So this will be my component, which will be fetching or importing the CSS, which I already defined in CSS live. So here I'm going to implement this HTML file. So here I am implementing H1 tag. So demo of share CSS style rules. And I'm implementing P tag as well. So inside this tag, I'm writing lightning web component demo. And above that I'm going to implement lightning card as well. So lightning card and title I'm writing as share CSS style rule demo. And I'm cutting and pasting these statements inside lightning card. So this way this share component HTML file is implemented. Now I'm going to create a new file under this component and this file name will be CSS share CMP dot CSS. And here I'm going to write at the rate import space, then single quotes C slash. Then you need to write CSS limb. So both are separate components. So that is why I'm writing C slash CSS limb. So C is basically name space where all the components are stored. And the component name is CSS slip. So I'm just importing that. And that component is only having dot CSS file. So it will be working fine. So I'm just saving it. Now I'm going to open dot XML file. And here I'm setting is exposed as true. Then I need to set the target. So targets, then target. And I'm selecting lightning homepage for this component. Opening matter dot XML for that library component. So here I'm writing is exposed as true. Then target inside target. I'm going to set target and it will be lightning homepage. So I will be placing my CSS share component on lightning homepage and it will be using the CSS slip component. So what happened? I just created two components. So one is CSS slip, which is having CSS for H1 tag. And in CSS share component, I just imported. Remember one thing. If you want to write component specific CSS in this CSS share component, so you can just write that as well below this import statement. So that CSS will be applied automatically. So I'm going to demo that as well. So first of all, I'm going to deploy both the components to the org so that I can show you whether this CSS is applied from one component to another. Through this import statement or not. So I'm going to deploy CSS slip component. So right clicking and selecting deploy source to our and I'm deploying this CSS share component as well. So it is being deployed. So if both the components are deployed successfully, as you can see both are deployed successfully. Now I can jump to our and I'm already on homepage and I'm just clicking on. Gear icon and I clicked on edit page. So now I just need to place my CSS share component. So here you can see I have this CSS share component. So I'm just placing it here. And here you can see the results are available. So at top you can see share CSS style rule demo. This is because of lightning card. It is title of that and demo of shared CSS style rule. It is H1 and it is showing in large text because we applied or implemented H1 CSS, which is having font size as XX large. And that lightning web component demo, it is because of P tag, which isn't small. Right. If I save it and go back, so you will be able to see the results on UI as well. Now my requirement is to increase the size of this P tag as well. So we have two ways. Either we can implement the CSS in the CSS share component itself. So we are not writing that into the library. So first of all, I'm going to write it here so that you can understand. Like here also we can write the CSS. So similar to this font size XX large here, we can write it. So it is giving some error. Semicolon expected is okay. So here I need to write a semicolon. Now it is correct. So at the end of import statement, you need to write semicolon so that both the styles will be separated. So now if I save it, so it is saving correctly. Now I just modified my CSS share component, which is the second component. So I'm just deploying it to org. Now if I refresh the page, so you will see the lightning web component demo will be capitalized. So sometimes you need to refresh multiple times so that changes will apply. So here you can see this is also enlarged. Now what we can do if you want to remove it from here and you want to write it in this library. So that is also possible. You can write it like this. Now H1 and P tag CSS is defined in the library component and you are importing it into CSS share component. So both the H1 and P style will be shared here automatically. Right. So if you right now we changed in both the components. So you just need to deploy both the components from source to org. And if both the components are deployed, then you can go and you can refresh your homepage and you will see there will be no change because earlier also that changed applied because we implemented CSS here in the second component. I just shifted it from here to this place. So what we can do here we can apply color. So I'm going to apply color and here I'm writing red. Okay. So that we can see the changes. So now I'm going to deploy it again. So it is deployed successfully. Now if I refresh, so you will see this lightning web component demo. This text will change into red color. So I'm refreshing it one more time so that change will be applied. So now you can see this is converted into red color. So this way I hope you understood like if your CSS is implemented in a common component in a library component having dot CSS file only, then you can just import that into other components so that you can share your CSS and along with that you can write component specific CSS as well. Right. So this way I hope you understood like how we can share CSS style rules between components in or while implementing lightning web component. So implement this and you can also demo this in your org so that you can understand how we can share one CSS component into another.