Style sheet language

Short description: Computer language that expresses the presentation of structured documents

A style sheet language, or style language, is a computer language that expresses the presentation of structured documents. One attractive feature of structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.

One modern style sheet language with widespread use is Cascading Style Sheets (CSS), which is used to style documents written in HTML, XHTML, SVG, XUL, and other markup languages.

For content in structured documents to be presented, a set of stylistic rules – describing, for example, colors, fonts and layout – must be applied. A collection of stylistic rules is called a style sheet. Style sheets in the form of written documents have a long history of use by editors and typographers to ensure consistency of presentation, spelling and punctuation. In electronic publishing, style sheet languages are mostly used in the context of visual presentation rather than spelling and punctuation.

Components

All style sheet languages offer functionality in these areas:

Syntax

A style sheet language needs a syntax in order to be expressed in a machine-readable manner. For example, here is a simple style sheet written in the CSS syntax:

h1 { font-size: 1.5em }

This says that headings on level 1 should be displayed in a font size of 1.5 times the font size of the surrounding text.

Selectors

Selectors specify which elements are to be influenced by the style rule. As such, selectors are the glue between the structure of the document and the stylistic rules in the style sheets. In the example above, the "h1" selector selects all h1 elements. More complex selectors can select elements based on, e.g., their context, attributes and content.

Properties

All style sheet languages have some concept of properties that can be given values to change one aspect of rendering an element. The "font-size" property of CSS is used in the above example. Common style sheet languages typically have around 50 properties to describe the presentation of documents.

Values and units

Properties change the rendering of an element by being assigned a certain value. The value can be a string, a keyword, a number, or a number with a unit identifier. Also, values can be lists or expressions involving several of the aforementioned values. A typical value in a visual style sheet is a length; for example, "1.5em" which consists of a number (1.5) and a unit (em). The "em" value in CSS refers to the font size of the surrounding text. Common style sheet languages have around ten different units.

Value propagation mechanism

To avoid having to specify explicitly all values for all properties on all elements, style sheet languages have mechanisms to propagate values automatically. The main benefit of value propagation is less-verbose style sheets. In the example above, only the font size is specified; other values will be found through value propagation mechanisms. Inheritance, initial values and cascading are examples of value propagation mechanisms.

Formatting model

All style sheet languages support some kind of formatting model. Most style sheet languages have a visual formatting model that describes, in some detail, how text and other content is laid out in the final presentation. For example, the CSS formatting model specifies that block-level elements (of which "h1" is an example) extend to fill the width of the parent element. Some style sheet languages also have an aural formatting model.