Adding Style Sheets (CSS) in Layout & Master Pages in SharePoint 2013

Summary : Adding References for Custom Style Sheets (CSS) in Layout and Master Pages in SharePoint 2013,Add Reference to Custom Css in Layout & Master Pages – SharePoint 2013

In this article we will talk about some Important things that you need to Consider while adding a reference to a CSS File in Layout & Master Pages of SharePoint 2013.

Because We’re So Good, Our Content gets Copied very Often.If you are not reading this on LearningSharePoint.com , please read the Original article Here for details, comments and updates on this post.



Typically, a Css reference added in thetag of the Master Page is responsible for applying all the styles on a Master Page.For Layout Pages, the styles can be added to either the default Css of Master page or into a separate CSS which will be added exclusively for Layout Pages.

Adding Style Sheet\CSS for Master Page -

In SharePoint 2013, by default, Style sheets such as corev15.css is added in the <head> tag. This default Style Sheet contains Styles that apply to various Components such as Navigation, Search etc in the Master Page. To Override these styles you can either make Changes to the default Css or add a reference to your Custom Css that will Override Styles defined in the default Css file of the Master Page. Overriding Styles with Custom Css is easy but a simple rule here to remember is that you should place the link to your Custom .css file just before the closing </head> tag, so that it overrides the default SharePoint style sheets such as corev15.css.

Adding Styles for Layout Pages –

While Creating Custom Layout pages, you might want to add exclusive CSS styles that should render just for the Pages with the Layout that you Created.In this case, the CSS reference should be added in such as way, that when the page loads, the Layout page styles are applied after styles for the master page. A simple way to do this is by adding a reference to your .css file in PlaceHolderAdditionalPageHead Content placeholder Instead of the <head> tag of the master page.

After adding a reference in PlaceHolderAdditionalPageHead Content placeholder, when a site visitor browses a page that uses this page layout, this additional page head gets merged into the end of the head of the master page—so, styles for the page layout are applied after styles for the master page.

In addition to adding the .css in the Place holder there are two more things that you need to Consider

1. An attribute ms-design-css-conversion=”no”  should also be added to the .Css reference for excluding the style sheet from theming.

2. The link to the style sheet should appear after the lines commented <!–SPM.

If you have different device channels, you likely want your page layouts to render differently for different channels. In that scenario, you include one or more device channel panels inside PlaceHolderAdditionalPageHead, and then include a link to channel-specific CSS files inside each channel panel.

You might also be Interested in –
How to Deploy SharePoint 2010 Solutions in SharePoint 2013

Original article : Here


Related Posts

Disclaimer: The contents of this site are provided “AS IS”. Information and views expressed including URL(s) and other Internet website references, may change without notice. You bear the risk of using it. SharePoint, MOSS, SharePoint 2010, SharePoint 2013 and Microsoft are trademarks of the Microsoft Corporation.Learning SharePoint only provides Tips,Tricks and Tutorials for using Microsoft SharePoint, Microsoft Office and related Softwares.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.