SharePoint and CSS: how to use it.

SharePoint is a heavy CSS user, which could be both seen as a curse and a blessing in the same time.  Because about all of the SharePoint UI is hard coded in the site definitions, CSS is the best way to operate the changes on the site.

A Share Point 2003 portal contains 7 different style sheets, which make up a total of 7403 lines of code and 1227 style sheet statements. Of these seven, four are hardly ever needed to be edited (menu.css, owsmac.css, owsnocr.css, paystub.css).

The other three style sheets are easy:

1. sps.css : Share Point 2003 Portal style sheet
2. OWS.css: SharePoint 2003 Portal style sheet and Windows SharePoint Services style sheet.
3. OWSPERS.css: Share Point 2003 Portal Personal Sites style sheet. (Also known as My Sites style sheet)
4. OWSPERS.css is a combination of a copy of SPS.css and OWS.css with a few tweaks. There is a way to condense the style statements in OWSPERS.css to something more manageable and without so much repetition.

SPS.css and OWS.css have some style selectors that are repeated in each. In some cases, the styles are not connected, but in others one can possibly override the second and therefore create a lot of confusion and frustration. Also, the styles may share the same selector, but have different properties in the declaration.

When opening a page, the following style sheets are pulled, in order: 1) OWS.css; 2) MENU.css; 3) SPS.css. When opening a WSS site, the file OWS.css is pulled, and afterwards the theme style sheet.

It is very important to understand the order in which the style sheets are used, because the last property that is used in a declaration of a selector will be used on the page. So, for example if you want to change something in a page, you may simply modify the theme, and therefore the settings contained in that theme style sheet would override the settings from the included CSS.