Hey guys, today in this post we are going to learn about How to add custom style css and change the text color & text size through JavaScript in lightning web component – LWC.
Files we used in this post example
lwcApplyCss.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
lwcApplyCss.js | Lightning Web Component JavaScript | It is holding onclick functionality for add custom style CSS to change the text color and text size. |
lwcApplyCss.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
lwcApp.app | Lightning Application File | It is used for call the component and preview on browser.. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : lwcApplyCss.html
SFDX:Lightning Web Component >> New >> lwcApplyCss.html
lwcApplyCss.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 |
<template> <lightning-card title="Apply Custom Style CSS in LWc through Javascript" custom-icon="custom:icon15"> <div class="containerOver slds-p-around--medium slds-m-horizontal--medium" > <h1>Easy to learn Step-by-Step online tutorial from www.w3web.net</h1> <p class="listItem">Hi welcome to online tutorial www.w3web.net</p> <p class="listItem">w3web.net is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much more…</p></br></br> <div class="slds-text-align--center"><lightning-button label="Change Styling CSS" class="cssStyleBtn" variant="brand" onclick={customStyleChange}></lightning-button></div> </div> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : lwcApplyCss.js
SFDX:Lightning Web Component >> New >> lwcApplyCss.js
lwcApplyCss.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { LightningElement } from 'lwc'; export default class LwcApplyCss extends LightningElement { renderedCallback(){ this.template.querySelector("h1").style.color="blue"; this.template.querySelector("h1").style.textAlign="center"; this.template.querySelector("h1").style.fontSize="16px"; this.template.querySelector(".containerOver").style.boxShadow="0px 0px 5px #0007ea"; this.template.querySelectorAll(".listItem").forEach(item=>{ Object.assign(item.style, {color:'green',textAlign:'center',fontSize:'15px'}); }); } customStyleChange(event){ this.template.querySelector("h1").style.fontSize="22px"; this.template.querySelector("h1").innerHTML="Easy to learn LWC tutorial from w3web.net"; this.template.querySelector(".containerOver").style.boxShadow="0px 0px 5px #ff0000"; this.template.querySelectorAll(".listItem").forEach(item=>{ Object.assign(item.style, {color:'red',textAlign:'center',fontSize:'18px'}); }); } } |
Step 3:- Create Lightning Web Component : lwcApplyCss.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcApplyCss.js-meta.xml
lwcApplyCss.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle> |
Start Lightning Application
Step 4:- Create Lightning Application : lwcApp.app
From Developer Console >> File >> New >> Lightning Application
lwcApp.app [Component Application File]
1 2 3 |
<aura:application extends="force:slds"> <c:lwcApplyCss/> </aura:application> |
Further post that would you like to learn in LWC
Thanks for this custom style css blog. I am happy to read this blog. I was helpful for me for boosting my knowledge.
Thanks for the best knowledge of custom style of CSS. Does good hosting matters on our websites.
Thanks for the technical information regarding CSS. I want to get more infortaion.
I like your blog
I like your blog
Excellent blog. Found very useful.