LearnNowOnline

Blog

Microsoft SharePoint: Custom Styles

Excerpt by Doug Ware | January 31, 2014

Themes are sufficient for scenarios that require only the application of colors, but to exercise total control over styling you must create and use custom style sheets. There are a variety of ways to include custom style sheets in your SharePoint pages. Each has advantages and disadvantages. The first is to include a standard HTML <link> element in a site's master page, in a single page, or in a control. As this is basic HTML it requires no specific knowledge of SharePoint and it works in both farm and sandbox deployments. 

The disadvantage to this approach is that it is inflexible-the link URL will not change as you change the site's location nor does it support any other SharePoint functionality like themes. Another approach is to set the AlternateCssUrl property of the SPWeb class. This technique works in both farm and sandbox deployments. When the AlternateCssUrl property contains a value, a web control present in the v4.master page, CSSLink, renders an HTML <link> element containing the value of the AlternateCssUrl property after it renders the links for the core SharePoint style sheets.

Because CSSLink renders the AlternateCssUrl after the core styles you can be certain that the browser will apply your styles last. This is important because the order in which style sheets appear in a page determines which rules apply. Because the application of AlternateCssUrl appears after the core styles, you can use it to override and replace individual rules from the core styles. You can specify any valid URL as the value of AlternateCssUrl. The only disadvantage to this approach is that it applies the target style sheet to every page in your site.

Therefore, for styles that affect only a small portion of your site, like an individual control, you may choose a more targeted approach for performance reasons. The CssRegistration web control provides the ability to add CSS to a page as needed for a given scenario. You can apply the control in both farm and sandbox solutions to any artifact that includes design time markup, i.e., pages and user controls. However, CssRegistration also includes a static method for use by Web Parts. Unfortunately, this is only available in farm deployments. CssRegistration allows the inclusion of CSS from specific locations including:

• TEMPLATE\LAYOUTS\[LCID]\STYLES
• Style Library
• Absolute path

Unless you specify an absolute path, SharePoint automatically accommodates any changes to the site's location providing flexibility that a <link> element lacks. CssRegistration also allows application of themes to style sheets whereas <link> does not. It is important to know that the CssRegistration web control does not render anything at runtime. Instead it works in conjunction with the CSSLink control.

CssRegistration and CssLink

As the name implies, the CssRegistration control registers CSS for rendering by CssLink. If multiple items register the same CSS, for example two instances of the same Web Part, CssLink renders a single link. CssLink renders registered CSS in alphabetical order or based on the optional CssRegistration After property. The After property is a new and welcome addition in SharePoint 2010. Also new is the ability to render links conditionally via the optional ConditionalExpression and RevealToNonIE properties. For example, to render a style sheet for only IE7 you can specify IE 7 as the value for ConditionalExpression. The CssLink control renders more than just the values specified by CSSRegistration. CssLink renders links in the following order:

• CssRegistrations
• Core styles
• AlternateCssUrl
• DefaultUrl (Optional CssLink property value)

This post is an excerpt from the online courseware for our Microsoft SharePoint 2010 for Developers course written by expert Doug Ware.