Custom Styles for SharePoint 2010 Rich Html Field

A typical requirement from a client is to be able to incorporate their own custom styles for the Rich Html Field. Allowing their public relations department to apply nice text formating for paragraphs with some Comic Sans Hotness might not be the best practice in here, so let’s be careful out there. The best scenario is only to allow custom formatting for headings, paragraphs and maybe a few different table styles but let’s go!
First, open up the page layout containing the HTML editor and add PrefixStyleSheet property for the RichHtmlField:

<PublishingWebControls:RichHtmlField
    id="Content"
    FieldName="PublishingPageContent"
    PrefixStyleSheet="my-rte"
    runat="server"
/>

Now, the default value for the property is ms-rte. We are going to redefine this to my-rte. Do not use any uppercase characters in the property value as apparently those wont work. Deploy the page and open it in edit mode to see the desired effect. The styles collections are now empty in the Ribbon.
We now have to define our own styles prefixed with the string my-rte. I’d suggest that you put these style declarations in a separate stylesheet to avoid javascript errors caused by complicated and hard-to-parse stylesheets. Let’s name our new stylesheet rte.css and add a few declarations there.

The Markup Collection

Let’s say I want to have an option to add a level 1 heading or an H1 tag for the given page via the Markup Styles dropdown list:
Step 1 – introduce the tag:

H1.my-rteElement-H1
{
  -ms-name:"my level 1 heading";
}

Step 2 – add the styles to the tag:

.my-rteElement-H1
{
    font-size: 150%;
}

Save the rte.css and make a reference for it in your master page, page layout or even use an alernative css. If you want your clients to be able to edit the styles themself, you could upload the rte.css in the Style Library and reference it there.
I have saved the file directly in the 14-hive /_layouts/my/ -folder and use a quick reference in the master page:

<SharePoint:CssRegistration
    ID="CssRegistration1"
    runat="server"
    Name="/_layouts/my/rte.css"
/>

Deploy and reload the page, fire up the edit mode and navigate to the ribbon where you can see your new style in action.

Adding new elements is easy once you get to know the logic. Here’s an example of a parapgraph with nice rounded corners and superb font on modern browsers (note that I have combined the introduction and style values in one declaration):

P.my-rteElement-P
{
    -ms-name:"My CSS Rounded Paragraph";
    background: #808;
    color: #fff;
    border: 3px solid #f0f;
    text-transform: uppercase;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
    -moz-box-shadow: 0 0 20px #000;
    -webkit-box-shadow: 0 0 20px #000;
    padding: 10px;
    font: bold 2em Comic Sans MS;
}

The Styles Collection

The Styles collection can be populated with the same way by changing the Element-suffix into Style ie.:

.my-rteStyle-MePinky
{
  -ms-name:"I am pink";
  color: #f0f;
}

Link to Article