Microsoft SharePoint and Cascading Style Sheets Primer

This isn't going to be another post about how cool style sheets are, or even how cool CSS for SharePoint is. No. This is a primer to help you to leverage cascading style sheets in SharePoint. But first, lets begin with telling you about how CSS is used in SharePoint before we get into how to work with it.

There are several CSS files that are used in various ways with SharePoint out of the box. Depending on which page you are viewing and what elements are on the page will result in different style sheets being added to the head of the page. Having said that, there is one global file that is called universally in every page of SharePoint, WSS and MOSS 2007 alike, and it is a beast of a style sheet. Yes, some of you know what I am talking about. It is CORE.CSS. How big is it? How does almost 4400 lines suit you?

The reason "Core" (as it is typically referred to) is so large is because it contains all of the global classes that are used in SharePoint for everything including the top navigation and flyout menus, the quicklaunch menu, the global links (My Links, My Sites, and Welcome "username"), and web part styling to name a few.

In addition to Core, there are also other style sheets which are very important such as CALENDAR.CSS (for the calendar of coarse) and datepicker.css (mini datepicker calendar used in some list items and the clendar list page). But where are these files? It's default location is usually installed in the STYLES folder, locate in:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\

All of the CSS files used in SharePoint are found in that location and are listed as follows:

CALENDAR.CSS
CONTROLS.CSS
CORE.CSS
datepicker.css
EwrDefault.css
HELP.CSS
HtmlEditorCustomStyles.css
HtmlEditorTableFormats.css
MENU.CSS
OWSNOCR.CSS
PORTAL.CSS
RCA.CSS
SiteManagerCustomStyles.css

Some have even suggested to use the default CSS files as a starting point for manipulating the default styling for SharePoint by saving your own copy of them to use as the basis for creating an overriding style sheet, but this can be extremely overwhelming of a task if you are new to SharePoint styling. If you are a seasoned veteran with SharePoint and won't get intimidated by all of that code then by all means, dive in. In the future I will provide a master overrides file to start off with which will contain all of the default classes and OTB (out of the box) SharePoint styling for you to play with. That was how I started out learning. But if you want to take the path of least resistance then there is are alternatives.

Surely the simplest thing would be to crack open SharePoint Designer. Designer gives you the ability to open up the master page and select elements in a WYSIWYG manner to apply styling to the site. Upon altering styles it will automatically create an alternative styles sheet and link it to the maser page where you can see your changes instantly. You can reference your own images for backgrounds and alter fonts, colors, sizes, and positions until your hearts content. But Designer is not a tool that should be approached lightly and without some forethought regarding it's effect on the SharePoint environment. It would be helpful to first educate yourself of the advantages and disadvantages of "customizing" SharePoint. I'll cover this topic in future articles. For now, lets move on to the other alternatives.

You can also create your own overriding CSS file from scratch and which you can apply to publishing sites in MOSS 2007, link directly in the head of the master page, or call though the page layout. Heather Solomon has created an amazing CSS Reference Chart that maps out a ton of the classes SharePoint uses. view the source code rendered in the page through the browser and walk the DOM, latching onto classes and IDs until you get the desired effect you are looking for.

There is two more alternatives, both of which relate to themes. Some of you may be familiar with SharePoint having a set of themes provided to you OTB but may not know how can you leverage this. One way would be to create your own theme (I'll cover this in another article in the future and link to it here). Another alternative would be to use the two CSS files that already reside in a theme folder as a starting point. Conveniently, Microsoft has done the dirty work for us and came up with these themes which already manipulate the styling on pages, lists, and the application portions of SharePoint alike. Cool, right? But where are the themes locate? Try looking here:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\

If you open up any of the provided theme folders you will see two CSS file files: theme.css and mossExtension.css. The mossExtention.css is there to control MOSS 2007 specific classes that may not be needed in WSS. In any regard, I suggest you pick a theme that is as close as possible in styling as the result you are trying to achieve, open up both of CSS files in the theme folder, and copy everything into your own custom CSS file.

I hope this give you a good starting point and a head start. Check back in the future where I'll go into more details about stying for SharePoint.