Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Themes
 
Show All Themes
v
...v

Custom CSS

  • Cut (Ctrl+X)
  • Copy (Ctrl+C)
  • Paste (Ctrl+V)
  • Undo (Ctrl+Z)
  • Redo (Ctrl+Y)
  • Remove Format
  • Superscript
  • Subscript
  • Ordered List
  • Bullet List
  • Indent
  • Outdent
  • Insert Link (Ctrl+K)
  • Remove Link (Ctrl+Shift+K)
  • Insert Image (Ctrl+G)
  • Insert Table
    v
  • v
  • v
  • v
  • Bold (Ctrl+B)
  • Italic (Ctrl+I)
  • Underline
  • Strikethrough
  • Align Left (Ctrl+L)
  • Align Center (Ctrl+E)
  • Align Right (Ctrl+R)
  • Justify (Ctrl+J)
  • Back Color
    v
  • Fore Color
    v

The DevExpress ASP.NET HTML Editor (ASPxHtmlEditor) control provides the Custom CSS feature, which enables your custom formatting (defined by custom CSS classes) to be accessed by end-users, and applied to the content selected within the editor. Using the Custom CSS feature, content titles, headers, text blocks, and other elements can be formatted using individual formatting styles, which are defined by the names of the associated CSS class and HTML tag.

A standard toolbar's Apply CSS drop-down editor (which is of the ToolbarCustomCssEdit type) allows you to list the custom CSS styles available to end-users. The editor's items can be manipulated via the editor's Items property. You can specify the following attributes for each item:

  • Text – defines the item's display text.
  • CssClass – specifies the name of the corresponding CSS class name.
  • TagName – specifies the name of the tag to wrap the content element to which the associated style is applied.

The CSS files that contain custom CSS class definitions can be specified by the CssFiles property.

In this demo, custom styles are defined for content elements such as article title, headers, main content text, etc. To apply any of the predefined styles to the element selected within the Design View, choose the desired style item in the Apply CSS combo box in the toolbar.

Collapse/Expand
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxHTMLEditorDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxHTMLEditorDemos