Stylesheet language
Encyclopedia
A style sheet language, or style language, is a computer language that expresses the presentation of structured document
s. 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 CSS (Cascading Style Sheets)
, which is used to style documents written in HTML
, XHTML
, SVG
, XUL
, and other markup language
s.
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.
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:
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) extends to fill the width of the parent element. Some style sheet languages also have an aural formatting model.
Structured document
A structured document is an electronic document where some method of embedded coding, such as markup, is used to give the whole, and parts, of the document various structural meanings according to a schema...
s. 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 CSS (Cascading Style Sheets)
CSS
-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...
, which is used to style documents written in HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
, XHTML
XHTML
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
, SVG
Scalable Vector Graphics
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...
, XUL
XUL
In computer programming, XUL , the XML User Interface Language, is an XML user interface markup language developed by the Mozilla project. XUL operates in Mozilla cross-platform applications such as Firefox...
, and other markup language
Markup language
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...
s.
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:
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) extends to fill the width of the parent element. Some style sheet languages also have an aural formatting model.