Protiviti / SharePoint Blog

SharePoint Blog

November 19
Part I: Adding CSS to a Single SharePoint Web Page

The most effective and efficient way of styling a SharePoint site collection is to add style sheet references to the master page or to a specific page layout. This practice insures a consistent design that can be easily managed in one central location.

Sometimes, however, the best way to style an entire site is a cumbersome method for styling just one or two web pages. A single page display might need a few style rules that conflict with the general design style rules, but creating an entirely new page layout just for that small change would be overkill. Also, creating too many page layouts leads to bloat in your Masterpage/Page Layout gallery, confusing SharePoint authors who must select a layout from a long list of options.

Applying Local Design Styles

Fortunately, you can add style rules directly to a specific SharePoint web page using a web part. CSS rendering will assign more weight to the style rules in the page content area because they fall below your master page and page layout references. This prioritizing allows you to over-write the site design styling.

Customizing a SharePoint 2010 Web Page

Cautionary note: this approach may break if your site is updated to SP2013, so it should be used sparingly if you anticipate an upgrade.

Edit your web page and add a Content Editor Web Part to any web zone on the page. Next, edit the web part with the following configurations:

  •       Appearance: Change the title to “Page Styles” to identify the    web part’s purpose
  •       Layout: check Hidden so the web part does not display to users

Click OK to apply those changes, then click in the CEWP body to bring up the text editor options in the​ ribbon.

carmen 11.19.141.PNG

Select HTML > Edit HTML Source and enter your CSS style rules in the HTML Source field. Make sure the rules are properly nested between <style> tags.

Carmen 11.19.142.PNG

Click OK and the changes should take immediate effect. You can now save and publish your web page.

Customizing a SharePoint 2013 Web Page

Custom styling is even easier in SharePoint 2013. Edit your web page and add the Script Editor web part to any zone on the page. The only configuration needed is to change the title of the web part.

Click on the EDIT SNIPPET link in the web part body and add your CSS style rules nested inside the appropriate <style> tags.

Carmen 11.19.143.PNG
Click on Insert and your changes should take immediate effect. You can now save and publish your web page. The Script Editor web part is automatically hidden when the page is not in Edit Mode.

Removing the Styling

To remove the style rules entirely, just edit the web page and delete the web part.

Adding Styles to Multiple Pages

You can repeat these same steps on other web pages, but it is not recommended. Adding the same set of style rules to more than one page will quickly become unwieldy to manage.

For repeated use, there is another technique for adding style rules to web pages. That more advanced approach is described in Part II: AddingCSS to Multiple SharePoint Web Pages​.​

Quick Launch

© Protiviti 2020. All rights reserved.   |   Privacy Policy