SharePoint Online: How to Inject CSS using Custom Action in PowerShell?

Requirement: Add Custom CSS to SharePoint Online without editing the Master page.

PowerShell to Add CSS to SharePoint Online:

Adding custom CSS to your SharePoint Online site can help you customize the look and feel or apply branding to your site and make it more visually appealing. You can use PowerShell to add CSS to your SharePoint Online site quickly without having to hassle with the master page code. This blog post will show you how to use PowerShell to add CSS to SharePoint Online.

Assuming you have the “Custom.CSS” file uploaded to the “Site Assets” library, Here is the PowerShell to insert CSS to the SharePoint Online site.

This method works only in classic experience! For modern sites, use: How to Inject Custom CSS to Modern Sites?
#Load SharePoint CSOM Assemblies
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.dll"
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.Runtime.dll"
#Set parameter values
$CustomActionTitle = "Custom Branding CSS"
    #Get Credentials to connect
    $Cred= Get-Credential
    $Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)
    #Setup the context
    $Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)
    $Ctx.Credentials = $Credentials

    #Get Existing Custom Actions
    $Site = $Ctx.Site
    $UserCustomActions= $Site.UserCustomActions

    #Check if the CustomAction Exists already
    $CustomAction = $UserCustomActions | Where { $_.Title -eq $CustomActionTitle }

    If($CustomAction -eq $Null)
        #Add new custom action
        $UserCustomAction = $Ctx.Site.UserCustomActions.Add()

        #Insert CSS link in Head: <link rel="stylesheet" href="" type="text/css">
        $Url = ""
        $ScriptBlock = "var head = document.querySelector('head');
                        var styleTag = document.createElement('style'); 
                        var linkTag = document.createElement('link');
                        linkTag.rel = 'stylesheet'; 
                        linkTag.href = '$($Url)'; 
                        linkTag.type = 'text/css'; 

        #Set the Properties of the custom action
        $UserCustomAction.Name = $CustomActionTitle
        $UserCustomAction.Title = $CustomActionTitle
        $UserCustomAction.Location = "ScriptLink"
        $UserCustomAction.Sequence = 1000
        $UserCustomAction.ScriptBlock  = $ScriptBlock

        Write-Host -f Green "Custom Action Added Successfully!"
         write-host -f Yellow "Custom Custom Already Exists!"
Catch {
        write-host -f Red "Error Adding Custom Action!" $_.Exception.Message

This PowerShell script creates a custom action that injects the CSS tag inside the HEAD tag! To verify, go to the console tab of the Firebug or IE Dev tools, hit “head” and the HTML markup should include “<link rel=”stylesheet” href=”” type=”text/css”>”

To add custom CSS or JavaScript to a modern page in SharePoint Online, use the Modern Script editor solution! Reference: How to Add Custom CSS to SharePoint Online Modern Page?

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

One thought on “SharePoint Online: How to Inject CSS using Custom Action in PowerShell?

  • Hello, my powershell said my action was successful, however, i can’t find it in the Head. Any suggestions?


Leave a Reply

Your email address will not be published. Required fields are marked *