How to add Custom Styles to your SharePoint Page?

How can you work on custom styles for your SharePoint Intranet Portal site collection? The best way to do so is by centralizing all the CSS files into a style sheet (Even a set of style sheets would do) which is referenced on the page layouts or master page. This technique will help us to build a consistent and coherent design that gives needed control for long-term updates/management of site designs.

But adding new style rules to site design won’t be practical at all times. If you have a requirement to style a particular content zone, instead of site-wide SharePoint features, it would be great to follow custom styles to a single webpage.

All right! Let’s go ahead with an HTML based graphic for styling locally:

Users with contributor access will be able to edit page-based styles – which is a nightmare! This will lead to page wreckage although you can delete the styles from the page. What needs to be done to avoid these issues is to apply set of style rules for individual pages.

Web Part - Script Editor

The easiest way to style your unique content is by using Script Editor Web Part.

To start, add the text block with HTML markup to page contents. Open the edit source mode to make sure the markup is kept complete.

The next step is to choose script editor web part from Media and Content section. Add it to the desired web zone on your page. Modify the web part title like “Dock Style” and select Edit Snippet link. Paste the CSS styles code to the Embed section. After inserting the code, the HTML text block will appear properly.

The only con for this technique is that the CSS and HTML markup can be overridden. If your page is edited by multiple users, stay away from this method!

Style Sheet Reference LinkM

The large CSS blocks can be easily stored in a traditional style sheet saved with .css extension. The file can be uploaded to your SharePoint Style Library or to Documents Library of your SharePoint Site where the graphic is to be displayed in the page.

To work on this, add Script Editor to page and paste style sheet link into the Embed area as shown below:

Editing style rules is a difficult task, however if the link gets deleted accidently from the page, the styles get restored easily. You can follow this to apply same styles to more than a page, however, multiple references are usually a sign where styles need to be integrated to the main design instead of applying it manually to individual pages. 

Content Editor Content Link

If you are worried about the complex HTML markup getting overwritten when exposed on the page, you will be able to save both CSS style rules and HTML into single .txt file. The file can be shown only on web zone, so users need to rearrange other text on the page for accommodating the new positioning.

To get started, upload the below .txt file to your document library (any sites) that can be easily referenced.

For importing the graphics into the page, add Content Editor web part to web zone and enter URL to the file in Content Link field. You can edit Appearance attributes such as Chrome, select OK and Apply and you will be able to see embedded graphics on the page.

In order to display this combo feature of styles and text markup in different site locations, content editor web part can be exported and uploaded to web part gallery.

Delete – Page based Styles

As discussed earlier, any design conflicts/issues made by custom styles can be fixed easily by removing web part displaying/linking to styles. This can be done by editing web page directly, however if styles get edited by mistake, the page might go inaccessible and can be deleted through web part page maintenance view.