This chapter explains how to include and use CSS style sheets in Zen Mojo pages. It discusses the following topics:
Within a layout graph, you can typically specify the properties that control the CSS class and CSS style for specific layout objects. For example:
The details vary by layout object.
A Zen Mojo application can use CSS style sheets, which you can provide in any combination of the following ways:
Include the style sheet directly within either the application class or the page class.
To do so, include an XData block named Style
. The following shows a simple example:
border: 1px solid red;
font-family: courier new;
If you include the style sheet in the page class, its styles are available to that class.
If you include the style sheet in the application class, its styles are available to all page classes that use this application class. For Zen Mojo (in contrast to Zen), an application typically has only a single page.
Define the CSSINCLUDES
parameter of either the application class or the page class. For the value, specify a comma-separated list of CSS style sheets. For example:
Parameter CSSINCLUDES = "dojo-release-1-9-1/dijit/themes/claro/claro.css,
Caché assumes any relative paths refer to the directory install-dir/csp/broker
. The parameter in the application class affects all page classes that use the application class; the parameter in the page class affects only that class.
Or, if you are using CSS version 3.0, specify the CSS3INCLUDES
parameter in the same way.
When Zen Mojo generates a page, it collects all the CSS style information and applies the information in these sources in the following order. Note that when conflicts exist, the styles that are defined last
Styles defined by the CSS files for the Zen component library. The filenames have the form ZEN_Component_*.css
Styles defined within the applicable application class, if any. These styles are evaluated in the following order:
Styles defined within the page class. These styles are evaluated in the following order:
A reference to an external CSS file using the CSSINCLUDES
An XData Style block containing CSS statements
Properties within the layout graph. For an individual layout object, these may provide:
To determine the name of the CSS style used in a specific location, use the browser or a suitable add-on tool to inspect the generated HTML directly.