 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So in previous video you saw like how we can apply CSS in Lightning Web Component. Now in this video I'm going to demonstrate how you can implement SLDS styling hooks. So basically SLDS stands for Salesforce Lightning Design System. So if you want to customize your SLDS component styling and you want to express your brand. So you can just apply some hooks. So basically to customize an SLDS style declare a corresponding custom property in the components style sheet. Right. So whatever changes you want to do in the standard like whatever element you are using. So for example if you are using Lightning Badge. So you want to apply some different CSS as per the brand of the client. So what you can do you can just define that CSS in the CSS file of that Lightning Web Component. So in this video you will get to know like how we can implement that. So jumping to Visual Studio Code I'm going to create a new Lightning Web Component. So this Lightning Web Component will let you know how we can customize branding of the components. Base component like Lightning Button, Lightning Badge and so on. So I'm going to right click on LWC folder and creating Lightning Web Component. So this component's name will be sorry. So I created a Lightning Web Component named as using styling hooks. So it is having HTML JavaScript and XML file. So first I'm going to implement the HTML file. Right. So here I'm using Lightning Card. And its title will be using SLDS styling hooks for base Lightning components. So I'm closing it here. Now inside this Lightning Card I'm going to create a div and I'm applying a predefined class that is SLDS-M-Around-Medium. Right. So this is predefined SLDS class that I used. So we can create custom classes as well that I showed you in the previous video like how we can create custom CSS class in CSS file and how we can use that. So here it is predefined class. So now I hope whenever you use this class attribute in any of the elements so you will recognize like this is either standard CSS or custom CSS. So right now it is standard CSS because it is pre-implemented with SLDS Salesforce Lightning design system. If you define any CSS class in the CSS file then it will be known as custom CSS. Right. Now here I'm writing div and inside div I'm writing base Lightning components. Right. Now after that I'm going to use Lightning button. So Lightning button will be having a class. So SLDS-P-Around-Medium and variant equals to brand and label equals to submit. So this way I created a Lightning button. Now after this I'm going to use one more element so or you can say one more base Lightning component. So its name is Lightning badge. Its label is active. Right. And after this I'm going to use BR. So BR is for line break. Right. So inside the same div. So this is the outer div which is having classes SLDS-M-Around-Medium. So inside this I implemented one div which is showing base Lightning component and I just used two base Lightning component like Lightning button and Lightning badge. Now I'm going to use one more div. And here this div will be having the message as base Lightning components with custom styling. Right. So after this div I'm going to implement Lightning button again and this time I'm going to use a custom CSS class. So above you can see here I'm using SLDS-P-Around-Medium. So this is a standard class that I used. But here I will be using a custom class. So its name is my new style for button. Right. And along with that I'm using that predefined class as well. So this will let you know like how we can use both. So this is custom class and this is standard one. So I used both and both will work fine. So here I'm going to... Okay. So one more thing like double quotes you will be closing outside. So this is your custom class and this is SLDS-P-Around-Medium is a standard class. Right. Then variant equals to brand and label equals to submit. Right. So this way this lightning button is created. But here I applied this custom CSS as well. Now I need to apply a lightning badge. So what I'm going to do I'm just copying it from here and I'm pasting it. Right. And before this label I just need to apply the class. So class name is my new style for badge. So here we have not applied any predefined CSS. So it is having only custom CSS and this lightning badge is not having any CSS. Right. So this way you can see it is having two partitions. This is like base lightning components without custom styling. And this is a base lightning components with custom styling. Right. So this HTML file is completely implemented. Now I just need to implement the CSS file. Right. So I'm just clicking on this explorer and you can see whenever we create any lightning web component, so CSS file is not created. So you can just right click on that lightning web component and click on new file. And you can write same name as your lightning web component. So using styling hooks dot CSS. So it will create a new CSS file. So here you will be defining your custom CSS classes. So my new style for button. So this is first one. My new style for badge. So this is another class. Now inside this we need to implement the code. So if you want to customize your button or badge, so you just need to write as SDS then hyphen C hyphen button. Then hyphen brand color hyphen background and let's say I'm using orange. Then again hyphen SDS hyphen C hyphen button hyphen brand hyphen color hyphen border orange. So this way with the help of this statement, we are trying to customize the styling of lightning base component, sorry, base lightning component. Right. So these, these are like predefined properties that we are modifying. So if you know these things, you can just directly write them. If you don't know, you just need to identify like what we should write here. And accordingly you can assign the value. Right. Now here we need to implement it for badge as well. So for best we need to write SDS hyphen C hyphen badge. Then hyphen color hyphen background and then green. Then two times hyphen SDS hyphen C hyphen badge hyphen text color white. So this way like the C is basically name space, then button and badges the name of the element then here we are modifying the brand property. Here we are modifying color and text directly. Right. So these are something which are predefined that we are just modifying with the help of these custom classes. Right. So here I just implement this code. I just saved this. Right. So now both HTML and CSS file is implemented. So this component is ready to be placed on the page. But before that we just need to modify the XML file. So is exposed will be true then targets. Here I need to set the target. So target will be lightning homepage. Now I just need to deploy this component from source to R. So it is deployed successfully. Now I'm going to add it my homepage and I will be placing this component on the home base so that we can test it out. So if you go to bottom. So here you can see using style hooks component is available. I'm dragging and dropping it here, clicking on save. Moving back. And here you can see the result. So first it is showing base lightning component. So this is because of diff then submit button and active badge. So this is a button in blue and this is bad which is in white by default. Now if suppose your client is having button color as orange or bad color as green, they want this because they want to match with their existing styling. So like now you can see the difference here button color and batch background color is different right because we implemented custom styling here. So this is basically known as SLDS styling hooks. So if you use SLDS that is pre-built lightning base lightning component SLDS. So this way you can just modify it as per the pre-built sorry as per the pre-built styling of your client. So this is all about like how you can style components using lightning design system styling hooks. So I hope you understood this concept. So implement it in your system so that you can see the like how both the changes are implementing. Thank you.