How To Apply Custom Css Stylesheets To Specific Pages In Sharepoint

Cascading Style Sheets (CSS) allow you to control the style and layout of web pages without needing to edit the underlying HTML. By leveraging custom CSS in SharePoint, you can customize the look and feel of pages to align with your branding, improve usability, and enhance the user experience.

Some key benefits of using custom CSS in SharePoint include:

• Brand consistency – Custom CSS allows you to modify fonts, colors, and layouts to match your organization’s branding.
• Enhanced usability – Simplifying navigation menus, modifying text size, and adjustments to page layouts can improve site usability.
• User experience improvements – Subtle visual tweaks with CSS can greatly improve perceived performance and aesthetics.
• Pixel-perfect control – Custom CSS gives you a fine level of control over SharePoint rendering.

What is Custom CSS and Why Use It?

Cascading Style Sheets (CSS) is a stylesheet language used to control the presentation and layout of web pages. With custom CSS, SharePoint users can override the default SharePoint UI and branding to customize how pages are rendered and displayed to users.

Here are some common reasons to use custom CSS in SharePoint:

• Branding – Apply fonts, colors, and logo branding to match company guidelines.
• Usability – Improve navigation, content formatting, and layouts to enhance usability.
• Consistent experience – Create a consistent look across libraries, lists, and site pages.
• Pixel-perfect control – Tweak padding, sizes, and positioning of page elements.
• Override styles – Replace default SharePoint CSS with custom styling rules.
• Animations and interactivity – Add CSS animations, transitions, and other effects.

The key reasons most SharePoint sites leverage custom CSS are consistency, branding, and usability. Custom CSS allows sites to feel cohesive while aligning to corporate guidelines and enhancing the experience for end users.

How SharePoint Handles Stylesheets

Before applying custom CSS, it helps to understand how SharePoint loads and renders stylesheets.

Default Stylesheets

SharePoint pages include default styling rules defined in corev15.css and other CSS files. These files provide the baseline fonts, colors, spacing, and other styles making up the out-of-the-box SharePoint look and feel.

SharePoint references these default CSS files on all pages, including site pages, list and library pages, and more. Any custom CSS loaded will override and complement these default styles.

Referencing Custom CSS Files

To apply custom CSS, administrators can upload CSS files to Site Assets or Style Library document libraries. Then, add references pointing to these files in the “Alternate CSS URL” site setting.

When a user loads a page, SharePoint will append any CSS file links in this setting to the of the rendered page. This allows the referenced custom CSS to override the defaults provided by SharePoint’s core stylesheets.

Specifying Custom CSS for Specific Pages

By default, custom CSS added to the “Alternate CSS URL” site setting will apply site-wide. However, in some cases you may want CSS that targets only specific pages or sections.

Fortunately SharePoint provides a special syntax and selectors that allow scoping stylesheets to certain pages.

Using the “~sitecollection” Token

The “~sitecollection” token can force CSS to apply uniquely to the current site collection. This is useful for isolating branding CSS.

For example, reference custom.css like:

~sitecollection/Style Library/custom.css

This will apply the CSS only to the current site collection rather than sites throughout the farm.

Targeting Site Pages

CSS selectors can be used to target main site pages. For example:

/* Home page */
.ms-core-pageTitle {
  font-size: 28px;  
}

/* About page */  
.ms-core-pageTitle[title='About'] {
  color: #0094ff;
  text-align: center; 
}

This targets the page title style on the home page and about page specifically. The [title] selector applies to just the About page.

Targeting Library/List Pages

Similarly, you can target custom CSS to specific libraries or lists:

/* Documents library */
#WebPartWPQ2 .ms-listviewtable {
  color: #105cb6;
}
  
/* Contacts list */
#WebPartWPQ3 .ms-vh-div {
  background: #f2f2f2;  
}

This scopes blue text styling to the Documents library and gray background to the Contacts list.

The web part IDs (#WebPartWPQ2) ensure the CSS stays scoped to those sections.

Custom CSS Code Examples

Below are some examples of common custom CSS modifications in SharePoint.

Changing Font Styles

Fonts can be updated site-wide:

body {
  font-family: 'Arial', sans-serif;
}

Or on specific text and components:

  
h1, .ms-core-pageTitle {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;  
}

Modifying List Designs

List and library designs can be customized by targeting their CSS classes:

/* Color header bars */
.ms-viewheadertr { 
  background: #1b2d33;
  color: #ffffff;
}
  
/* Adjust spacing */
.ms-listviewtable {
  margin: 10px;  
}

/* Bold/color text */  
.ms-vh-div h3,
.ms-vh3,
.ms-vb2 {
  font-weight: bold;
  color: #105cb6;  
}

Hiding Page Elements

You can hide page components like headers or navigation with:

#suiteBarLeft {
  display: none; 
}

.ms-core-navigation {
  visibility: hidden; 
} 

Troubleshooting Guide

Sometimes custom CSS may not behave as expected. Here are some common issues and troubleshooting techniques.

Validation Errors

Code editors can identify CSS syntax errors like missing braces, invalid hex codes, etc. Validate custom CSS using code validation tools before uploading files.

CSS Not Applying

If CSS is not overriding default SharePoint styles, check that:

• The CSS file path is correctly referenced in the “Alternate CSS URL” site setting
• There are no permission restrictions on the custom CSS library or file
• The CSS selector names match SharePoint elements (inspect elements to verify)
• The CSS file is loading in the page head section as expected

Debugging Techniques

Some tips for debugging custom CSS files:

• Use browser developer tools to inspect elements, ensure CSS is loading, and see applied styles
• Break complex selectors into simpler ones during testing
• Add background colors to CSS rules to visually verify they apply
• Enable the console log in tools and check for errors

Additional Customization Options

While custom CSS allows extensive branding and style control, other options for customizing SharePoint include:

SharePoint Theming

SharePoint includes a range of predesigned site themes that can be applied for a quick style update.

JavaScript Injections

Custom JavaScript code can modify components and inject new behaviors without impacting the main SharePoint branding.

Branding with Composites

Composed looks allow swapping background images, colors, site layouts and other design elements site-wide.