Editor / Customize Content Area

Setting Content Area Defaults

The Rich Text content area of RadEditor is an editable IFRAME element, which is a separate document that has its own CSS styles applied through the embedded in the Telerik.Web.UI.dll skin. This default content appearance in the content area can be easily overridden by setting the editor's ContentAreaCssFile property to point to your own CSS file. For example create a file named EditorContentAreaStyles.css and put a global body tag with the desired font and color settings in it, e.g.

Save the css file and set the ContentAreaCssFile property to point to it:

<telerik:RadEditor 
    ContentAreaCssFile="~/EditorContentAreaStyles.css"
    id="RadEditor1" 
    runat="server">
</telerik:RadEditor>

To style other HTML elements in the content area you need to define global css classes for them, e.g. p, div, span, table, td, td, ol, ul, li, img etc
form
{
  background-color:#efefef !important;
  border:1px dashed #555555 !important;
}
table
{
  BORDER-RIGHT: #999999 1px dashed !important;
  BORDER-BOTTOM: #999999 1px dashed !important;
}
table td
{
  font-size: 12px !important;
  PADDING: 1px !important;
  BORDER-TOP: #999999 1px dashed !important;
  BORDER-LEFT: #999999 1px dashed !important;
}
div 
{
    background-color: Green !important;
    color: Yellow !important;
    font-weight: bold !important;
}
img
{
    margin: 1px 1px 1px 1px !important;
    border: solid 1px blue !important;
}

More information on the subject is available in the following help articles:
Setting Content Area Defaults,
Default Font for Editable Content,
Setting Editor Background And Color,
Content Area Appearance Problems.

If the editor is placed in non-editable mode (Enabled="false"), then its content is outputted in a DIV element on the page. This DIV element will inherit the page styles or the styles of its parent elements, but not the styles of the EditorContentAreaStyles.css file and therefore the content might look different in edit and non-editable modes.