JavaScript Style Sheets

This document specifies a method to attach styles to HTML documents using the existing property-based language JavaScript. This document does not attempt to explain the JavaScript syntax. JavaScript documentation can be found at . Designing simple style sheets is easy. One only needs to know a little HTML and some simple JavaScript assignment statements. For example, to set the text color of 'H1' elements to blue, one can say: Further examples within this specification assume "document" is implicitly scoped. Therefore the above example would read: In order for style sheets to influence presentation, the user agent (UA) must be aware of their existence. Another W3C working draft, [ HTML3 and Style Sheets [4]]( , describes how to link HTML with style sheets: the 'LINK' element to link an external style sheet a 'STYLE' element inside the 'HEAD' element and a 'STYLE' attribute on an element inside 'BODY'. This option mixes style with content with a corresponding loss of the advantages of traditional style sheets The 'LINK' element references alternative style sheets that the reader can select, while imported style sheets are automatically merged with the rest of the style sheet. Traditionally, UAs have silently ignored unknown tags. As as result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such. During a transition phase, 'STYLE' element content may be hidden using SGML comments: This will be effective even when the author has omitted the 'BODY' tag (which is legal) since the parser will infer the missing tag. The example above sets the text color to be black and the background color to white. Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case. For example, the 'background' property does not inherit, but the parent element's background will shine through by default. To increase the granularity of control over elements, HTML3 proposes a new attribute: 'CLASS'. All elements inside the 'BODY' element can be classed and the class can be addressed in the style sheet. The keyword 'all' is used to specify that all tags within the class are effected by the style property: The normal inheritance rules apply to classed elements; they inherit values from their ancestors in the document structure. Only one class can be specified per selector. 'classes.punk.rap' is therefore an invalid selector. (Contextual selectors, described below, can have one class per simple selector.) It is sometimes desirable to reference only those tags that are within a particular set defined by a class. By specifying the tag name instead of using the 'all' keyword, only those tags matching the name and within the class will be effected. This example sets all 'H1' tags that belong to the class "foo" to the color red. Inheritance saves designers typing. Instead of setting all style properties, one can create defaults and then list the exceptions. To give 'EM' elements a different color, one may specify: contextual(tags.DIV, tags.P).color = "green"; contextual(classes.reddish.all, tags.H1).color = "red"; contextual(ids.x78y, tags.CODE).background = "blue"; The first selector matchies all P tags within a DIV tag. The second selector matches all H1 elements with an ancestor class 'reddish'. The third selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. Some common typographic effects are associated not with structural elements but rather typographical items as formatted on the canvas. Here we attempt to demonstrate some common effects. (In the above example, the UA chose to replace small-caps text with capital letters since small-caps fonts were not available. This specification does not describe how UAs should render documents when the necessary resources, such as colors and fonts, are not available.) The 'firstLetter' style is used for "initial caps" and