When working within a SharePoint Publishing site, content editors can enter html using the WYSIWIG editor within a PublishingPageContent Field Control or a Content Editor Web Part. When a site collection is created from the Publishing Portal site definition, the field control and web part are defined with slightly different styles. By merging the style definitions together, you can achieve a unified look in both the field control and web part content entered by your content administrators. This post also describes how you can extend the style definitions so that the WYSIWIG editor applies single-line spacing instead of double-line spacing when an editor hits the carriage-return (Enter) key.

The first step is to create and configure the Alternate CSS URL associated with your Publishing site Master Page. You can either create and edit the style sheet in SharePoint Designer, upload a style sheet and then set it as the Alternate CSS URL in Site Settings, or create and deploy the style sheet as part of a Feature package and then execute code in a feature receiver or batch job to set the style sheet. Here's how it looks if you set the property in Site Settings > All Site Settings > Master Page after having uploaded the CSS file to the Style Library:

If you prefer to code it, the following pseudo-code will set the style sheet named mystyles.css to be the alternate style sheet for the Publishing Site Collection running at http://localhost:8087:

using (SPSite site = new SPSite("http://localhost:8087"))
{
    using (SPWeb rootWeb = site.RootWeb)
    {
        PublishingWeb publishingWeb = PublishingWeb.GetPublishingWeb(rootWeb);
        publishingWeb.AlternateCssUrl.SetValue("/Style Library/mystyles.css", true);
        publishingWeb.Update();
        rootWeb.Update();      
    }
}

The alternate style sheet is loaded last in the chain of style sheets on every page in a Publishing site that is displayed within the site master page. You can see this in action by doing a view-source on the page and looking at the CSS includes. The IE Internet Developer Toolbar and Firefox FireBug add-on are also helpful for seeing the styles applied during the cascade.

When creating your own custom styles for the way content is edited and rendered, the important styles to override are pageContent for the field control and ms-WPBody for the web part. Combine these definitions together in your alternate style sheet and define content tags as you would for a "regular" html page. For example, this definition will render all text in either the field control or web part using the same shared font styles (Medium Height Charcoal gray, no serifs):

.pageContent, .ms-WPBody
{
    font-family: Verdana;
    font-size: 12px;
    color: #666666;
}

As you can see above by the spacing after Heading 2 and Heading 3, the default styles are defined such that the WYSIWIG editor will insert 2 vertical lines (double-spacing) when the editor hits the Enter key. This can make it difficult to achieve precise formatting (a nice way of saying it adds too much white space). Although it's possible to use Shift-Enter to insert a single line, the downside is the same style is applied to the chunk before and the chunk after the Shift-Enter, so this approach is useless with headings. By resetting the margins for text elements displayed within our pageContent and ms-WPBody styles we can provide the user's with single line spacing and more control over vertical placement:

.pageContent, .ms-WPBody h1, h2, h3, h4, h5, h6, p, span, ul, ol, li, br
{
    margin-top: 0in;
    margin-bottom: 0in;
}