Through the webpart I inject my own CSS into the Sharepoint Online site. I can do a lot to site branding this way, but I'm looking for a better way to target the sections. What I do now is that I am targeting them by their order:

.CanvasZone:nth-of-type(2) {
  // styles for second section of the page

But this way I can't change order of sections without changing CSS.

Is it possible to assign new CSS classes for selected sections without using some JS-injecting webparts? If not, are there any SPFX webparts or extensions to achieve this goal by extending configuration fields for sections OR by adding whole new section type?

  • what do you mean by section here? Commented Dec 1, 2022 at 8:56
  • @RajatSahani, when I edit a page, I can add areas called "sections" which are containers for webparts and can organize them in layouts. I can choose from many section layouts: one column, two column, one-third left, vertical section. "Section" is a name used formally in SharePoint documentation. Commented Dec 1, 2022 at 23:33

1 Answer 1


For the modern experience, using custom CSS to override SharePoint Online's out-of-the-box styles is not supported:

Customizing "modern" site pages

Please use custom themes to customise the modern experience:

SharePoint site theming

  • So called "custom themes" are an extremely limited way to customise modern SPO pages. Older Sharepoint versions didn't have such restrictions and my employer expects me to mantain old, artistic level of company branding on SP pages. Commented Dec 6, 2022 at 16:15
  • I would check out the SharePoint lookbook, there are loads of beautiful examples of SharePoint sites on there which you can achieve via configuration/custom themes: lookbook.microsoft.com for now, I would stick to the supported customisation methods (in the first link from my answer) Commented Dec 6, 2022 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.