4 Tips on using CSS to customize the look and feel of your SharePoint site or page

If you have ever tried to customize the look and feel of a SharePoint site or page, chances are you’ve had to deal with cascading style sheets (CSS). CSS is a custom mark-up language that are referenced in your html code to apply a style to a particular object or group of objects. (That html code may be in the form of a master page, aspx page, html page, web part, or other custom control. )

Below are a list of tips or tricks you can use to make your job of styling a bit easier.

1. Style sheets are loaded in alphabetical order; last style defined will be applied.

This is important to note because SharePoint has a number of style sheets it uses as a part of their core framework.  In fact, the main SharePoint style sheet is named corev15.css (the 15 references SharePoint 2013 in this case, in earlier versions it was corev4.css, etc.).  If you name your css file abc.css, it will be loaded before corev15.css, thus rendering most of your changes useless if corev15.css overwrites them.You can get around this in two different ways.  First, you could name your style sheet so it alphabetically falls after corev15.css.  Second, you can explicitly include the “After” attribute and value to tell the code when to load the css file.  Example included below you see the SharePoint corev15 referenced, followed by customized.css which includes the “After” attribute:

<SharePoint:CssRegistration ID=“CssRegistration1” Name=“Themable/corev15.css” runat=“server” />
<SharePoint:CssRegistration ID=“CssRegistration2” Name=“/Style Library/css/customized.css” runat=“server” After=“corev15.css” />

2. Utilize the developer tools.

If you haven’t already discovered the IE developer tools, you will want to make yourself familiar with it.  Like the name suggests, the toolbar is an important tool and in any web developer’s arsenal used for identification and troubleshooting purposes.  As someone who is trying to customize SharePoint, you will likely be in the toolbar utilizing the  “DOM Explorer” tab.  This lets you explore or select elements from the source file and show the styles that are applied to the object and where the style comes from.My favorite feature is the selector button which allows you to click the object on the page to see the style.  The selector button is in the top left corner of the DOM Explorer and looks like a mouse arrow over a rectangular box (highlighted in yellow).  The style results will show in the right window.You can look through various tabs on the results window.  I use the Styles tab to verify my custom CSS file is referenced and see the inherited styles; the Computed tab to quickly look at the style without all of the inheritance clouding the actual values; the Layout tab to help view and test offset, margin, border, padding, and explicit item size; and the Changes tab to apply style changes test out styles before including them in my custom CSS file.  Any changes you make in the Changes tab will be applied immediately so you can quickly see if you applying the style to the correct element.

3. Don't be afraid to create multiple style sheets for various purposes.

The intent of this tip is not to add complexity to your solution, but rather to show you how multiple style sheets can work together to accomplish a business requirement.  We frequently talk to clients who want to be able to print things from SharePoint, without printing all of the branding surrounding the content.  We can achieve this by creating a print.css file which will basically hide all of the master page area, allowing for only the content to be printed.  In the same file, you can control things like page margins, fonts, or even inject a logo or watermark on the page.

4. You may need to utilize !important.

If you have had any experience with styles or style sheets, chances are you’ve run across “!important” trailing behind a particular setting. This parameter gives weight to setting, so even though it may not be the last style applied (remember back to the order in which style sheets are loaded), it will override the setting. SharePoint has a different page lifecycle as compared to a regular aspx page, so there are times where the only way to get a style applied, is to the add this parameter; example below:

body s4-workspace { overflow-y: scroll !important;}

If you utilize these few helpful tips, creating and applying CSS in SharePoint will be much easier to deal with.