Ephox EditLive! for XML provides support for the use of Cascading Style Sheets (CSS) to enforce formatting standards easily by separating content from formatting. Styles can be used within XHTML sections of an EditLive! for XML document. Styles will also be used to render text within EditLive! for XML. Styles can be specified via an external, linked style sheet, through an embedded style sheet or through inline style information (e.g. in a <SPAN> tag). This article assumes the reader is familiar with the concept of using Cascading Style Sheets. If you would like to learn more about CSS before reading this document, please visit the W3C's Introduction to CSS.

EditLive! for XML provides several methods of adding style information to a document. Furthermore, EditLive! for XML recognizes style information and populates the style drop-down list box accordingly. EditLive! for XML can apply styles both as inline styles and block styles. Block styles are applied to an entire XHTML element such as a <P> tag whereas inline styles are applied to a section of text within a XHTML element.

p.blue{color: blue}

span.redtext{color:red} 

.green{color:green}

Style information for EditLive! for XML can be provided in the following ways:

It should be noted that EditLive! for XML's CSS support complies with the W3C CSS precedence rules. Thus inline styles take precedence over an embedded style sheet. Furthermore the styles listed in an embedded style sheet take precedence over those from an external style sheet. Finally, when multiple external style sheets are used style sheets listed last will have precedence if there is any conflict between style sheets.

Unless the styleOption attribute of the <wordImport> element in the configuration file is set to clean, styles may be imported from Microsoft Word. This action is performed by copying text from Microsoft Word and selecting paste in EditLive! for XML. When styles are imported in this manner they are added to the embedded style sheet of the document in EditLive! for XML. If a style of the same class already exists in EditLive! for XML it will take precedence over any style from Microsoft Word.

When copying text from Microsoft Word, users will be prompted with a dialog box asking whether to copy the text's styles as embedded styles or inline styles. In cases where EditLive! for XML has used an XML configuration file specifying embedded styles, users should copy text and styles from Microsoft Word using inline styles. The reason for this is that embedded styles specified in the XML configuration file override all other embedded styles specified for the XHTML, including styles copied from Microsoft Word.

As documented in Retrieving Content, both the HTML content and the CSS styles contained in an instance of EditLive! for XML can be sent through a HTTP Post. When a form containing an instance of EditLive! for XML is submitted, a hidden field containing all style information for the document is also created and posted with the form data. This hidden field will be called ELJAppletName_styles, where ELJAppletName is the name specified by the developer when the EditLive! for XML instance was created.

The page listed as the action to receive the HTTP Post could then contain controls to assign the styles information to a variable, which could then be saved to a back-end database.

For example, where the page sending the HTTP Post has generated a hidden field called ELJAppletName_styles, containing the styles information :

VB Scripting

<%
  Dim stylesInformation = Request( "ELJAppletName_styles" )
%>

JSP Scripting

<%
  String stylesInformation = request.getParameter("ELJAppletName_styles");
%>

When style information is added to EditLive! for XML then style information will be added to the style drop-down list box. This means that users can quickly and easily access style information. For example, if a style sheet defined the following styles:

h1{color: yellow} 
p.blue{color: blue}
span.red{color: red}
.green{color: green}

Then .blue and .red and .green would appear as options within the styles drop-down list box giving users easy access to this style information. Also the Heading 1 style would have yellow colored text.

In the EditLive! for XML styles drop down block styles are depicted with a ¶ symbol next to them and inline styles are depicted with an a symbol next to them. Thus, the style drop down for the above example may appear as follows:

Heading 1 ¶

.blue ¶

.red a

green ¶

.green a

Note that the .green class appears twice as it can be applied as both an inline and a block style. For more information please see the Specifying Inline and Block Styles section of this article.

There are three ways to extract the styles information from an instance of EditLive! for XML:

EditLive! for XML provides excellent support for implementing cascading style sheets (CSS). Style information can be used with an EditLive! for XML document in a number of ways; as an externally linked style sheet, as an embedded style sheet or importing content from Microsoft Word. This style information will then be used by EditLive! for XML to populate the styles drop-down list box giving users easy access to style information.