# Using ContentAreaCssFile Property

This article examines the main purpose of the **ContentAreaCssFile** property, its usage and the concepts about it.

Here is a list with the sections in this article:

1. [Concepts](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/using-contentareacssfile-property#concepts)
2. [Basic Usage](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/using-contentareacssfile-property#basic-usage)
3. [Show/Hide Border tool](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/using-contentareacssfile-property#showhide-border-tool)

## Concepts

At a first glance the approach below will give you the same results as if the [CssFiles collection](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/set-defaults) is used but its concept is to provide user-friendly styling for creating the content, which is not part of the styling of the place where the content will be used. Here is a list of the main goals of the **ContentAreaCssFile** features:

1. Most important: Using the **ContentAreaCssFile** property will not prevent styles from the main page to decorate the content area of **RadEditor**;
2. All styles from the **ContentAreaCssFile.css** file will not decorate the content in Preview mode;
3. All styles form the **ContentAreaCssFile.css** file can be toggled via the [Show/Hide Border tool](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/using-contentareacssfile-property#showhide-border-tool) (![RadEditor screenshot showing editor-toggletableborder.gif](https://www.telerik.com/products/aspnet-ajax/documentation/assets/7fc699d6d308bcbf2bde2a82951ddc46/editor-toggletableborder.gif));
4. Only a single external CSS file can be used for stylization.
5. Classes from the **ContentAreaCssFile** stylesheet will not be present in the **[Apply CSS Class dropdown](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/toolbars/dropdowns/css-styles)**

You can also compare the conceptual differences of **ContentAreaCssFile** and **CssFiles collection** usage in the—[ContentAreaCssFile vs. CssFiles](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/contentareacssfile-vs-cssfiles) help article.

## Basic Usage

By default, the editor's content area is always decorated by an external CSS file. This file is not part of the [CssFiles collection](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/set-defaults) and its purpose is different.

> note This approach is available only when [ContentAreaMode](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/editor-views-and-modes/contentareamode-property) 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](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/decorating-div-contentareamode).

This file is configured via the **ContentAreaCssFile** property and it decorates some of the elements in the content area in order to improve the user experience. The property exposed enables you to override the rules and define ones of your own (see **Example 2**).

In addition to override this default stylization and preserve the user-friendly interface you could follow this [online live demo project](https://demos.telerik.com/aspnet-ajax/editor/examples/settingcontentareadefaults/defaultcs.aspx#qsf-demo-source) for the [whole CSS file](https://demos.telerik.com/aspnet-ajax/editor/examples/settingcontentareadefaults/EditorDefaultStylizaton.css) or use these example CSS rules:

> caption Example 1: Default ContentAreaCssFile.css contents.

```CSS
body 
{
padding:3px;
background-image: none;
margin: 0;
text-align: left;
word-wrap: break-word;
}

form 
{
	background-color:#efefef;
	border: 1px dashed #555;
}

table 
{
	border-right: 1px dashed #999;
	border-bottom: 1px dashed #999;
}

table td 
{
	padding: 1px;
	border-top: 1px dashed #999;
	border-left: 1px dashed #999;
}

table th 
{
	padding: 1px;
	border-top: 1px dashed #000;
	border-left: 1px dashed #000;
}
```

> caption Example 2: Overriding the defalt ContentAreaCssFile.css file in the markup.

```ASP.NET
<telerik:radeditor id="RadEditor1" runat="server" ContentAreaCssFile="~/ContentAreaCssFile.css">
</telerik:radeditor>
```

> caption Example 3: Overriding the defalt ContentAreaCssFile.css file from the code behind.

```C#
RadEditor1.ContentAreaCssFile = "~/ContentAreaCssFile.css";
```

```VB
RadEditor1.ContentAreaCssFile = "~/ContentAreaCssFile.css"
```

> caption Example 4: Sample of a custom ContentAreaCssFile.css file.

```CSS
body
{
	background-color: red;
	color: white;
}
```

## Show/Hide Border tool

The built-in tool **Show/Hide Borders** enables the end-user to preview the content without the styles from the **ContentAreaCssFile.css**. This tool disables the CSS link (that imports the ContentAreaCssFile.css file to the content area) in the head element of the iframe.

The following example demonstrates the tool's behavior:

> caption Example 5: Sample of a custom ContentAreaCssFile.css file.

```CSS
body 
{
background-color:rgba(155, 119, 119, 0.58);
color: white;
}

table 
{
	border:1px solid black;
	color: red;
}

table td 
{
	border:1px solid black;
}
```

Results:

> caption Figure 1: **Show/Hide Borders** tool turned ON

![Borders ButtonON](https://www.telerik.com/products/aspnet-ajax/documentation/assets/0e6f2d5f6cfc9ea0f64fb56e1c322ae1/bordersbuttonon.png)

> caption Figure 2: **Show/Hide Borders** tool turned OFF

![Borders ButtonOFF](https://www.telerik.com/products/aspnet-ajax/documentation/assets/43d444c6620b7c4679ca2807be4ba704/bordersbuttonoff.png)

## See Also

* [Setting Default Stylization](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/set-defaults)

* [CSS Styles](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/toolbars/dropdowns/external-css-files)

* [External CSS Files](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/set-defaults)

* [ContentAreaCssFile vs. CssFiles](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/content-area-appearance/contentareacssfile-vs-cssfiles)