What Is a Cascading Style Sheet?

In this section:

What Are Cascading Style Sheet Rules and Classes?

Cascading style sheets (CSS) are an extension to HTML that allow you to specify formatting for an HTML document. You can use two kinds of CSS with WebFOCUS:

An internal cascading style sheet, which is stored internally in the HTML document that it formats. For information about generating and using an internal CSS for a WebFOCUS report, see Generating an Internal Cascading Style Sheet for HTML Reports.
An external cascading style sheet, which is stored in a separate file that can be shared by multiple documents. The external CSS file can reside on any web server accessible to the browser. You specify its location using the CSSURL WebFOCUS StyleSheet attribute, the CSSURL SET parameter, or (in special cases) the LINK element.

You can define classes in a cascading style sheet, and format a report component by assigning one of these CSS classes to it. Classes are described in What Are Cascading Style Sheet Rules and Classes?.

Cascading style sheets are called cascading because several different style sheets can be active for a single document at the same time. For example, one style sheet may be associated with the document itself, another style sheet may be linked to the first one, and yet another may be associated with the web browser on which the document is being displayed. When multiple style sheets are in effect, they are applied to the document in a pre-determined sequence set by the browser: their formatting instructions can be thought of as cascading from one style sheet to the next.

The benefits of using an external cascading style sheet to format a report are described in Why Use an External Cascading Style Sheet?.

You will find external cascading style sheets relevant if you:

Develop reports, since you now have an improved way of formatting those reports.
Are responsible for presentation guidelines for web documents, since you will now be able to apply your existing cascading style sheets to reports.

For information about internal cascading style sheets, see Generating an Internal Cascading Style Sheet for HTML Reports.

Need more information about CSS? This WebFOCUS documentation assumes that you have a working knowledge of cascading style sheets. Teaching about CSS is beyond the scope of this documentation, but many sources of information are available to you. A useful place to begin online is the World Wide Web Consortium's cascading style sheets home page (http://www.w3.org/Style/CSS/).

What Are Cascading Style Sheet Rules and Classes?

A cascading style sheet (CSS) defines formatting in statements called rules. For example, this is a simple rule that makes the background color of the body of an HTML page yellow:

BODY {background: yellow}

Each rule has a selector (BODY in this example) and a declaration (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 the formatting will be applied. A selector can be any HTML element. A selector can also be a class. You can define a class simply by creating a rule for it. By creating rules for classes of an element, you can define different formatting for the same element.

For example, you may wish to display text in a different color depending on whether it is in a sort column, aggregate column, or detail column in a report. To accomplish this you could create three 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 a generic class, that is, a class that is not limited to a single element. For example:

.pageFooting {font-weight: bolder}

You can use a generic class to specify formatting for any WebFOCUS report component.

Using external cascading style sheet rules and classes to format a report is described in Formatting a Report With an External Cascading Style Sheet.