I have a Sharepoint site that is using a custom CSS file (say, custom.css) and applied it to the site's Master Page. I'm trying to modify the "Heading 1" style in the RTE to remove the bold and created a custom definition for the class .ms-rteElement-H1. This works across the site, except for on Web Part pages.

I can't understand why my custom definition is being overridden by one from the "Theme" stylesheet.

In the <head>:

<link rel="stylesheet" type="text/css" href="/company/accesstesting/_catalogs/theme/Themed/9262B884/search-7E1AFF02.css?ctag=0"/>
<link rel="stylesheet" type="text/css" href="/company/accesstesting/_catalogs/theme/Themed/9262B884/corev4-8A0ABD2F.css?ctag=0"/>
<link rel="stylesheet" type="text/css" href="/company/accesstesting/Style%20Library/Access%20Testing%20Custom%20Stylesheets/custom.css"/>

In the <body>:

<div style="" allowdelete="false" class="ms-WPBody" width="100%" id="WebPartWPQ3" haspers="false" webpartid="xxxx">
    <h1 class="ms-rteElement-H1">My Heading</h1>

Result: Firebug inspector is saying that it is taking font-weight:bold from .ms-WPBody h1 definition in corev4-8A0ABD2F.css

Maybe my understanding of CSS inheritance is wrong, but I can't think why that would take precedence over the inline class?


2 Answers 2


OK, I found the reason for the problem - CSS specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


In your "custom.css" create this entry .ms-rteElement-H1 h1 { //your stuff for your custom h1... } Notice the h1 after your ms-rteElement-H1 class name. This CSS selector will now have a higher specificity than the default one, .ms-WPBody h1 { // ms default... } As it refers to the h1 elements under the .ms-rteElement-H1 class.

Hope this helps.

Edit: Sorry should have checked what you did. the selector .ms-rteElement-H1 h1 will not apply to your h1 element. This selector specifies that the CSS will apply to all h1 descendants of the element that has the .ms-rteElement-H1 class. Modified example below would work. Given that you have a .ms-rteElement-H1 h1 { // your properties... } class defined.

    <div style="" allowdelete="false" class="ms-WPBody" width="100%" id="WebPartWPQ3" haspers="false" webpartid="xxxx">
    <div class="ms-rteElement-H1">
      <h1>My Heading</h1>

of course you can make it much cleaner and nicer, this is just an example of how you can solve it.

  • Thanks, but the heading style is provided by the Master Page and I don't want to muck around with it. I did noticed thought, that in the Sharepoint default htmleditorstyles.css it defines H1.ms-rteElement-H1 as well as just .ms-rteElement-H1. Putting my custom styles into the former works for sure, because it increases the specificity, but I don't know why that element is broken down that way and hope it doesn't result in any bugs... (can't imagine it would though, since there shouldn't be any other h1??) Aug 24, 2012 at 3:09
  • You could also overwrite .ms-WPBody h1 {} in your custom.css file. Then it would only affect pages where you include your custom CSS. No functionality should be affected by you updating text style from bold to non bold.
    – Robban1980
    Aug 24, 2012 at 3:35

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.