SharePoint Font Colour and Font Family CSS Reset

One of the most frustrating things I’ve found while customizing Microsoft’s Office SharePoint Server 2007  (MOSS for short) sites are the hundreds of colour and font family declarations spanning across multiple CSS files.  As soon as I think I’ve changed all the link colours to the same hex code, I realize that there is yet another declaration that I’ve missed.  Or when I raise my hands in victory because I’m convinced that I have managed to make Verdana the default font-family, I’ll find a little blurb in Tahoma taunting me.

In an effort to relieve this frustration, I’ve gone through the various CSS StyleSheets used in MOSS and compiled all of the text colours, link colours and link hover colours along with the font-family declarations into one CSS file.  The idea is that I am giving myself a consistent base to work with and then I begin calling out the elements that I need to have different colours or font faces on an as needed basis. 

Now, what’s the best way to use this file?  It depends on how you are customizing your MOSS site.  The two methods that I cover here are using an external CSS file or a Theme.  For more information on creating Themes or Custom CSS files for styling MOSS sites I highly recommend Heather Solomon’s blog :

Use an external StyleSheet to override the default MOSS styles

1. Create your external StyleSheet 
2. Add the contents of this file to the top of your StyleSheet or import them using the import rule
3. Set your default values for text colour, link colour, link hover colour and font family
4. Continue with the rest of the styling as you normally would, calling out the elements that you want to override

Use a theme to style the MOSS site

1. Place the contents of the StyleSheet at the top of your theme’s StyleSheet or import them using the import rule
2. Remove any colour declarations that may exist within the theme so that you are in fact using the defaults
3. Set your default values for text colour, link colour, link hover colour and font family
4. Continue with the rest of the styling as you normally would, calling out the elements that you want to override

Please keep checking back for any updates to the StyleSheet.  I’ll continually be updating it until I feel that I’ve created a StyleSheet that essentially overrides the MOSS variations to give the front-end MOSS developers a consistent base for them to start their MOSS styling. 

Get your copy of the amazing imason Font and Colour Reset Stylesheet