Combining an External CSS With Other Formatting Methods

In this section:

Combining an External CSS With a WebFOCUS StyleSheet

When you use an external cascading style sheet (CSS) to format a report, you can use other formatting methods at the same time. Some of these other methods are subject to restrictions. The other methods that you can use with an external CSS are:

WebFOCUS StyleSheets. An effective way of combining an external CSS with a WebFOCUS StyleSheet is to link to an external CSS to provide default formatting, and use a WebFOCUS StyleSheet to override those defaults for individual report components. Note that if you combine a WebFOCUS StyleSheet and an external cascading style sheet, you should generate an internal cascading style sheet to avoid reducing the performance benefits associated with an external CSS.
Do not attempt to format the same property of the same report component using both an external CSS class (through the CLASS attribute) and a WebFOCUS StyleSheet attribute, since the two formatting instructions could conflict with each other.

For complete instructions about using an external CSS with a WebFOCUS StyleSheet, see Combining an External CSS With a WebFOCUS StyleSheet.
TABLE language instructions. You can use TABLE language (or GRAPH language) formatting instructions, such as HEADING CENTER, PAGE-BREAK, and spot markers (for example, </3). However, you should not apply both a TABLE (or GRAPH) language instruction, and an external cascading style sheet rule, to perform the same formatting on the same report component, because they might conflict with each other.
For example, you should not specify both of the following for the same report:
- HEADING CENTER in the report request.
- Text-align in an external CSS, applied to the report page heading.
Both of these will attempt to align the report page heading.

Combining an External CSS With a WebFOCUS StyleSheet

When you use an external cascading style sheet (CSS) to format a report, you can use a WebFOCUS StyleSheet at the same time. You may do this with or without generating an internal cascading style sheet.

An effective way of doing this is to link to an external CSS to provide default formatting, and use a WebFOCUS StyleSheet to override those defaults for individual report components. The cascading style sheet BODY or TD rule will provide the default formatting for the report. If you wish, you can override the defaults for individual report components via native WebFOCUS StyleSheet attributes. This enables you to conform to your organization's formatting standards as they are implemented in a CSS, while allowing you to customize those standards for WebFOCUS reports using WebFOCUS StyleSheet attributes. For information about using a BODY or TD rule for default formatting, see Choosing a Cascading Style Sheet Rule. For an example, see Inheritance and External Cascading Style Sheets.

Performance considerations. Note that, unless you generate an internal cascading style sheet from the WebFOCUS StyleSheet, combining an external CSS and a WebFOCUS StyleSheet may reduce the performance benefits associated with the external CSS. This is because a report that uses both an external CSS and native WebFOCUS StyleSheet attributes generates more HTML code than the same report using an external CSS alone, although it still generates less code than if the report had used native WebFOCUS StyleSheet attributes alone. (Reducing the amount of generated HTML code can reduce network load and browser display time.) For information about generating an internal cascading style sheet, see Generating an Internal Cascading Style Sheet for HTML Reports.

You cannot double-format. You should not attempt to format the same property of the same report component using both an external CSS class (via the CLASS attribute) and a WebFOCUS StyleSheet attribute, since the class and the StyleSheet attribute could conflict with each other.

For example, you should not include the following declarations in the same StyleSheet because they would both try to assign a color to the Country column:

TYPE=Data, COLUMN=Country, COLOR=Orange, $
TYPE=Data, CLASS=TextColor, $

You can specify classes and WebFOCUS StyleSheet attributes that format different properties of the same report component, and that format different report components. For example, the following declarations are acceptable in the same StyleSheet:

1. TYPE=Heading, COLOR=Green, $ 
1. TYPE=Heading, CLASS=HeadingFontSize, $ 
2. TYPE=Data, Column=Country, BACKCOLOR=Yellow, $ 
2. TYPE=Data, Column=Car, CLASS=DataBackgroundColor, $ 
3. TYPE=Data, Column=Model, FOCEXEC=NewSales(CarGroup=Car), $

These two declarations are compatible because they format different properties (color and font size).
These two declarations are compatible because they format different report components (the Country column and the Car column).
This declaration will be compatible with all CSS classes, since it does not format a report component, but instead defines a hyperlink.