For SharePoint 2007, Heather Solomon made a reference chart for all CSS elements used by SharePoint 2007 so that they could be overridden when branding a SharePoint 2010 site. Does any such reference exist for SharePoint 2010?

4 Answers 4


Here is a link to sharpoint 2010 CSS charts. Can be useful at many times. :)


  • 1
    Nice. I wasn't aware of this. Good to know!
    – Bil Simser
    Apr 9, 2011 at 12:44

For a comprehensive list see Rajesh's answer. It's pretty much a 2010 version of Heather Solomons.

This site has several of the base classes explained and displayed: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

And this site will give you a ton of CSS and branding resources (many SharePoint, some general ones) http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/

  • 1
    Useful links, just have to disagree with the first sentence (based on Rajesh's answer).
    – Christophe
    Apr 13, 2011 at 4:18

Heather has just posted the 2010 version of her famous SharePoint CSS chart.

It's online here: http://spexp.me/csschart/


I take a different approach.

I attach a local copy of coreV4.css to my masterpage AFTER the original CoreV4.css.

In the Head tag in the V4.master, find <SharePoint:CssLink runat="server" Version="4"/> Add the following after that:

<!--6sc add themes -->
 <SharePoint:CssRegistration runat="server" name="<% $SPUrl:~sitecollection/Style Library/CLIENT/CSS/NormalContentSpecificCSSFileHere.css %>" After="corev4.css"/>
 <SharePoint:CssRegistration name="/Style Library/en-us/Themable/CoreV4OverwritterHere.css" After="corev4.css" runat="server"/>
 <!-- End 6sc add themes-->

CoreV4.css contains theme comment markup and must be embeded the above way. Failure to do so will load broken CSS. Make sure the file is checked in and published.

More on Themable CSS: Link

If this is a publishing site, make sure you publish and approve the CSS file.

Also, after adding the theme comments, be sure to reapply the theme (apply a different theme and then back to the previous one). The "magic" happens as the theme is applied so if you added the lines after applying then they wouldn't show up.

I then use IE Developer Toolbar to select my class and I modify the needed CSS in the local copy of CoreV4.css through SharePoint Designer.

After I am done editing my custom CSS file, I dont load an ENTIRE CoreV4.css TWICE, I pick out my changes using a file comparison tool and export the modified selectors/attributes/and properties.

I've branded many sites using this method, as it works WITH SharePoint by only overwritting the css that SharePoint already had in place. (eliminates unbranded pages)

Here is an explanation of my process: http://eschrader.com/2010/09/23/a-great-way-to-create-sharepoint-2010-css-from-original-css/

  • But aren't you just doubling up? I also would imagine you run into some unexpected visual errors.
    – MrChrister
    Apr 13, 2011 at 23:21
  • not really. I am undoing the specific CSS that the CoreV4.css created, just like as if you had a Style guide for SP 2010. This way is just more consistant, as your CSS follows the same order as CoreV4.css's (and CSS order matters, something you dont get from a chart of CSS classes/id's). Apr 15, 2011 at 21:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.