Edit this page

Setting Default Styles

In this help article you can learn how to define your own default styles for the editable content area of RadEditor.

RadEditor offers the ability to easily apply various styles to its content area by using the CssFiles collection to add external CSS file/s and manually specify the CSS rules that you want to be loaded in the content area.

Alternatively, you can also use the ContentAreaCssFile property for that. You can find out what are the relevant differences here—ContentAreaCssFile vs. CssFiles;

note

This approach is available only when ContentAreaMode is iframe. Using a content area rendered as a DIV element does not offer native capabilities to add external CSS files. You can find out how to decorate the DIV content area here—Decorating Div Content Area.

For example, to set the editor to use white text on a black background as well as to change the default bullet / ordered lists shapes add an EditorCssFile item to the CssFiles collection that points to an external CSS file (e.g., EditorContentArea.css):

Example 1: Adding an external CSS file to the editor's content area.

<telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server">
    <CssFiles>
        <telerik:EditorCssFile Value="~/EditorContentArea.css" />
    </CssFiles>
</telerik:RadEditor>

Example 2: The EditorContentArea.css file's contents.

body{
    color: white;
    background-color: black;
    padding:3px;
    background-image: none;
    margin: 0px;
    text-align: left;
}

ol{
    list-style-type: upper-roman;
}

ol ol{
    list-style-type: decimal;
}

ul{
    list-style-type: square;
}

ul ul{
    list-style-type: disc;
} 
tip

If you only want to stop the page style inheritance, you do not need to have a special blank stylesheet. An empty value for the CssFile will have the same effect and will avoid the unnecessary request:

ASP.NET


   <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server">
       <CssFiles>
           <telerik:EditorCssFile Value="" />
       </CssFiles>
       <Content>
          <p>para</p>
       </Content>
   </telerik:RadEditor>

More information about the list-style-type property is available in MSDN: list-style-type Attribute | listStyleType Property.

You can also style other elements in the editor's content area by using the respective global CSS selectors.

See Also