Cascading Style Sheet Formatting Statements: Rules and Classes

Cascading Style Sheets (CSS) define formatting in statements called rules. For example, this simple rule makes the background color of the body of an HTML page yellow:

BODY {background: yellow}

In this section:

Selecting a CSS Rule

Naming CSS Classes

Inheritance and CSS

Example:

Inheriting Report Column Formatting From a TD Element

Each rule has a selector (BODY in this example) and a declaration (such as background: yellow). A declaration has a property (background) and a value assigned to the property (yellow). A declaration defines formatting, and a selector determines to what it applies. The selector can be any HTML element, or a class. You can define a class by creating a rule for it.

You define classes in a Cascading Style Sheet, and then format report components by assigning CSS classes to them. Define different formatting for the same element by creating several classes for it. For example, if you wish to differentiate between text in sort columns, aggregate columns and detail columns, you can accomplish this by creating three separate classes of the BODY element -- sortColumn, aggregateColumn, and detailColumn:

BODY.sortColumn {color: blue}
BODY.aggregateColumn {color: green}
BODY.detailColumn {color: black}

You can also define generic classes that are not limited to a single element. For example:

.pageFooting {font‑weight: bolder}

You can use generic classes to specify formatting for any FOCUS report component.


Top of page

Selecting a CSS Rule

When formatting a report, you have the choice of using BODY or TD rules for the entire report, or applying generic class rules to style individual components.

In choosing between the rules for BODY or TD, note that a rule for:

When formatting a report component using a class rule, use a FOCUS StyleSheet to assign the class to the component using the CLASS attribute. When applying several CSS properties to the same report component, it is more efficient to declare them in a single class.


Top of page

Naming CSS Classes

Class names are case-sensitive. It is recommended to name classes after the functions they perform, not the appearances of the components to which they are applied, so that the names remain meaningful even if the report changes appearance. For example, if you want all report titles to be red, you may name the class declared to format titles Title, but preferably not Red.


Top of page

Inheritance and CSS

Components in reports formatted using an external Cascading Style Sheet inherit formatting from the TD element and from all elements within which the element nests, such as BODY. (Inheritance, like all CSS behavior, is implemented by the user's Web browser and is browser‑dependent.)

This differs from inheritance in a FOCUS StyleSheet, in which report components inherit formatting from higher‑level components. When you format reports using external Cascading Style Sheet classes, classes assigned to a report component do not inherit formatting from classes of higher‑level components.


Top of page

Example: Inheriting Report Column Formatting From a TD Element

This report lists vendors that supply products to Gotham Grinds. Its formatting instructions specify that:

The report request and inline FOCUS StyleSheet follow:

   TABLE FILE GGPRODS
PRINT PRODUCT_DESCRIPTION VENDOR_NAME
BY PRODUCT_ID
ON TABLE SET PAGE‑NUM OFF
	   ON TABLE HOLD AS CSSEXAM1 FORMAT HTML
   ON TABLE SET STYLESHEET *
1. TYPE=REPORT, CSSURL = c:\Projects\report02.css, $
2. TYPE=DATA, CLASS=Data, $
3. TYPE=DATA, COLUMN=PRODUCT_ID, CLASS=Sort, $
ENDSTYLE
    END

The external Cascading Style Sheet, report02.css, follows:

4. TD    {background:orange; border:0}
5. TABLE {border:0}
6. .Data {font‑style:italic; font‑family:Arial}
7. .Sort {background:yellow}
  1. Set CSSURL to link to the external Cascading Style Sheet report02.css. Alternatively, you can link to a URL on a Web server, as in the following example:

    TYPE=REPORT, CSSURL=http://websrv1/CSS/reportstyles.css, $
  2. Specify report data formatting using the CSS rule for the Data class.

  3. Specify PRODUCT_ID data formatting using the CSS rule for the Sort class. This overrides the general declaration for formatting report data in line 2.

  4. This CSS rule for the TD element specifies an orange background. Because this rule is for the TD, it is applied to the entire report. You can override TD formatting for a particular report component by applying a rule for a generic class to it, as is done in this procedure with the Sort class rule (see line 7).

  5. CSS rules for the TD and TABLE elements remove the default grid from the report.

  6. This CSS rule for the generic class Data specifies an Arial font family and an italic style. The FOCUS StyleSheet applies this to the report's data (see line 2).This rule inherits its background color from the rule for the TD element (line 4).

  7. This CSS rule for the generic class Sort specifies a yellow background. The FOCUS StyleSheet applies this rule to PRODUCT_ID data (see line 3).

    This rule overrides the default background color specified in line 4.

The output is: