 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate how you can apply CSS in your lightning web component. So whenever we create a lightning web component, so in that component CSS file is not created by default. So if you want to apply CSS style sheet, so you need to create that file. So let's jump to Visual Studio Code and I will be demonstrating you. So I'm going to use this parent component, parent lightning web component. So in your Visual Studio Code, if you don't have this parent component, so you can just create. So just right click and create lightning web component, click on it, and then name you can mention as parent. And if you're following all the videos, so in previous example, we already created it, so you can just reuse that component to implement the example which I'm going to demonstrate. So here in this parent.html, I will be writing the code. So if some code is already written, you can just erase and you can write whatever I'm writing here. So here I'm going to use a simple tag or you can say element that is h1. It is for heading. So here I'm writing to do list. So this is the html file which will be rendering this h1 tag on the UI which will display to do list. Now I want to apply a CSS on this element. So what I can do, I just need to create a CSS file. So you can see whenever a component is created, so HTML, JS, and XML files are created automatically. CSS file is not created. So how to create that file? Just right click on the lightning web component and you can click on new file. And here you can write parent.css. So remember, name of CSS file should be same as your lightning web component so that all the files will be having the same name but extension will be .css. So here this file is open. Now you can simply write h1, then open the curly base and here you can write font-size colon xx-large. So basically, how many times you use h1 element in your html file? So all those h1 tags will be having this CSS applied. So now I just save this parent.css, I just save this parent.html and if I show you the XML file, so here you can see isExpose is already true and target is lightning underscore underscore home page because I'm reusing the existing component that is why it is already implemented. If you are creating this parent component for the first time, so you just need to write or modify these quotes. So now I'm going to deploy this from source to R. So I just deployed whole parent lightning web component so that we can see the result on the UI. Now from here, you can see I am on sales application and the home page is already opened. I'm just clicking on this gear icon, clicking on added base. So now I need to drag and drop that parent component on the UI. So on my UI, you can see it is already here. So name of the component is parent. So if in case on your home page it is not available, so you can see it is available here, you can just click and drag and drop it. And you can save it, go back. So here you can see to-do list is available and it is displaying in large form. Now I'm going to apply some more uses here. So I'm going to change the color of this and I want red color heading. So I just modified and saved this code and this time I'm just going to have one more H1 so that I can show you whatever CSS you write for particular elements. So it will be applied for whole elements. Those are available in your HTML file. So I wrote one more heading. Now I just saved this file and I'm again deploying this whole lightning web component from source to R. So it is successfully deployed. Now I am just refreshing the page. Okay. Changes are not applied. So sometimes it happens like you deploy the changes and in a single refresh it doesn't apply. So just do multiple refreshes and here you can see both headings are available in red color. So this way if you implement a CSS and you want to apply it on all the tags so you can just implement it like this. Now you might be thinking like what if we want to apply different CSS for both headings. So what you can do, you can implement class. So you can write dot first and here you can implement different CSS. So I'm just copy and pasting it here. Then I'm writing second. So like these are CSS classes that I will be using from the front end. So instead of red I'm using blue here. Right. And here I can write H1 class equals to first and here I'm writing class equals to second. Right. So this way if you create CSS classes. So here you need to start this selector with dot. Right. So you can see here example is also written like you can use element. Element is H1 and then class equals to first. If I come here so element class equals to second. So now for first heading I applied class first. So those styles will be applied to this heading and whatever style is available under second class so that will be applied to this heading. So again I saved this code. So this time this H1 will not be applied because we are applying this CSS so it will be given the priority. Or what you can do you can just remove it because it is not the requirement now. Or what we can say like if you have one more heading so I'm just copy pasting it and I'm removing this class. If you don't use any class so in that case that CSS will be applied which is available with H1. So here I'm going to use different colors so I'm using green color here. Right. So this will be displayed I am in so first is in red then it is in blue and it will display in green. Right. So now again I'm going to deploy source to org and I'm going to refresh the page one more time and you can see the changes. I'm in red I'm in blue I'm I'm in green. Right. So this way you can apply different CSS for different elements. So right now elements are same H1 if you have different elements so the same method you can apply. Right. So if you want to apply common CSS for that particular element no matter how many times you use it. So you can just implement this kind of CSS. But if you want to apply different CSS for same element or different element so you can just implement the classes starting with dot you can provide any name name doesn't matter whatever name you use here so you just need to use it like this H1 class equals to and that CSS style name. Right. So this way I just demonstrated you like how we can apply CSS styles on one lightning web component. Now if we go further so what what can happen like if you have parent child component so in that case child component you can use in your parent component so in that case if you have implemented CSS for parent so that CSS will apply on parent components element only if you implement CSS for child component child component so those CSS will apply to child components elements only right. So I'm going to demo you that as well. So here we have child component and here I'm going to implement child dot HTML. So here I'm writing I am child component heading right and I'm not implementing any CSS here and JavaScript is purely blank right now what I'm going to do I'm going to use this child component in parent so c-child so this way it is implemented right I don't need to pass anything to child I don't need to write anything in between these elements right so I just want to use whatever is available in the child component just after everything that is available in the parent component is rendered so first all three headings of parent component will be rendered and then this child component will be rendered right and in child components HTML you can see we have one heading so it will be rendered now we need to see whether on this h1 element the CSS which we implemented in the parent component will apply or not so I just saved both the components now first I'm going to deploy parent component and then I need to deploy child as well so I deployed both the components but on the UI I will be placing the parent component only which is already placed so I'm going to refresh it refreshing it one more time so you can see these three lines are available and they are having CSS applied but the last statement is not having any CSS applied it is like in normal form so this validates like if you implement CSS for particular components so that will be applied to that components HTML only if you implement a CSS for parents so parent components HTML can use that CSS if you implement CSS in the child component then only child components elements or HTML file can use that so now I'm going to do that so I will be implementing a CSS file for child component so I right click on child component new file child dot CSS so here I'm going to apply the CSS right so what I'm going to do I'm going to write colon horse host and inside curly braces I'm writing display colon block and background yellow right so if you write colon host so it means it will be applied to the whole element so we created this for child dot CSS like for child component and child component we are using here so that CSS will be applied on this component it won't be applied on this h1 only right it will be applied on this whole component so right now I just modified the child component so I'm going to deploy that so I'm deploying child component and I'm refreshing the page so here you can see that CSS is applied on the complete component so it is displayed block and whole component is having a background as yellow right if I implement more headings here so those will be applied that CSS automatically so I am another child heading so I just saved it and I'm going to deploy so it is being deployed from source to org and now I'm going to refresh the page so here you can see both the headings are having a background as yellow so this whole component that I'm rendering through parent component so it is having a background as yellow right so this way if you apply CSS for host so it will be applied for whole component wherever you use so if you use that component into another component so for that component that CSS will be applied right now one more thing you can do like if you don't want to implement this CSS in the child component and you want to implement the CSS in the parent component so that is also possible so you can just cut it from here and you need to move to parent CSS file and here I'm pasting it and instead of colon host I can write it like this right so it means what will happen this CSS will be applied on c-child so here in parent.html we are using this element so on this element that CSS will be applied so if you have that components name handy and you want to define that components CSS in the parent one so you can do that like this but remember it is applying for whole component that child component right now you might be thinking what if we want to apply CSS for these specific headings for child component so what we can do so for that in this child.css you need to implement the CSS classes or like for each one you can define the CSS so now I'm going to demonstrate you that thing so first of all coming here and I'm removing it from here and I'm opening child.css and here first time implementing CSS for H1 so I'm writing color colon blue violet right and copying this statement and pasting it here right so this I implemented in child.css right so in child component wherever I use the H1 element so those H1 element will be using the CSS so I just saved it now I am just deploying child component and I am deploying parent as well sorry it is by mistake I clicked on delete so you just need to click on deploy source to org so both the components are being deployed from source to org now if I come here and refresh the page one more time because it is taking time to apply the changes so you can see it is in different color right both the headings are in same color but for child different CSS is applied and for parent different CSS is applied so this way if you want to apply CSS for particular element element means this H1 whether for parent component or child component so that CSS you need to specify in that component itself but if you use a component into another component and for that component you want to apply a CSS so you have two option either you can define the CSS for that whole component in parent CSS or you can define that CSS as host in the child component CSS file right now so I hope this thing you understood so now we have one more thing that we need to understand so I am just moving to parent component html file so in parent component html you can see I am just calling this child once right now I am just going to copy it and I am pasting it three times and inside this child component I am writing like child one child two and child three and here I am writing class equals to active right so three h1 elements are available in parent.html and three times I called child component now you might be thinking how this value will be received with child component right so I am going to show you that before that let's see like parent component is having the CSS now I am just moving to child component now in child components html file here after this these headings so I am just removing this one of the heading and here I am using slot so slot is another element so what will happen this child component I am using in the parent one right child I am using in the parent and parent is passing this child one as a message so what will happen this child one message will go to that slot automatically right so this heading will be rendered and the text which we are passing through that component calling so that will be coming here within this slot automatically so we are calling child three times so three times three different headings will be rendered and these values will go to slots right so what will be the output like it is showing I am child component heading and then it will display child one then again I am child component heading and it will display child two and so on right now parent component is implemented completely child components html is implemented now we need to focus on child css so here h1 heading is defined now for host host I am writing the code like display colon block and background I am keeping as light gray right so this host css will be applied for the whole component so we are using this component here thrice so that css will be applied for whole component three times and after this I am using colon host and inside parenthesis I am writing dot active right so here I am writing background color colon light green right so from one of the this child call we are passing this class as well so if we we are passing class as active so this this will be working right if class is active so background color will be light green so for child one and child two background color it will be different and for child three background color will be different so I just saved all the files which I modified and now I am first deploying child component and then I am going to deploy parent component so everything is deployed now I am just refreshing the page so I am refreshing it one more time so you can see the outputs so I am in red I am in blue I am I am I am in green so this is because of your parent component heading elements then child is displayed three times once like I am child component heading and then child one then I am child component heading child two so this child one and child two is displayed because of slot right so if you if you call any component and pass some value so that you can receive in the slots as well right and for active we define different css in the child component so it is having light green as a background right so this is another way to define css so I just demonstrated you different different ways to apply css so in a nutshell you can remember if you implement any element in a component so for that element css should be defined in that component itself right if you use a component into another component so you cannot use child component css in the parent component right so child component css will be applied to child components element and parent components css will be applied to parent components element so this is the important thing that you need to remember and I hope you understood how we can create css files and how we can apply css in different ways thank you