Working With External Cascading Style Sheets

In this section:

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

Applying CSS Styles

How to:

You can apply external cascading style sheet (CSS) formatting to:

When using an external cascading style sheet to format a report, it is recommended not to use a FOCUS StyleSheet to specify the report's formatting unless you also generate an internal cascading style sheet.

Syntax: How to Use the CLASS Attribute to Apply CSS Formatting

To apply an external cascading style sheet (CSS) class to a report component, use the following syntax in a FOCUS StyleSheet declaration. 

TYPE = type, [subtype,] CLASS = classname, [when,] [link,] $

where:

type

Identifies the report component to which you are applying the class's formatting. For tabular and free-form reports, it can be any component.

Each report component can be formatted by one class. If you specify several classes for a report component:

  1. Classes in declarations with conditional formatting are evaluated first. For each cell in the report component, the first class whose condition is satisfied by the cell(tm)s row is assigned to the cell.
  2. If there are no conditional declarations, or if no conditions are satisfied, the class in the first unconditional declaration is assigned to the report component. All subsequent declarations for that component are ignored.
subtype

Is an optional attribute and value needed to specify certain kinds of report components completely. For example, COLUMN and a column identifier are needed to specify a particular report column.

classname

Is the name of the cascading style sheet class you are applying to format the report component. You can assign the same class to multiple report components.

Class names are case sensitive, and must agree with the case name in the class rule in the cascading style sheet. (Note, however, that not all Web browsers enforce case sensitivity for class names.)

when

Is an optional WHEN attribute and value. Supply this to apply conditional formatting.

link

Is an optional URL or JAVASCRIPT attribute and value. Supply this if you want to link the report component to another resource.

Using an External CSS - A Graphical Overview

How to:

Three items are required to style a report with an external cascading style sheet (CSS):

This example demonstrates the interaction.



Procedure: How to Format a Tabular Report With an External CSS

To format a report using an external cascading style sheet (CSS):

  1. Specify the report formatting in the CSS. To specify formatting for:
    • A report component, use a rule for any generic class (one not tied to an element). This cascading style sheet rule declares the ColumnTitle generic class:
      .ColumnTitle {font-family:helvetica; font-weight:bold; 
color:blue;}
    • The entire report, use a rule for the BODY or TD elements (not for a class of these elements), and skip Step 2. This is an effective way to specify default report formatting, and generates more efficient report output than applying a CSS class to the entire report. This cascading style sheet rule for the TD element specifies the element's font family:
      TD {font-family:helvetica}

      Because this rule is for the TD element, the formatting is applied to an entire report, not just a report component.

  2. Assign classes to report components. In a FOCUS StyleSheet, use the CLASS attribute to assign a cascading style sheet class to each report component that you wish to format. You can assign each component a different class, and you can assign the same class to multiple components. This FOCUS StyleSheet example formats ACROSS values by applying the formatting for the ColumnTitle class:

    TYPE=AcrossValue, CLASS=ColumnTitle, $

  3. Link to the CSS. Link the external cascading style sheet by assigning either the URL or the fully qualified pathname for the CSS file, through either the CSSURL FOCUS StyleSheet attribute or the CSSURL SET parameter, as shown below:
    • TYPE=REPORT, CSSURL = c:\projects\reportstyles.css
    • TYPE=REPORT, CSSURL=http://webserv1/css/reportstyles.css

    You can accomplish the same thing using a SET command:

    • SET CSSURL = c:\projects\reportstyles.css
    • SET CSSURL=http://webserv1/css/reportstyles.css

Example: Formatting a Report Using a Cascading Style Sheet

This annotated report, which displays products currently offered by Gotham Grinds, is formatted using a cascading style sheet (report01.css). The formatting specifies that:

  • The default font family is Arial.

    The style sheet formatting overrides the report heading default font family of Times New Roman. The heading is also in a larger point size and is center-justified.

  • All column titles are in a bold font and have a light-blue background.
  • When a product's unit price is less than $27, the report displays that product row in green italics.

The report request and inline FOCUS StyleSheet follow: 

   TABLE FILE GGPRODS
   HEADING
   "</1 Current Products</1"
   PRINT PRODUCT_DESCRIPTION UNIT_PRICE
   BY PRODUCT_ID
   ON TABLE SET PAGE-NUM OFF
 
   ON TABLE HOLD AS CSSEXAM2 FORMAT HTML
  
1. ON TABLE SET STYLE * 
2. TYPE=REPORT, CSSURL=c:\Projects\report01.css, $ 
3. TYPE=HEADING, CLASS=headText, $ 
4. TYPE=TITLE, CLASS=reportTitles, $ 
5. TYPE=DATA, CLASS=lowCost, WHEN=N3 LT 27, $ 
6. ENDSTYLE
   END

The external cascading style sheet, report01.css, follows: 

 
7. BODY  {font-family:Arial, sans-serif} 
8. TABLE {border:0} 
8. TD    {border:0} 
9. .reportTitles {font-weight:bolder; background:lightblue;} 
10..lowCost {color:green; font-style:italic;} 
11..headText {font-family:Times New Roman, serif; font-size:larger;
               text-align:center}
  1. Begin the inline FOCUS StyleSheet.
  2. Link to the fully-qualified pathname (or URL, if Web-based) of the external cascading style sheet report01.css.
  3. Format the report(tm)s heading using the cascading style sheet(tm)s rule for the headText class.
  4. Format the report(tm)s column titles using the CSS(tm)s rule for the reportTitles class.
  5. For each report row for which the product(tm)s unit cost is less than $27, format that row using the CSS rule for the lowCost class.
  6. End the inline FOCUS StyleSheet.
  7. This CSS rule for the BODY element specifies the font family Arial, and if Arial is unavailable, the generic font family sans serif.

    Because this is a rule for BODY, it is applied to the entire report: all text in the report defaults to Arial. You can override this for a particular report component by applying a rule for a generic class to that component, as is done in this procedure with the rule for the headText class (see line 11).

  8. These CSS rules for the TABLE and TD elements remove the report(tm)s default grid.
  9. This CSS rule for the generic class reportTitles specifies a bolder relative font weight and a light blue background color. The FOCUS StyleSheet applies this to the report(tm)s column titles (see line 4).
  10. This CSS rule for the generic class lowCost specifies the text color green and the font style italic. The FOCUS StyleSheet applies this rule conditionally to report rows for which the product(tm)s unit cost is less than $27 (see line 5).
  11. The CSS rule for the generic class headText specifies the font family Times New Roman, and if Times New Roman is unavailable, the generic font family serif. It also specifies a larger relative font size and center justification.

    The FOCUS StyleSheet applies this rule to the report(tm)s heading. It overrides the default font family specified in the rule for the BODY element (see line 7).

The output is:



 Information Builders