Ephox EditLive! for Java provides extensive support for the use of Cascading Style Sheets (CSS) to enforce formatting standards easily by separating content from formatting. 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 Java provides several methods of adding style information to a document. Furthermore, EditLive! for Java recognizes style information and populates the style drop-down list box accordingly. EditLive! for Java can apply styles both as inline styles and block styles. Block styles are applied to an entire HTML element such as a <P> tag whereas inline styles are applied to a section of text within a HTML element.
Style information for EditLive! for Java can be provided in the following ways:
It should be noted that EditLive! for Java'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 in they can be applied within EditLive! for Java. 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 Java. 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 Java are applied using the <SPAN> HTML 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 Java. 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 Java 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 Java can be configured to use external style sheets by specifying a value with the <link> element in the configuration file.
When EditLive! for Java 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 Java 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 Java to use the provided embedded style sheet. The embedded style sheet used for this example would implement a mixture of inline and block styles.
<editLiveForJava>
<document>
<html>
<head>
<style>
<!--
p.blue{color: blue}
span.red{color: red}
.green{color: green}
-->
</style>
</head>
<body>
</body>
</html>
</document>
...
</editLiveForJava>
Styles can be provided to EditLive! for Java when it is instantiated. This is achieved by setting the Style property of EditLive! for Java. Styles defined in this manner act as an embedded style sheet within EditLive! for Java.
For example:
If the styles property or attribute was set to be:
H1
{
FONT-SIZE: 36pt;
}
Then the information would appear in EditLive! for Java's HTML view as:
<HEAD>
...
<STYLE>
<!--
H1
{
FONT-SIZE: 36pt;
}
-->
</STYLE>
...
</HEAD>
Any embedded style sheets defined in the XML configuration file take precedence over those defined with the Styles property. For more information on how to set styles in this manner please see the Style property in your SDK.
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 EditLive! for Java. If a style of the same class already exists in EditLive! for Java it will take precedence over any style from Microsoft Word.
When style information is added to EditLive! for Java, either through an external style sheet or within the HEAD tags, then style information will be added to the style drop-down list box. This means that users can quickly and easily access style information without having to edit the pure HTML in HTML view. 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 Java 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 Java provides excellent support for implementing cascading style sheets (CSS). Style information can be added to an EditLive! for Java document in a number of ways; as an externally linked style sheet, as an embedded style sheet between the HEAD tags of the document, by setting the styles property or attribute when instantiating EditLive! for Java or importing content from Microsoft Word. This style information will then be used by EditLive! for Java to populate the styles drop-down list box giving users easy access to style information without having to access the pure HTML code.
Copyright © 2001-2004 Ephox Corporation. All Rights Reserved.