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.
Style information for EditLive! for XML can be provided in the following ways:
The XML configuration file of EditLive! for XML may include style information in a couple of ways. Note that, with the exception of styles defined inline, style information specified through the use of the XML configuration file takes precedence over style information specified in any other way.
an external style sheet may be specified through the use of the <link> element.
an embedded style sheet can be specified through the <style> element.
Microsoft Word Styles - Styles can be imported from a Microsoft Word document.
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.
The way in which styles are specified within a style sheet affects the way they can be applied within EditLive! for XML. Style classes which are directly associated with a block tag can only be applied to a block tag. These styles are designated by a ¶ symbol on the styles drop down in EditLive! for XML. A block style which defines that paragraph text should be blue can be defined as follows:
p.blue{color: blue}Inline styles in EditLive! for XML are applied using the <SPAN> XHTML element. Thus, to define a style which can only be used inline it should be defined as a class to be used with the <SPAN> tag. These styles are designated by a a mark on the styles drop down in EditLive! for XML. An inline style which would specify text that is to have a red color would be as follows:
span.redtext{color:red} Finally, it is possible to define a style class which may be used as both an inline and block style. These styles appear twice on the EditLive! for XML styles drop down, once marked with the ¶ symbol and again with a a mark. A style class which could be applied on both block and inline tags to change the text color to green is as follows:
.green{color:green}EditLive! for XML can be configured to use external style sheets by specifying a value with the <link> element in the configuration file.
When EditLive! for XML links to multiple style sheets, the last style sheet added will have priority if there is a conflict with an earlier style sheet.
For example, if stylesheet1.css defined H1 as:
H1 { font-family: Arial,Helvetica,sans-serif; font-size: 24pt; }and another style sheet linked after stylesheet1.css 1, defined H1 as:
H1 { font-family: Arial,Helvetica,sans-serif; font-size: 48pt; } the value of stylesheet1.css for H1 would be overridden by the value given in the second style sheet (i.e. H1 would be size 48pt, not 24pt). Hence, the order that style sheets are added is important and will effect how the HTML is formatted.
Through the <style> element of the EditLive! for XML configuration file an embedded style sheet can specified. Styles listed in a style sheet embedded via the XML configuration file take precedence over styles otherwise defined. The following would configure EditLive! for XML to use the provided embedded style sheet. The embedded style sheet used for this example would implement a mixture of inline and block styles.
<editLive>
<document>
<html>
<head>
<style>
<!--
p.blue{color: blue}
span.red{color: red}
.green{color: green}
-->
</style>
</head>
</html>
</document>
...
</editLive>Unless the styleOption attribute of the <wordImport> element in the configuration file is set to clean, styles may be imported from Microsoft Word. When styles are imported in this manner they are added to the embedded style sheet of the document in the Visual Designer. If a style of the same class already exists in the Visual Designer it will take precedence over any style from Microsoft Word.
Style information cannot be imported from Microsoft Word when using EditLive! for XML. It is recommended that the styleOption attribute of the <wordImport> element in the configuration file is set to clean within the configuration for EditLive! for XML.
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 a 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.
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.
Copyright 2001-2004 Ephox Corporation. All Rights Reserved.