how to apply custom css in sharepoint communication site

Question

Hi Everyone, How to apply custom css in sharepoint communication site like chaning header text size Allignment of header. Please help me. Thank you, Sowjanya.

Vikas Jha · Answer

Hi sowjanya Please have a look into this url , if it helps you to meet your business requirment. https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ Next what I have created is 1 simple application customizer . You can follow steps from this. 1. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension 2. I have add 1 css file in one of the document library or you can use site Assets. 3. Next replace the code of yourSolutionApplicationCustomize r in your yourSolutionApplicationCustomize r.ts file within src folder. export default class CssCustomizerApplicationCustomizer extends BaseApplicationCustomizer { private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css" ; @override public onInit(): Promise void > { // let cssTag : HTMLLinkElement = document.createElement( "link" ); cssTag.rel = "stylesheet" ; cssTag.type= "text/css" ; cssTag.href = this ._css; document.head.appendChild(cssTag); return Promise.resolve(); } } Then you can add all the required css code in your custom.css to meet your business requirment. Please let me know in case of any queries. Note :Please accept the reply as solution and next if you need any help just let me know.

Vikas Jha · Answer

Please accept the reply and in case of any help required please post your comments

sowjanya venkatagiri · Answer

Hi Vikas, Thank you so much for you help. i will try and let you know if i am having any issues. Thank you, Sowjanya.