SharePoint 2010 CSS Reset

A most difficult aspect of customizing the SharePoint 2010 interface is the arduous task of overriding the thousands of styles that Microsoft has already put in place for anything and everything that you see in the browser window. This can be a tedious task, to say the least. Largely, the SharePoint interface doesn’t rely on the cascading facet of Cascading Style Sheets. Instead, most of the elements that you see in SharePoint 2010 (like web parts, navigation menus, lists, libraries, page editor styles, etc.) all have specific CSS styles that specify font size, color, and even the font family. In a more traditional HTML/CSS structure, you begin your presentation alterations with a default style that cascades throughout the entire HTML document, like so:

body {
  background: #f5f5f5;
  color: #555;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 62.5%;
}

In SharePoint 2010, this style rule has little effect on what you see in the browser window (if you see any changes at all). You’ll find that at every step of the way, your default style is being overridden by very specific style rules like .ms-WPBody { font-size: 8pt; }. That’s right, ms-WPBody, I’m singling you out, because you are of particular personal annoyance to me. Even after specifying a default style for hyperlinks, paragraphs, lists, and images, you’ll find that Microsoft is overriding your styles at every step of the way. Let the animosity begin!

Don’t Worry, Be Happy

We could get angry about this, but instead we’ll start making some SharePoint harmony. In order to overcome the tedium that ensues at the onset of every SharePoint 2010 design project, I have created a simple snippet of CSS that is intended to reset the SharePoint interface styles to inherit from your default document styles.

First of all, I will say that the SharePoint interface is huge. Like…really huge. Epic, even. There’s little doubt in my mind that I’ve missed some Microsoft styles that could easily be included in the reset code. I have focused primarily on the publishing features of the SharePoint 2010 product (web parts and publishing pages), because that’s where you’re most likely to want to standardize things like fonts, colors, and hyperlinks. There is definitely some work to be done for things like the enterprise search center, blogs, wikis, and other site templates like the team site.

This is a draft version of the CSS reset, and I’d be happy to include any additions or improvements that you may make in your own SharePoint world. That’s enough jibber-jabber, so without further adieu, I give you the SharePoint CSS reset (queue trumpets).

CSS Reset

/*
SharePoint 2010 CSS Reset v0.1
by Kyle Schaeffer

http://kyleschaeffer.com/sharepoint/css-reset/

*/
.s4-title h1 a,.s4-title h2 a,.s4-tn li.static > .menu-item,.ms-WPBody a:link,.link-item a,.link-item a:link,.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-ql a.selected,.s4-ql ul.root ul > li > a,.ms-menutoolbar td a,a.ms-addnew,.ms-ltviewselectormenuheader .ms-viewselector a,.ms-ltviewselectormenuheader .ms-viewselectorhover a,.ms-vb a:link,.ms-vb2 a:link,.ms-vb-user a:link,.ms-linksection-level1 ul li a,.ms-WPTitle a{color:#0000ff;text-decoration:underline;}.ms-WPBody a:visited,.link-item a:visited,.s4-qlheader:visited,a.ms-addnew:visited,.ms-ltviewselectormenuheader .ms-viewselector a:visited,.ms-ltviewselectormenuheader .ms-viewselectorhover a:visited,.ms-vb a:visited,.ms-vb2 a:visited,.ms-vb-user a:visited,.ms-linksection-level1 ul li a:visited{color:#0000ff;text-decoration:underline;}.s4-title h1 a:hover,.s4-title h2 a:hover,.s4-tn li.static > a:hover,.s4-toplinks .s4-tn a.selected:hover,.ms-WPBody a:hover,.link-item a:hover,.s4-ql ul > li > a:hover,.s4-ql ul.root > li > a:hover,.s4-qlheader:hover,.ms-rtestate-field a:hover,.s4-ql ul.root ul > li > a:hover,.ms-menutoolbar td a:hover,.ms-vh a:hover,.ms-vh2 a:hover,a.ms-addnew:hover,.ms-ltviewselectormenuheader .ms-viewselector a:hover,.ms-ltviewselectormenuheader .ms-viewselectorhover a:hover,a.ms-toolbar:hover,.ms-vh2-nofilter a:hover,.ms-vh2-nofilter-notextalign a:hover,.ms-vb a:hover,.ms-vb2 a:hover,.ms-vb-user a:hover,.ms-linksection-level1 ul li a:hover,.ms-propertysheet a:hover,.ms-sectionheader a:hover,.ms-disc a:hover{color:#0000ff;text-decoration:underline;}.link-item a:active,a.ms-addnew:active,.ms-ltviewselectormenuheader .ms-viewselector a:active,.ms-ltviewselectormenuheader .ms-viewselectorhover a:active,.ms-vb a:active,.ms-vb2 a:active,.ms-vb-user a:active,.ms-linksection-level1 ul li a:active{color:#0000ff;text-decoration:underline;}.s4-ql a.selected,.ms-viewlsts .ms-vb2 > a,.ms-addnew a,.ms-selectorlink a,.ms-selectorlink a:visited,.ms-navitem a:link{color:#0000ff!important;text-decoration:underline!important;}.s4-ql a.selected:visited,.ms-viewlsts .ms-vb2 > a:visited,.ms-addnew a:visited,.ms-navitem a:visited{color:#0000ff!important;text-decoration:underline!important;}.s4-ql a.selected:hover,.ms-viewlsts .ms-vb2 > a:hover,.ms-addnew a:hover,tr.s4-itm-hover a:hover,tr.ms-itmhover a:hover,.ms-selectorlink a:hover,.ms-navitem a:hover,.ms-WPTitle a:hover{color:#0000ff!important;text-decoration:underline!important;}.s4-ql a.selected:active,.ms-viewlsts .ms-vb2 > a:active,.ms-addnew a:active,.ms-navitem a:active{color:#0000ff!important;text-decoration:underline!important;}.ms-cui-ribbon,.ms-cui-menu,.ms-siteactionsmenuinner,.ms-siteactionsmenuhover,.ms-welcomeMenu,div.ms-MenuUIPopupBody.ms-MenuUIPopupScreen,div.ms-MenuUIPopupBody.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner,div.ms-MenuUIPopupBody.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner div,.ms-cui-toolbar-toolbar,.s4-titletable,.ms-socialNotif-Container,.ms-sbplain,.ms-sbtable,body #pageStatusBar,.link-item,.link-item a,.link-item a:link,.ms-WPBody,.ms-menutoolbar td a,.ms-toolbar,.ms-listheaderlabel,.ms-viewselector,.ms-viewselectortext,.ms-viewselectorhover,.ms-vh2-nofilter,.ms-vh2-nofilter-notextalign,.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph,td.ms-vb,a.ms-addnew,.ms-ltviewselectormenuheader .ms-viewselector a,.ms-ltviewselectormenuheader .ms-viewselectorhover a,th.ms-vh,td.ms-vb,.ms-dlgTitleText,.ms-formlabel,.ms-descriptiontext,.ms-formtoolbar,select,.ms-input,.ms-long,.ms-inputuserfield,.ms-toolbarContainer,div.ms-formfieldlabelcontainer span.ms-formfieldlabel,.ms-formfieldlabelcontainer,.description,.ms-sectionheader,.ms-linksection-level1,.ms-pageinformation h3.ms-standardheader,table.ms-pageinformation,table.ms-createpageinformation,.ms-pageinformation table td,.ms-createpageinformation table td,.ms-linksectionheader,th .ms-vb,.ms-vh2-nofilter-icon,th.ms-vh2-nograd,th.ms-vh2-nograd-icon,.ms-propertysheet,.ms-formdescription,.ms-paging,.ms-listedit .ms-standardheader,.ms-listedit .ms-linksectionheader,.ms-listedit .ms-linksectionheader .ms-standardheader,.ms-listedit table.ms-pageinformation,.ms-listedit .ms-pageinformation table td,.ms-listedit .ms-propertysheet,.ms-listedit .ms-descriptiontext,.ms-SPZoneLabel,.ms-SPButton,.ms-wpadder-sectionhead,.ms-wpadder-wpname,.ms-wpadder-categoryColumn,.ms-wpadder-categoryColumn td,.ms-wpadder-items,.ms-wpadder-upload input,.ms-wpadder-upload button,.ms-wpadder-tabTable th,.ms-wpadder-description,.ms-wpadder-zoneArea button,.ms-WPTitle,.link-item-large,.link-item-large a,.link-item-large a:link,div.title-With-Background a,div.title-With-Background a:link,div.title-With-Background a:hover,div.title-With-Background a:visited,div.title-With-Background a:active,.headertitle,.headertitle a,.headertitle a:link,.level-item,.level-item a,.level-item a:link,.headertitle-band,.headertitle-band a,.headertitle-band a:link,.headertitle-large,.headertitle-large a,.headertitle-large a:link,.headertitle-small,.headertitle-small a,.headertitle-small a:link,.level-description,.ms-WPBody td,.medium,groupheader,.ms-rtelong,.ms-longer,.ms-rtelonger,.ms-radiotext,.ms-rtedropdown,.ms-lookuptypeintextbox,.ms-rtefield,table.ms-disc td,table tr td.ms-disc-bordered-noleft,.ms-formbodysurvey,.ms-gridCol,.ms-gridT1,.ms-surveyVBarT,.ms-surveyVBarTC,.ms-surveyTotal{font-family:inherit;}.ms-selectorlink a,.ms-selectorlink a:visited{font-family:inherit!important;}.ms-cui-ribbon,.ms-cui-menu,.ms-siteactionsmenu,.s4-breadcrumb-menu,.ms-cui-TabRowLeft,.ms-cui-toolbar-toolbar,.ms-MenuUILabel,.ms-MenuUILabelRtL,.ms-menuuilabelcompact,.ms-menuuilabelcompactRtl,div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner div.ms-MenuUILarge ul.ms-MenuUIUL div.ms-MenuUIULItem a.ms-MenuUIULLink,div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner div.ms-MenuUILargeRtL ul.ms-MenuUIUL div.ms-MenuUIULItem a.ms-MenuUIULLink,.s4-search input.ms-sbplain,.ms-sbplain,.s4-search input,.link-item,.link-item a,.link-item a:link,.ms-WPBody,.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-qlheader:visited,.ms-menutoolbar td a,.ms-toolbar,.ms-listheaderlabel,.ms-viewselector,.ms-viewselectortext,.ms-viewselectorhover,.ms-vh2-nofilter,.ms-vh2-nofilter-notextalign,.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph,td.ms-vb,a.ms-addnew,.ms-ltviewselectormenuheader .ms-viewselector a,.ms-ltviewselectormenuheader .ms-viewselectorhover a,th.ms-vh,td.ms-vb,.s4-titletable,.ms-dlgTitleText,.ms-descriptiontext,.ms-formtoolbar,select,.ms-input,.ms-long,.ms-dtinput,.ms-dttimeinput,.ms-inputuserfield,.ms-toolbarContainer,div.ms-formfieldlabelcontainer span.ms-formfieldlabel,.ms-formfieldlabelcontainer,.description,.ms-linksection-level1 h3,.ms-linksection-level1 ul li a,.ms-pageinformation h3.ms-standardheader,table.ms-pageinformation,table.ms-createpageinformation,.ms-pageinformation table td,.ms-createpageinformation table td,th .ms-vb,.ms-vh2-nofilter-icon,th.ms-vh2-nograd,th.ms-vh2-nograd-icon,.ms-formdescription,.ms-authoringcontrols,.ms-paging,.ms-listedit .ms-standardheader,.ms-listedit .ms-linksectionheader,.ms-listedit .ms-linksectionheader .ms-standardheader,.ms-linksectionheader,.ms-SPZoneLabel,.ms-SPButton,.ms-wpadder-categoryColumn,.ms-wpadder-categoryColumn td,.ms-wpadder-items,.ms-wpadder-upload input,.ms-wpadder-upload button,.ms-wpadder-tabTable th,.ms-wpadder-description,.ms-wpadder-zoneArea button,.ms-WPTitle,.level-item,.level-item a,.level-item a:link,.level-description,.headertitle,.ms-WPBody td,.medium,groupheader,.ms-rtelong,.ms-longer,.ms-rtelonger,.ms-radiotext,.ms-rtedropdown,.ms-lookuptypeintextbox,.ms-rtefield,table.ms-disc td,table tr td.ms-disc-bordered-noleft,.ms-gridCol{font-size:1em;}.s4-title h2,.ms-socialNotif-text,.s4-search select.ms-sbscopes,.s4-search input.ms-sbplain,.article-content,.welcome-content,.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription,.ms-toolbar,.ms-listheaderlabel,.ms-gb .ms-standardheader,.ms-standardheader,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb-tall,.ms-vb-user,.ms-pb,.ms-pb-selected td,.ms-vb,.ms-vb2,.ms-viewlsts-noitems > b,.s4-specialNavLinkList a:hover > span.ms-splinkbutton-text,.ms-vh2-nofilter,.ms-vh2-nofilter-notextalign,.ms-formlabel,.ms-descriptiontext,.ms-formtoolbar,.ms-toolbarContainer,.description,.link-item,.ms-sectionheader,.ms-linksection-level1 h3,.ms-pageinformation h3.ms-standardheader,.ms-linksectionheader .ms-standardheader,.ms-linksectionheader,.ms-pageinformation th,.ms-createpageinformation th,th .ms-vb,.ms-vh2-nofilter-icon,th.ms-vh2-nograd,th.ms-vh2-nograd-icon,.ms-vh,.ms-vh2,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph,.ms-propertysheet,.ms-pageinformation table td,.ms-createpageinformation table td,.ms-bottompaging .ms-paging,.ms-paging,.ms-listedit .ms-standardheader,.ms-listedit .ms-linksectionheader,.ms-listedit .ms-linksectionheader .ms-standardheader,.ms-listedit .ms-gb .ms-vh2-nofilter,.ms-listedit .ms-gb .ms-vh2,.tmt-name,.ms-SPZoneTitle,.ms-SPZoneLabel,.ms-rteElement-P,.level-description,.headertitle,.medium,groupheader,.ms-rtefield,table.ms-disc td{color:inherit;}.ms-viewlsts th.ms-vh2-nofilter{color:inherit!important;}.ms-cui-ribbon a:link,.ms-cui-ribbon a:visited,.ms-cui-ribbon a:hover,.ms-cui-ribbon a:active,.ms-cui-menu a:link,.ms-cui-menu a:visited,.ms-cui-menu a:hover,.ms-cui-menu a:active,.ms-siteactionsmenu > span > a,.ms-menutoolbar td a,.ms-menutoolbar td a:hover,.s4-specialNavLinkList a:hover > span.ms-splinkbutton-text,a.ms-socialNotif{text-decoration:none;}


Usage Guidelines

It’s best to place this code at the top of an external CSS style sheet that is attached to your SharePoint 2010 master page. The external CSS file should be loaded after the corev4.css file, which is where the vast majority of these styles originate from.

After placing these styles in your style sheet, you’ll notice that the vast majority of the SharePoint interface now inherits from your default styles (the body style). Using our aforementioned example and a simple blue link, you’ll notice that all elements of the SharePoint page are now standardized.
SharePoint CSS Reset in Action

Make sure you still set up normal CSS styles for things like hyperlinks (a:link, a:hover, a:visited, a:active), and my reset styles will take care of most everything else. I intentionally omitted the default colors on things like the ribbon and control drop-down menus; it gets a bit too complex to try and override everything at once, and if you’re working on a publishing site, it’s likely that your users will not be interacting with those features of the interface anyway.

Best of luck, and feel free to post any improvements to this draft version of the reset styles here.

27 comments

  1. Kyle, great job on creating this CSS reset.

  2. [...] that on SharePoint will, well, confuse SharePoint to say it mildly. Kyle Schaeffer has developed a reset css specific for SharePoint 2010 that gives front-end designers a head start in applying their custom [...]

  3. Matt Bramer says:

    Thanks for taking the time out and creating this script. Overrides are were so tedious.

    Cheers,
    Matt

  4. Matthew Koon says:

    Awesome work here Mr. S. Saving me hours every time I use it!

  5. Stefan Bauer says:

    Hi,

    you made create tool to reset all the font-size and colors and also some certain styles in SharePoint which i use from now on. Before for branding a SharePoint i used mayers css reset a lot. In case of SharePoint yours is best.

    I also have the idea to do a article about some OOCSS techniques that can be used in SharePoint. If you are interessted in a cooperation drop me a message.

    Great tool and article
    Cheers
    Stefan

  6. Joe says:

    Holy smokes that generated a lot of stuff. But it worked. Thanks for your efforts here!

  7. Jesse says:

    Thank you so much for this. I thought I’d be playing Firebug whack-a-mole for the rest of my life…

  8. Franc says:

    Great Post. Thxs. I also found this great Online Tool for generating SharePoint 2010 CSS files:
    http://www.nextflow.at/designer/designer.aspx

  9. Craig says:

    OK I’m finally going to try this out. I’ll let you know how it goes. Thanks so much for the effort! I know how tedious it can be.

    • Craig says:

      I used the chunk of css on a intranet site for a large retail company. I had mixed results. Most of the challenges I faced seemed to be inheritance issues from the web parts. I’m going to use it again on my next engagement and see if the tweaks I made on this project help.

      • Shibu says:

        I used the chunk of css on a intranet site for a large retial company. I had mixed results. Most of the challenges I faced seemed to be inheritance issues from the web parts. I’m going to use it again on my next engagement and see if the tweaks I made on this project help.Posted by on November 16, 2011 at 2:17 pm.

  10. Sideshow Bob says:

    Great stuff!

  11. Torey says:

    THis is great, worked beautifully!

  12. [...] CSSReset by Kyle Schaeffer, which is a CSS to literally “reset” the existing style in Sharepoint 2010 so that we [...]

  13. Billy Jackson says:

    I am using the v5 template that you created and I have been able to cusomize it to look almost exactly the way I want; my only dilemma is that I can’t seem to get the links/text on the global navigation bar to center. Do you have any tips for me?
    Thanks,

  14. MDL says:

    Thank you! In SP 2007 I had to go through several master page in order to complete the list of styles that you generate here with your tool.

    • ApriLiany says:

      I have a strange siauitton where some users are inheriting the standard and custom css files and some are not.I checked the source code for exactly the same page and I see that if one user logs in, I see all the css files and if another logs in, I do not.Can anyone give me some guidance??Posted by Peter on April 10, 2012 at 10:48 am.

  15. Mason says:

    You sir, are a gentleman. If you’re ever in Indianapolis, the beer is on me.

    • Laudelinno says:

      Hi,you made create tool to reset all the font-size and coolrs and also some certain styles in SharePoint which i use from now on. Before for branding a SharePoint i used mayers css reset a lot. In case of SharePoint yours is best.I also have the idea to do a article about some OOCSS techniques that can be used in SharePoint. If you are interessted in a cooperation drop me a message.Great tool and articleCheersStefanPosted by on May 8, 2011 at 2:42 am.

  16. Arfeen says:

    Great job, thanks for taking out time and actually making this.
    For those who are wondering that how to actually make it work.
    Open your masterpage and add the following line

    Guys I am still kinda beginner and please correct it if I am wrong.

  17. Arfeen says:

    Thanks for taking time out and buildind this css for us.
    For those you are wondering how to use this fantastic reset feature

    Open your master page in SPD and add following line
    [code]

    [/code]
    Guys I am kinda beginner here and please correct me if I wrong so that others can know how to do it correctly

  18. Peter says:

    I have a strange situation where some users are inheriting the standard and custom css files and some are not.

    I checked the source code for exactly the same page and I see that if one user logs in, I see all the css files and if another logs in, I do not.

    Can anyone give me some guidance??

  19. Sean says:

    Excellent tool! Thanks for putting this together. one thing I noticed is that the site actions and dropdown menus still get font family from core.css after applying these styles beneath a global font family declaration. perhaps this should get added to your generated code?… [code]DIV.ms-MenuUIPopupScreen.ms-MenuUIPopupBody DIV.ms-MenuUIPopupInner DIV {font-family:inherit;}[/code]

  20. [...] as clean as possible) CSS slate on which to start your styles, add Kyle Schaefer’s excellent CSS Reset to your master page. You pick some default settings, and CSS Reset generates a CSS file that [...]

  21. KP says:

    I think I just shed a tear when I refreshed my page with this new CSS clear code. Thank you Kyle! I thought I’d be hunting for the rest of my days… or until they release SP2015?

  22. liz says:

    this was great! I was trying to manually figure out all the headings and stumbled on your site, you saved me hours and made me look like I was a star. Thanks.

  23. Steve says:

    Great resource. Thanks for providing this!