Working With an External Cascading Style Sheet

To format a report using an external cascading style sheet (CSS), you can choose to:

• Apply an existing CSS with no changes. The external cascading style sheet can be one that you use for other documents, and can contain all kinds of rules, not only rules that format reports. For example, the CSS could include rules to format other elements in the webpages used by your WebFOCUS applications, as well as rules for other kinds of webpages. This enables you to use one cascading style sheet to format all of your web documents.
• Edit an existing CSS to add or modify rules. For example, you might edit a cascading style sheet to add new generic classes to format report components.
• Create a new CSS. You can create a new cascading style sheet to format your reports. See the recommendations in Naming a Cascading Style Sheet Class about naming classes.

To create an external cascading style sheet, use a text editor or a third-party web development tool.

An external cascading style sheet (CSS) can reside on any web server platform. However, if CSSURL (the StyleSheet attribute or the SET parameter) specifies a relative URL, the cascading style sheet must reside on the web server used by WebFOCUS.

Although each report procedure can link to only one external cascading style sheet (CSS), you can use several cascading style sheets to format a report by linking to one CSS that then imports several others. For information about importing one CSS into another, see your third-party CSS documentation.

You can edit an external cascading style sheet (CSS) using a text editor or a third-party web development tool.

If the formatting of a report is specified entirely using a cascading style sheet, and you edit that CSS, the next time someone displays the report it will reflect the changes to the CSS without the report having to be rerun.

However, if the report does not reflect the changes, it may be because the web browser is continuing to use the old version of the CSS that it had stored in cache. The person displaying the report may need to reload the CSS file from the web server by clicking the Refresh button of the browser in Microsoft Internet Explorer to ensure that the browser uses the most current version of the CSS to format the report.

You can format different parts of a report using different types of rules.

To choose between using a rule for BODY or for TD, note that a rule for:

• BODY will specify default formatting for the entire webpage in which the report appears, including the report itself. (Note that this relies upon CSS inheritance which, like all CSS behavior, is implemented by the web browser of each user and is browser-dependent.)

  Graphs differ from other types of reports: a rule for BODY will format the page in which the graph appears, and its heading and footing, but not the graph itself.

• TD will specify default formatting only for the report, and for any other table cells that you may have on the page. TD is the table data (that is, table cell) element. WebFOCUS generates most HTML report output as an HTML table, placing each report item in a separate cell. This enables a rule for TD to format the entire report.

  Graphs differ from other types of reports: to specify default formatting for a graph, use a rule for BODY, not for TD. See the previous note regarding formatting graphs using a rule for BODY.

When you use a rule for a class to format a report component, you must assign the class to the component in a WebFOCUS StyleSheet using the CLASS attribute, as described in Use the CLASS Attribute to Apply CSS Formatting.

If you wish to apply several CSS properties to a single report component, we recommend that you declare them in a single class. This generates more efficient output than does declaring one property per class.

The owner of each cascading style sheet should consider making available a list of all the classes in that CSS that can be used to format reports, so that everyone who develops reports knows from which classes they may choose.

For an example of a rule for:

• A generic class to format a report component, see A CSS Rule for the ColumnTitle Class.
• The TD element to format an entire report, see A CSS Rule for the TD Element.

When you provide a name for a new class, note that class names are case-sensitive (although some web browsers may not enforce case sensitivity).

When you create a new class, we recommend naming it after the function, not the appearance, of the report component to which you will be applying it. This ensures that the name remains meaningful even if you later change the appearance of the report component. For example, if you want all report titles to be red, the class you declare to format titles might be named Title, but not Red.