### Examples | Developer's Guide | ASP.NET Developer's Guide

1. Getting Started
2. Applying Stylesheet
   1. Applying Stylesheet Using External Css File
   2. Enabling the Style Selection feature
   3. Applying Stylesheet Without Using Css File
3. Using Asset Manager Add-on
4. Advanced Settings
5. Extending the Editor
6. Toolbar
7. Localization
8. FAQ

## II. Applying Stylesheet

### II.1. Applying Stylesheet Using External Css File

To apply an external css file, specify the css file using Css property:

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
Css="style/test.css"
ID="oEdit1" />

If you specify BODY style in your css file, for example:

BODY {
background:steelblue;
color:white;
font-family:Verdana,Arial,Helvetica;
}

This will apply a background color of "steelblue", font color of "white", and font family of "Verdana,Arial,Helvetica" to the Editor content as shown in the screenshot below:

### II.2. Enabling the Style Selection feature

Style Selection feature allows you to select & apply styles to the Editor content. To enable the style selection feature, set btnStyles property to true.

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
Css="style/test.css"
btnStyles=true
ID="oEdit1" />

All class selectors defined in the css file will be listed in the Style Selection. For example, the class selector CodeInText below will be included in the Style Selection.

.CodeInText {font-family:Courier New;font-weight:bold;}

Only HTML selectors will not be included in the Style Selection. For example, the HTML selector P below will not be included.

P {font-family:Verdana,Arial,Helvetica;}

### II.3. Applying Stylesheet Without Using Css File

To apply stylesheet without using external css file, use StyleList property, for example:

oEdit1.StyleList = New String(,){ _
{"BODY",false,"","font-family:Verdana,Arial,Helvetica;font-size:x-small;"}, _
{".ScreenText",true,"Screen Text","font-family:Tahoma;"}, _
{".ImportantWords",true,"Important Words","font-weight:bold;"}, _
{".Highlight",true,"Highlight","font-family:Arial;color:red;"}}

StyleList property allows you to specify the style rules (in the form of array). Each rule is constructed by:

- HTML/Class Selector
- True/false parameter – to specify whether the style will be included in the Style Selection list or not.
- Caption (the displayed text for the Style Selection list)
- Css Text

Below is a complete example:

<%@ Page Language="vb" ValidateRequest="false" Debug="true" %>
<%@ Register TagPrefix="editor" Assembly="WYSIWYGEditor" namespace="InnovaStudio" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="VB" runat="server">
Sub Page_Load(Source As Object, E As EventArgs)
If Not Page.IsPostBack Then
oEdit1.Content = "<h3>Hello World!</h3>"
oEdit1.StyleList = New String(,){ _
{"BODY",false,"","font-family:Verdana,Arial,Helvetica;font-size:x-small;"}, _
{".ScreenText",true,"Screen Text","font-family:Tahoma;"}, _
{".ImportantWords",true,"Important Words","font-weight:bold;"}, _
{".Highlight",true,"Highlight","font-family:Arial;color:red;"}}
oEdit1.btnStyles = true
End If
End Sub
</script>
</head>
<body>
<form id="Form1" method="post" runat="server">
<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
ID="oEdit1" />
</form>
</body>
</html>

© 2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.