What Are Cascading Style Sheets?

The World Wide Web Consortium's (W3C) cascading style sheets (CSS) specification defines a simple language for adding styling (such as fonts, colors, and spacing) to HTML documents. A style sheet separates the structural content of a document, defined in HTML, from the styling instructions, which are specified in a CSS. Each style sheet consists of one or more instructions or rules, called statements. Each statement includes a selector that tells a browser which elements on a page are affected by that statement, and a declaration that tells the browser how to draw or render them.

Benefits of Cascading Style Sheets

The benefits of using cascading style sheets to format reports include:

Increased formatting options. Almost any formatting that you can specify in a cascading style sheet can be applied to a report, including options unavailable using native FOCUS StyleSheet attributes.
Reduced transmission bandwidth. Cascading style sheets enable FOCUS to generate concise HTML output, reducing the bandwidth and overhead required to send output to the browser and display it.
Reduced effort. Experienced designers have the option of applying CSS to their FOCUS reports as well, avoiding duplications in specifying and maintaining inline formatting instructions.
Easier standards conformance. Produce consistent documents for sites more easily by specifying default formatting for all Web documents of a similar type in a single cascading style sheet (as opposed to selectively replicating the formatting in inline FOCUS StyleSheets).

The Notion of Browser Dependence

In preparing to use CSS, it is important to understand the pivotal role played by the Web browser. It is the browser's support and implementation of CSS, and not FOCUS, that determines how (or if) a style sheet formats a styled report. Some browsers support CSS specifications fully, while others support only certain versions or formatting attributes, and some offer no support at all. Make sure that your browser and your readers' browsers all support CSS before proceeding.

Types of Cascading Style Sheets

When you create a HOLD file in HTML format, FOCUS generates most of the report output as an HTML table, placing each report item in a separate cell. Through the CSS feature, you can expedite the translation process and minimize the size of the generated HTML file by including an internal (or "embedded") CSS in your request.

You can employ several types of cascading style sheets with FOCUS:

Internal cascading style sheets that are stored internally in the <head> element of the HTML documents that they format. When you include an internal CSS, FOCUS interprets your FOCUS StyleSheet instructions in a cascading style sheet that is stored in the metadata of your styled HTML output file. The viewing browser interprets this CSS to determine how to render the file contents.
External cascading style sheets that you or someone else creates are stored in separate files accessible to the target browsers. Users may share documents linked to them. Specify an external CSS location in a FOCUS request using the CSSURL FOCUS StyleSheet attribute or the CSSURL SET parameter.
An external CSS is ideal for defining corporate-standard default styles (such as overall font/size), which users can then selectively override through FOCUS StyleSheet attributes when adjusting styles for particular report components.
Inline Style Sheets are stored within the tag of an HTML element or within the <head> of the document. These are generally not recommended, as they defeat the basic aim of using style sheets, which is the separation of content and style. They are supported, however, and can be used to override default style values in all other style sheets, as described in the next section.