PR-CSS1-961112
PR-CSS1-961112
This document is in the course of review by the members of the World-Wide Web Consortium. This is a stable document derived from internal Working Drafts of the W3C HTML Editorial Review Board and the public working draft WD-css1-960911. Details of this review have been distributed to member's representatives. Comments by non-members should be sent to www-style@w3.org.
The review period will end on 11 December 1996 24:00 GMT. Within 14 days from that time, the document's disposition will be announced: it may become a W3C Recommendation (possibly with minor changes), or it may revert to Working Draft status, or it may be dropped as a W3C work item. This document does not at this time imply any endorsement by the Consortium's staff or member organizations.
This document is part of the W3C (http://www.w3.org/) Style Sheets activity.
A list of current W3C Recommendations, Proposed Recommendations and Working Drafts can be found at: http://www.w3.org/pub/WWW/TR
This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.
Abstract
Terminology
1 Basic concepts
1.1 Containment in HTML
1.2 Grouping
1.3 Inheritance
1.4 Class as selector
1.5 ID as selector
1.6 Contextual selectors
1.7 Comments
2 Pseudo-classes and pseudo-elements
2.1 Anchor pseudo-classes
2.2 Typographical pseudo-elements
2.3 The 'first-line' pseudo-element
2.4 The 'first-letter' pseudo-element
2.5 Pseudo-elements in selectors
2.6 Multiple pseudo-elements
3 The cascade
3.1 'important'
3.2 Cascading order
4 Formatting model
4.1 Block-level elements
4.1.1 Vertical formatting
4.1.2 Horizontal formatting
4.1.3 List-item elements
4.1.4 Floating elements
4.2 Inline elements
4.3 Replaced elements
4.4 The height of lines
4.5 The canvas
4.6 'BR' elements
5 CSS1 properties
5.1 Notation for property values
5.2 Font properties
5.2.1 Font matching
5.2.2 'font-family'
5.2.3 'font-style'
5.2.4 'font-variant'
5.2.5 'font-weight'
5.2.6 'font-size'
5.2.7 'font'
5.3 Color and background properties
5.3.1 'color'
5.3.2 'background', 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position'
5.4 Text properties
5.4.1 'word-spacing'
5.4.2 'letter-spacing'
5.4.3 'text-decoration'
5.4.4 'vertical-align'
5.4.5 'text-transform'
5.4.6 'text-align'
5.4.7 'text-indent'
5.4.8 'line-height'
5.5 Box properties
5.5.1 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'
5.5.2 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'padding'
5.5.3 'border', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-color', 'border-width', 'border-style', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
5.5.4 'width'
5.5.5 'height'
5.5.6 'float'
5.5.7 'clear'
5.6 Classification properties
5.6.1 'display'
5.6.2 'list-style', 'list-style-position', 'list-style-image'
5.6.3 'white-space'
6 Units
6.1 Length units
6.2 Percentage units
6.3 Color units
6.4 URL
7 CSS1 conformance
7.1 forward-compatible grammar
7.2 Parsing conventions
8 References
9 Acknowledgments
Appendix A: Sample style sheet for HTML 2.0
Appendix B: A sample lex/yacc grammar
Appendix C: Encoding
Appendix D: Gamma correction
Appendix E: The applicability and extensibility of CSS1
In the text of this specification, single quotes ('...') denote HTML and CSS excerpts.
Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say:
H1 { color: blue }
The example above is a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.
The selector is the link between the HTML document and the style, and all HTML tags are possible selectors. HTML tags are defined in the HTML specification [2], and the CSS1 specification defines a syntax for how to address them.
The 'color' property is one of around 35 properties that determine the presentation of an HTML document. The list of properties and their possible values is defined in this specification.
HTML authors need to write style sheets only if they want to suggest a specific style for their documents. Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner. Appendix A contains a sample style sheet to present HTML documents as suggested in the HTML 2.0 specification.
In order for the style sheets to influence the presentation, the UA must be aware of their existence. Another forthcoming W3C specification, HTML3 and Style Sheets [4], specifies how to link HTML with style sheets. This section is therefore informative, but not normative:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
The example shows four ways to combine style and HTML: using the 'LINK' element to link an external style sheet, a 'STYLE' element inside the 'HEAD' element, an imported style sheet using the CSS '@import' notation, and a 'STYLE' attribute on an element inside 'BODY'. The latter option mixes style with content and loses the corresponding 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:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Since the 'STYLE' element is declared as "CDATA" in the DTD (as defined in [4]), conformant SGML parsers will not consider the above style sheet to be a comment that is to be removed.
To reduce the size of style sheets, one can group selectors in comma-separated lists:
H1, H2, H3 { font-family: helvetica }
Similarly, declarations can be grouped:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-style: normal
}
In addition, some properties have their own grouping syntax:
H1 { font: 12pt/14pt helvetica }
The above example sets the 'font-size', 'line-height' and 'font-family' properties.
In the first example, the color of 'H1' elements was set to blue. Suppose we have an 'H1' element with an emphasized element inside:
<H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to 'EM', the emphasized "is" will inherit the color of the parent element, i.e. it will also appear in blue. Other style properties are likewise inherited, e.g. 'font-family' and 'font-size'.
To set a "default" style property for a document, one can set the property on an element from which all visible elements descend. In HTML documents, the 'BODY' element can serve this function:
BODY {
color: black;
background: url(texture.gif) white;
}
This will work even if 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 to be an image. The background will be white if the image is not available. (See the description of the 'background' property for more on this.)
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. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.
Often, the value of a property is a percentage that refers to another property:
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
For each property that allows percentage values, it is defined what property it refers to. Children elements of 'P' will inherit the computed value of 'line-height' (i.e. 12pt), not the percentage.
To increase the granularity of control over elements, HTML3 [4] [5] proposes a new attribute: 'CLASS'. All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.punk { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=punk>Way too green</H1>
</BODY>
</HTML>
The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure.
One can address all elements of the same class by omitting the tag name in the selector:
.punk { color: green } /* all elements with CLASS punk */
Only one class can be specified per selector. 'P.punk.rap' is therefore an invalid selector in CSS1. (Contextual selectors, described below, can have one class per simple selector)
CSS gives so much power to the CLASS attribute, that in many cases it doesn't even matter what HTML element the class is set on -- you can make any element emulate almost any other. Relying on this power is not recommended, since it removes the level of structure that has a universal meaning (HTML elements). A structure based on CLASS is only useful within a restricted domain, where the meaning of a class has been mutually agreed upon.
HTML3 also introduces the 'ID' attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding '#':
#z098y { letter-spacing: 0.3em }
<P ID=z098y>Wide text</P>
By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML. This use of style sheets is discouraged.
Inheritance saves CSS designers typing. Instead of setting all style properties, one can create defaults and then list the exceptions. To give 'EM' elements within 'H1' a different color, one may specify:
H1 { color: blue }
EM { color: red }
When this style sheet is in effect, all emphasized sections within or outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to turn red and this can be specified with:
H1 EM { color: red }
The selector is now a search pattern on the stack of open elements, and this type of selector is referred to as a "contextual selector". Contextual selectors consist of several simple selectors separated by white space (all selectors described up to now have been simple selectors). Only elements that match the last simple selector (in this case the 'EM' element) are addressed, and only if the search pattern matches. Contextual selectors in CSS1 look for ancestor relationships, but other relationships (e.g. parent-child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Here, the first selector matches 'LI' elements with at least one 'UL' ancestor. The second selector matches a subset of the first, i.e. 'LI' elements with at least two 'UL' ancestors. The conflict is resolved by the second selector being more specific because of the longer search pattern. See the cascading order (section 3.2) for more on this.
Contextual selectors can look for tags, classes, IDs or combinations of these:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
The first selector matches all 'P' elements that have a 'DIV' among the ancestors. The second selector matches matches all 'H1' elements that have an ancestor of class 'reddish'. The third selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. The fourth selector matches all 'H1' elements that have a 'DIV' ancestor with class 'sidenote'.
Several contextual selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Which is equivalent to:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Textual comments in CSS style sheets are similar to those in the C programming language:
EM { color: red } /* red, really red!! */
Comments cannot be nested.
In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn't cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process.
Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the UA under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a "fictional tag sequence" where they have a well-defined order.
Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
All 'A' elements with an 'HREF' attribute will be put into one and only one of these groups (i.e. target anchors are not affected). UAs may choose to move an element from 'visited' to 'link' after a certain time. An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.
The formatting of an anchor pseudo-class is as if the class had been inserted manually. A UA is not required to reformat a currently displayed document due to anchor pseudo-class transitions. E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
Pseudo-class selectors do not match normal classes, and vice versa. The style rule in the example below will therefore not have any influence:
A:link { color: red }
<A CLASS=link NAME=target5> .. </A>
Anchor pseudo-classes have no effect on elements other than 'A'.
Pseudo-classes can be used in contextual selectors:
A:link IMG { border: solid blue }
Also, pseudo-classes can be combined with normal classes:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
If the link in the above example has been visited, it will be rendered in blue. Note that normal class names precede pseudo-classes in the selector.
Some common typographical effects are associated not with structural elements but rather with typographical items as formatted on the canvas. In CSS1, two such typographical items can be addressed through pseudo-elements: the first line of an element, and the first letter.
CSS1 core: UAs may ignore all rules with ':first-line' or ':first-letter' in the selector, or, alternatively, only support a subset of the properties on these pseudo-elements. (see section 7)
The 'first-line' pseudo-element is used to apply special styles to the first line as formatted on the canvas:
<STYLE TYPE="text/css">
P:first-line { font-style: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
On a text-based UA, this could be formatted as:
THE FIRST LINE OF AN article in Newsweek.
The fictional tag sequence in the above example is: "<P> <P:first-line> The first line of an </P:first-line> article in Newsweek.</P>". The 'first-line' end tag is inserted at the end of the first line as formatted on the canvas.
The 'first-line' pseudo-element can only be attached to a block-level element.
The 'first-line' pseudo-element is similar to an inline element, but with certain restrictions. Only the following properties apply to a 'first-line' element: font properties (5.2), color and background properties (5.3), 'text-decoration' (5.4.3), 'vertical-align (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.7).
The 'first-letter' pseudo-element is used for "initial caps" and "drop caps", which are common typographical effects. It is similar to an inline element if its 'float' property is 'none', otherwise it is similar to a floating element. These are the properties that apply to 'first-letter' pseudo-elements: font properties (5.2), color and background properties (5.3), 'text-decoration' (5.4.3), 'vertical-align (only if 'float' is 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), margin properties (5.5.1), padding properties (5.5.2), border properties (5.5.3), 'float' (5.5.6), 'clear' (5.5.7).
This is how you could make a dropcap initial letter span two lines:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
(The 'SPAN' element is being proposed as a new character-level element)
If an text-based UA supports the 'first-letter' pseudo-element (we do not expect them to), the above could be formatted as:
___ | HE FIRST few | words of an article in the Economist.
The fictional tag sequence is: "<P> <SPAN> <P:first-letter> T </P:first-letter> he first </SPAN> few words of an article in the Economist. </P>". Note that the 'first-letter' pseudo-element tags abut the content (i.e. the initial character), while the 'first-line' pseudo-element start tag is inserted right after the start tag of the element it is attached to.
The UA defines what characters are inside the 'first-letter' element. Normally, quotes that precede the first letter should be included:
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
When the paragraph starts with other punctuation (e.g. parenthesis and ellipsis points) or other characters that are normally not considered letters (e.g. digits and mathematical symbols), 'first-letter' pseudo-elements are usually ignored.
Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, they should both be considered within the 'first-letter' pseudo-element.
The 'first-letter' pseudo-element can only be attached to a block-level element.
In a contextual selector, pseudo-elements are only allowed in the last simple selector:
BODY P:first-letter { color: purple }
Pseudo-elements can be combined with classes in selectors:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
The above example would make the first letter of all 'P' elements with 'CLASS=initial' red. When combined with classes or pseudo-classes, pseudo-elements must be specified at the end of the selector. Only one pseudo-element can be specified per selector.
Several pseudo elements can be combined:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
In this example, the first letter of each 'P' element would be green with a font size of 24pt. The rest of the first line (as formatted on the canvas) would be blue while the rest of the paragraph would be red. Assuming that a line break will occur before the word "ends", the fictional tag sequence is: "<P> <P:first-line> <P:first-letter> S </P:first-letter> ome text that <P:/first-line> ends up on two lines </P>".
Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.
If a pseudo-element breaks up a real element the necessary extra tags must be regenerated in the fictional tag sequence. For example, if a SPAN element spans over a </P:first-line> tag, a set of SPAN end and start tags must be regenerated and the fictional tag sequence becomes: "<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span element </SPAN>".
In CSS, more than one style sheet can influence the presentation simultaneously. There are two main reasons for this feature: modularity and author/reader balance.
@import url(http://www.style.org/punk);
@import url(http://www.style.org/funk);
H1 { color: red } /* override imported sheets */
Sometimes conflicts will arise between the style sheets that influence the presentation. Conflict resolution is based on each style rule having a weight. By default, the weights of the reader's rules are less than the weights of rules in the author's documents. I.e., if there are conflicts between the style sheets of an incoming document and the reader's personal sheets, the author's rules will be used. Both reader and author rules override the UA's default values.
Style sheet designers can increase the weights of their declarations:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
In the example above, the first three declarations have increased weight, while the last declaration has normal weight.
A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.
Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.
This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, e.g. through a pull-down menu.
A declaration in the 'STYLE' attribute of an element (see section 1.1 for an example) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
In the above example, the color of the 'P' element would be red. Although the specificity is the same for both declarations, the declaration in the 'STYLE' attribute will override the one in the 'STYLE' element because of cascading rule number 5.
The UA may choose to honor other stylistic HTML attributes, for example 'ALIGN'. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 1. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.
CSS1 assumes a simple box-oriented formatting model where each element results in one or more boxes. All boxes have a core content area with optional surrounding padding, border and margin areas.
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
The size of the margin, border and padding are set with the 'margin', 'border' and 'padding' properties respectively. The padding area uses the same background as the element itself (set with the 'background' property). The color and style for the border is set with the 'border' properties. The margins are always transparent, so the parent element will shine through.
The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas.
From the formatter's point of view there are two main types of elements: block-level and inline.
Elements with a 'display' value of 'block' or 'list-item' are "block-level" elements. Also, floating elements (elements with a 'float' value other than 'none') are formatted as block-level elements.
The following example shows how margins and padding format a 'UL' element with two children. To simplify the diagram there are no borders.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D; /* let's pretend we have constants in CSS1 */
padding: E F G H; /* " */
}
LI {
color: white;
background: blue; /* so text is white on blue */
margin: a b c d; /* let's pretend we have constants in CSS1 */
padding: e f g h; /* " */
}
</STYLE>
..
<UL>
<LI>1st element of list
<LI>2nd element of list
</UL>
_______________________________________________________ | | | A UL margin (transparent) | | _______________________________________________ | | D | | B | | | E UL padding (red) | | | | _______________________________________ | | | | H | | F | | | | | a LI margin (transparent, | | | | | | so red shines through) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI padding (blue) | | | | | | | | | | | | | | | | h 1st element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- note the max | | | _______________________________ | | | | | | | | | | | | | | d | e LI padding (blue) | | | | | | | | | | | | | | | | h 2nd element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI margin (transparent, | | | | | | so red shines through) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Technically, padding and margin properties are not inherited. But, as the example shows, the placement of an element is relative to ancestors and siblings, so these elements' padding and margin properties have an effect on their children.
If the border width had been set (the default value is '0'), the border would have appeared between the padding and the margins.
The following diagram introduces some useful terminology:
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
The left outer edge is the edge of an element with its padding, border and margin taken into account. The left inner edge is the edge of the content only, inside any padding, border or margin. Ditto for right. The top is the top of the object including any padding, border and margin; it is only defined for inline, and floating elements, not for non-floating block elements. The inner top is the top of the content, inside any padding, border or margin. The bottom is the bottom of the element, outside any padding border and margin. The inner bottom is the bottom of the element, inside any padding, border and margin.
The width of an element is the width of the content, i.e., the distance between left inner edge and right inner edge. The height is the height of the content, i.e., the distance from inner top to inner bottom.
The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, the result is visually more pleasing and closer to what the designer expects. In the example above, the margins between the two 'LI' elements are collapsed by using the maximum of the first LI element's 'margin-bottom' and the second LI element's 'margin-top'. Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements should have been collapsed.
In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
The horizontal position and size of a non-floating, block-level element is determined by seven properties: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these seven is always equal to the 'width' of the parent element.
By default, the 'width' of an element is 'auto'. If the element is not a replaced element, this means that the 'width' is calculated by the UA so that the sum of the seven properties mentioned above is equal to the parent width. If the element is a replaced element, a value of 'auto' for 'width' is automatically replaced by the element's intrinsic width.
Three of the seven properties can be set to 'auto': 'margin-left', 'width' and 'margin-right'. For replaced elements, a value of 'auto' on 'width' is replaced by the intrinsic width, so for them there can only be two 'auto' values.
The 'width' has a non-negative UA-defined minimum value (which may vary from element to element and even depend on other properties). If 'width' goes below this limit, either because it was set explicitly, or because it was 'auto' and the rules below would make it too small, the value will be replaced with the minimum value instead.
If exactly one of 'margin-left', 'width' or 'margin-right' is 'auto', the UA will assign that property a value that will make the sum of the seven equal to the parent's width.
If none of the properties are 'auto', the value of 'margin-right' will be ignored and 'margin-right' will be treated as if it were 'auto'.
If more than one of the three is 'auto', and one of them is 'width', than the others ('margin-left' and/or 'margin-right') will be set to zero and 'width' will get the value needed to make the sum of the seven equal to the parent's width.
Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.
If 'auto' is set as the value for one of the seven properties in an element that is inline or floating, it will be treated as if it were set to zero.
Unlike vertical margins, horizontal margins are not collapsed.
Elements with a 'display' property value of 'list-item' are formatted as block-level elements, but preceded by a label. The type of label is determined by the 'list-style' property. The label is placed according to the value of the 'list-style' property:
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL CLASS=COMPACT>
<LI>first list item comes first
<LI>second list item comes second
</UL>
The above example may be formatted as:
* first list item
comes first
* second list item
comes second
* first list
item comes first
* second list
item comes second
Using the 'float' property, an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element. For example, by setting the 'float' property of an image to 'left', the image is moved to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. The margins, borders and padding of the element itself will be honored, and the margins never collapse with the margins of adjacent elements.
A floating element is positioned subject to the following constraints (see section 4.1 for an explanation of the terms):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<IMG SRC=img.gif>
<P>Some sample text to has no other..
</BODY>
The above example could be formatted as:
________________________________________ | | max(BODY margin, P margin) | ______________________________ | | | Some sample text | B | P | IMG margins that have no other | O | | _____ purpose than to | D | m | | | show how floating | Y | a | | IMG | elements are moved | | r | | | to the side of the | m | g | |_____| parent element | a | i | while honoring | r | n | margins, borders | g | | and padding. Note | i | |how adjacent vertical margins | n | |are collapsed between non- | | |floating 'block elements.
There are two situations when floating elements can overlap with the margin, border and padding areas of other element:
Elements that are not block-level are "inline" elements. An inline element can share line space with other elements. Consider this example:
<P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>
The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline elements. If the 'P' element is wide enough to format the whole element on one line, there will be two inline elements on the line:
Several emphasized words appear.
If there is not enough room on one line an inline element will be split into several boxes:
<P>Several <EM>emphasized words</EM> appear here.</P>
The above example may be formatted as:
Several emphasized words appear here.
If the inline element has margins, borders, padding or text decorations attached, these will have no effect where the element is broken:
----------
Several |emphasized
----------
-----
words| appear here.
-----
(The "figure" above is slightly distorted due to the use of ASCII graphics. See section 4.4 for a description of how to calculate the height of lines.
A replaced element is an element which is replaced by content pointed to from the element. E.g., in HTML, the IMG element is replaced by the image pointed to by the SRC attribute. One can assume that replaced elements come with their own intrinsic dimensions. If the CSS value for 'width' is 'auto', the intrinsic width is used as the width of the element. If a value other than 'auto' is specified in the style sheet, this value is used and the replaced element is resized accordingly (the resize method will depend on the media type). The 'height' property is used in the same manner.
Replaced elements can be either block-level or inline.
All elements other than replaced elements have a 'line-height' property that, in principle, gives the total height of a line of text. Space is added above and below the text of the line to arrive at that line height. For example, if the text is 12pt high and 'line-height' is set to '14pt', an extra space of 2pt is added, namely 1pt above and 1pt below the line. Empty elements influence these calculations just like elements with content.
The difference between the font size and the 'line-height' is called the leading. Half the leading is called the half-leading. After formatting, each line will form a rectangular line-box.
If a line of text contains sections with different 'line-height' values (because there are inline elements on the line), then each of those sections has its own half-leading above and below. The height of the line-box is from the top of the highest section to the bottom of the lowest one. (Note that the top and bottom do not necessarily correspond to the tallest element, since elements can be positioned vertically with the 'vertical-align' property.) To form a paragraph, each line-box is stacked immediately below the previous line.
Note that any padding, border or margin above and below inline elements does not influence the height of the line. In other words: if the 'line-height' is too small for the chosen padding or border, it will overlap with text on other lines.
Replaced elements (e.g. images) on the line can make the line-box bigger, if the top of the replaced element (including all of its padding, border and margin) is above the tallest text section, or if the bottom is below the lowest.
In the normal case, when there is only one value of 'line-height' throughout a paragraph, and no tall images, the definition above will ensure that baselines of successive lines are exactly 'line-height' apart. This is important when columns of text in different fonts have to be aligned, for example in a table.
Note that this doesn't preclude the text on two adjacent lines from overlapping each other. The 'line-height' may be smaller than the height of the text, in which case the leading will be negative. This is actually quite useful if you know that the text will contain no descenders (because it only contains uppercase, e.g.), so the lines can be put closer together.
The canvas is the part of the UA's drawing surface onto which documents are rendered. No structural element of a document corresponds to the canvas, and this raises two issues when formatting a document:
A reasonable answer to the first question is that the initial size of the canvas is based on the window size, but CSS1 leaves this issue for the UA to decide. It is also reasonable to expect the UA to change the canvas size when the window is resized, but this is also outside the scope of CSS1.
HTML extensions have set a precedent for the second question: attributes on the 'BODY' element set the background of the whole canvas. To support designers' expectations, CSS1 introduces a special rule to find the canvas background:
If the 'background' value of the 'HTML' element is different from 'transparent' then use it, else use the 'background' value of the 'BODY' element. If the resulting value is 'transparent', the rendering is undefined.
This rule allows:
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
In the example above, the canvas will be covered with "marble". The background of the 'BODY' element (which may or may not fully cover the canvas) will be red.
Until other means of addressing the canvas become available, we recommend setting canvas properties on the 'BODY' element.
The current CSS1 properties and values cannot describe the behavior of the 'BR' element. In HTML, the 'BR' element specifies a line break between words. In effect, the element is replaced by a line break. We expect future versions of CSS to handle added and replaced content, but CSS1-based formatters must treat 'BR' specially.
Style sheets influence the presentation of documents by assigning values to style properties. This section lists the defined style properties, and their corresponding list of possible values, of CSS1. See section 7 for the conformance requirements.
In the text below, the allowed values for each property are listed with a syntax like the following:
Value: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: [<family-name> , ]* <family-name>
Value: <url>? <color> [ / <color> ]?
Value: <url> || <color>
The words between "<" and ">" give a type of value. The most common types are <length>, <percentage>, <url>, <number> and <color>; these are described in the section on units. The more specialized types (e.g. <font-family> and <border-style>) are described under the property where they appear.
Other words are keywords that must appear literally, without quotes. The slash (/) and the comma (,) must also appear literally.
Several things juxtaposed mean that all of them must occur, in the given order. A bar (|) separates alternatives: one of them must occur. A double bar (A || B) means that either A or B or both must occur, in any order. Brackets ([]) are for grouping. Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e ]]".
Every type, keyword, or bracketed group may be followed by one of the following modifiers:
Setting font properties will be among the most common uses of style sheets. Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts, and terms that apply to one font family may not be appropriate for others. E.g. 'italic' is commonly used to label slanted text, but slanted text may also be labeled as being Oblique, Slanted, Incline, Cursive or Kursiv. Therefore it is not a simple problem to map typical font selection properties to a specific font.
CSS1 defines the properties 'font-family', 'font-size', 'font-weight', 'font-style', 'font-variant' and 'font'. Additional font characteristics are being worked on in the W3C Fonts working group. These will complement the properties defined in CSS1.
Because there is no accepted, universal taxonomy of font properties, matching of properties to font faces must be done carefully. The properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across UAs (assuming that the same library of font faces is presented to each of them).
(The above algorithm can be optimized to avoid having to revisit the CSS1 properties for each character.)
The per-property matching rules from (2) above are as follows:
Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS1 properties, values are separated by a comma to indicate that they are alternatives:
BODY { font-family: gill, helvetica, sans-serif }
There are two types of list values:
Font names containing white space should be quoted:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
If quoting is omitted, any white space characters before and after the font name are ignored and any sequence of white space characters inside the font name is converted to a single space.
Value: normal | italic | oblique
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.
A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.
The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
In the example above, emphasized text within 'H1' will appear in a normal face.
Value: normal | small-caps
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.
A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.
The following example results in an 'H3' element in small-caps, with emphasized words in oblique small-caps:
H3 { font-variant: small-caps }
EM { font-style: oblique }
There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS1 has no properties that select those.
CSS1 core: insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:
STRONG { font-weight: bolder }
Child elements inherit the resultant weight, not the keyword value.
Fonts (the font data) typically have one or more properties whose values are names that are descriptive of the "weight" of a font. There is no accepted, universal meaning to these weight names. Their primary role is to distinguish faces of differing darkness within a single font family. Usage across font families is quite variant; for example a font that you might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or DemiBold, Bold, or Black, depending on how black the "normal" face of the font is within the design. Because there is no standard usage of names, the weight property values in CSS1 are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for that family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.
The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of darkness within that family. However, the following heuristics tell how the assignment is done in typical cases:
The following two examples illustrate the process. Assume four weights in the "Example1" family, from lightest to darkest: Regular, Medium, Bold, Heavy. And assume six weights in the "Example2" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note how in the second example it has been decided not to assign "Example2 ExtraBlack" to anything.
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
Since the intent of the relative keywords 'bolder' and 'lighter' is to darken or lighten the face within the family and because a family may not have faces aligned with all the symbolic weight values, the matching of 'bolder' is to the next darker face available on the client within the family and the matching of 'lighter' is to the next lighter face within the family. To be precise, the meaning of the relative keywords 'bolder' and 'lighter' is as follows:
There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, others may have eight different face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent element's font size
Length and percentage values should not take the font size table into account when calculating the font size of the element.
On all other properties, 'em' and 'ex' length values refer to the font size of the current element. On the 'font-size' property, these length units refer to the font size of the parent element.
Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.
Examples:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
If the suggested scaling factor of 1.5 is used, the last three rules are identical.
Value: [ <font-style> || <font-variant> || <font-weight> ]?
<font-size> [ / <line-height> ]? <font-family>
Initial: not defined
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height>
This syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts: 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family'. For a definition of allowed and initial values, see the previously defined properties. Setting the 'font' property is equivalent to including separate declarations at the same point in the style sheet. Properties for which no values are given are set to their initial value.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.
In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.
The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property describes the text color of an element, i.e. the "foreground" color. There are different ways to specify red:
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
See section 6.3 for a complete description of possible color values.
Value: see individual properties below
Initial: see individual properties below
Applies to: all elements, except 'background-position' which
only applies to block-level and replaced elements
Inherited: no
Percentage values: allowed on 'background-position', refer to the size of the element itself
These properties describe the background of an element, i.e. the surface onto which the content is rendered. One can set a background color and/or a background image. The position of the image, if/how it is repeated, and whether it is fixed or scrolled relative to the canvas can also be set.
These properties do not inherit, but the parent element's background will shine through by default because of the initial transparent value.
Possible values on the 'background' properties are the set of all possible values on the individual properties.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
The 'background' property always sets all the individual properties. In the first rule of the above example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.
H1 { background-color: #F00 }
BODY { background-image: url(marble.gif) }
P { background-image: none }
A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
In the example above, the image will only be repeated vertically.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. (See section 7.)
The 'background-position' property only applies to block-level and replaced elements.
With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.
With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the element.
If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.
One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:
examples:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
If the background image is fixed with regard to the canvas (see the 'background-attachment' property above), the image is placed relative to the canvas instead of the element. E.g.:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
In the example above, the image is placed in the lower right corner of the canvas.
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).
H1 { word-spacing: 0.4em }
Here, the word-spacing between each word in 'H1' elements would be increased with '1em'.
CSS1 core: UAs may interpret any value of 'word-spacing' as 'normal'. (See section 7.)
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).
BLOCKQUOTE { letter-spacing: 0.1em }
Here, the word-spacing between each character in 'BLOCKQUOTE' elements would be increased with '0.1em'.
With a value of 'normal', the UAs may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.
CSS1 core: UAs may interpret any value of 'letter-spacing' as 'normal'. (See section 7.)
Value: none | [ underline || overline || line-through || blink ]
Initial: none
Applies to: all elements
Inherited: no, but see clarification below
Percentage values: N/A
This property describes decorations that are added to the text of an element. If the element has no text (e.g. the IMG element in HTML) or is an empty element (e.g. "<EM></EM>"), this property has no effect. 'Blink' causes the text to blink.
The color(s) required for the text decoration should be derived from the 'color' property value.
This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.
A:link, A:visited, A:active { text-decoration: underline }
The example above would underline the text of all links (i.e., all 'A' elements with a 'HREF' attribute).
We expect UA vendors to propose several new values on this property.
UAs must recognize the keyword 'blink', but are not required to support the blink effect.
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself
The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.
Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been.
Note: This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.
Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A
The actual transformation in each case is human language dependent.
H1 { text-transform: uppercase }
The example above would put 'H1' elements in uppercase text.
CSS1 core: UAs may ignore 'text-transform' (i.e., treat it as 'none') for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of Unicode.
Note: see [10] for suggested ways to find the language of an element.
Value: left | right | center | justify
Initial: UA specific
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.
Example:
DIV.center { text-align: center }
Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.
CSS1 core: UAs may treat 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.
Value: <length> | <percentage>
Initial: 0
Applies to: block-level elements
Inherited: yes
Percentage values: refer to parent element's width
The property specifies the indentation that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).
Example:
P { text-indent: 3em }
Value: normal | <number> |
<length> | <percentage>
Initial: normal
Applies to: all elements except replaced elements
Inherited: yes
Percentage values: relative to the font size of the element itself
The property sets the distance between two adjacent lines' baselines.
When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).
Negative values are not allowed.
The three rules in the example below have the same resultant line height:
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.
See the section 4.7 for a description on how 'line-height' influences the formatting of a block-level element.
See the formatting model (section 4) for examples on how to use the box properties.
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
These properties set the margin of an element: the 'margin' property sets the border for all four sides while the other properties only set their respective side.
For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The 'margin' property is shorthand for setting 'margin-top', 'margin-right' 'margin-bottom' and 'margin-left' at the same place in the style sheet. These properties allow only one value. The last rule of the example above is equivalent to the example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
For more examples on how these properties are used, see the formatting model (section 4).
Negative margin values are allowed, but there may be implementation-specific limits.
Value: [ <length> | <percentage> ]{1,4} (for 'padding' only)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
These properties describe how much space to insert between the border and the content (e.g. text or image). The 'padding' property sets the border for all four sides while the other properties only set their respective side.
For the 'padding' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The surface of the padding area is set with the 'background' property:
H1 {
background: white;
padding: 1em 2em;
}
The example above sets a '1em' padding vertically ('padding-top' and 'padding-bottom') and a '2em' padding horizontally ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.
Padding values cannot be negative.
See the formatting model (section 4) for more on these properties.
These properties set the borders of an element. Each element has four borders, one on each side, that are defined by their width, color and style. The initial value of the border widths is 'medium', border styles are 'none' and border colors are taken from the 'color' property of the element. Using these properties, the initial values of the borders can be modified. The descriptions of width and style values are given after the description of the properties.
The 'border' property is a shorthand for setting the same border width, color and style on all four sides. For example, the first rule below is equivalent to the set of four rules shown after it:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Unlike 'margin' and 'padding', the 'border' property cannot set different values on the four sides. To do so, one or more of the other border properties must be used.
These properties set the width, style and color on one of the four borders that surround an element.
H1 { border-bottom: thick solid red }
The above rule will set the width, style and color of the border below the H1 element. Omitted values will be set to their initial values:
H1 { border-bottom: thick solid }
Since the color value is omitted in the example above, the border color will be the same as the 'color' value of the element itself.
The 'border-color' property sets the color of the four borders. 'border-color' can have from one to four values, with the following interpretation:
If no color value is specified, the value of the 'color' property of the element itself will take its place:
P {
color: black;
background: white;
border: solid;
}
In the above example, the border will be a solid black line.
The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-color' above.
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
Since the initial value of the border styles is 'none', no borders will be visible unless the initial style is changed.
The 'border-width' property is a shorthand for the four properties 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'. It can have from one to four values, and the values are set on the different sides as for 'border-color' above.
These properties set the width of a single border.
H1 { border-top-width: 0.2em }
Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.
Here is the list of values and their description:
The keyword widths are constant throughout a document:
H1 { border: solid thick red }
P { border: solid thick blue }
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To do relative width, the 'em' unit can be used:
H1 { border: solid 0.5em }
The border styles mean:
CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' and 'outset' as 'solid'.
Value: <length> | <percentage> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to parent element's width
This property can be applied to text elements, but it is most useful with replaced elements such as images. The width is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image is preserved if the 'height' property is 'auto'.
Example:
IMG.icon { width: 100px }
If the 'width' and 'height' of a replaced element are both 'auto', these properties will be set to the intrinsic dimensions of the element.
Negative values are not allowed.
See the formatting model (section 4) for a description of the relationship between this property and the margin and padding.
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A
This property can be applied to text, but it is most useful with replaced elements such as images. The height is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image is preserved if the 'width' property is 'auto'.
Example:
IMG.icon { height: 100px }
If the 'width' and 'height' of a replaced element are both 'auto', these properties will be set to the intrinsic dimensions of the element.
If applied to a textual element, the height can be enforced with e.g. a scrollbar.
Negative values are not allowed.
CSS1 core: UAs may ignore the 'height' property (i.e., treat it as 'auto') if the element is not a replaced element.
With the value 'none', the element will be displayed where it appears in the text. With a value of 'left' ('right') the element will be moved to the left ('right') and the text will wrap on the right (left) side of the element. With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored). See section 4.1.4 for a full specification.
IMG.icon {
float: left;
margin-left: 0;
}
The above example will place all IMG elements with 'CLASS=icon' along the left side of the parent element.
This property is most often used with inline images, but also applies to text elements.
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With 'clear' set to 'left', an element will be moved below any floating element on the left side. With 'clear' set to 'none', floating elements are allowed on all sides. Example:
H1 { clear: left }
These properties classify elements into categories more than they set specific visual parameters.
Value: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A
An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'. A value of 'list-item' is similar to 'block' except that a list item marker (determined by the 'list-item' property) is added. In HTML, 'LI' will typically have this value.
An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.
A value of 'none' turns off the display of the element, including children elements and the surrounding box.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
The last rule turns off the display of images.
The initial value of 'display' is 'block', but a UA will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification [2].
CSS1 core: UAs may ignore 'display' and use only the UA's default values. (See section 7.)
Value: <keyword> || <position> || <url>
(for 'list-style')
Initial: disc outside
Applies to: elements with 'display' property value 'list-item'
Inherited: yes
Percentage values: N/A
The 'list-style' property describes how list items (i.e. elements with a 'display' value of 'list-item') are formatted.
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-image', 'list-style-type' and 'list-style-position'. The value of 'list-style-image' is: [none | <url>], with initial value 'none'. The value of 'list-style-position' is: [<position>], with initial value 'outside'. The value of 'list-style-type' is [<keyword>], with initial value 'disc'.
This property can be set on any element, and it will inherit normally down the tree. However, the 'list-style' will only be displayed on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.
UL { list-style: disc inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
OL { list-style: decimal } /* 1 2 3 4 5 etc. */
OL { list-style: lower-alpha } /* a b c d e etc. */
OL { list-style: lower-roman } /* i ii iii iv v etc. */
Setting 'list-style' directly on 'LI' elements can have unexpected results. Consider:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all 'LI' elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
In the above example, inheritance will transfer the 'list-style' values from 'OL' and 'UL' elements to 'LI' elements.
A URL value can be combined with any other value:
UL { list-style: url(http://png.com/ellipse.png) disc }
In the example above, the 'disc' will be used when the image is unavailable.
Value: normal | pre | nowrap
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
This property declares how white space inside the element is handled: the 'normal' way (where white space is collapsed), as 'pre' (which behaves like the 'PRE' element in HTML) or as 'nowrap' (where wrapping is done only through BR elements):
PRE { white-space: pre }
P { white-space: normal }
The initial value of 'white-space' is 'normal', but a UA will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification [2].
CSS1 core: UAs may ignore the 'white-space' property in author's and reader's style sheets, and use the UA's default values instead. (See section 7.)
The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional.
Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be clipped to the nearest value that can be supported.
There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.
These relative units are supported:
H1 { margin: 0.5em } /* ems, the height of the element's font */
H1 { margin: 1ex } /* x-height, ~ the height of the letter 'x' */
P { font-size: 12px } /* pixels, relative to canvas */
The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested "reference pixel" is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.
Child elements inherit the computed value, not the relative value:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }
In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.
Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.
The format of a length value is a number (with or without a decimal point) immediately followed by '%'.
Percentage values are always relative to a length unit. Each property that allows percentage units also defines what length unit they refer to. Most often this is the font size of the element itself:
P { line-height: 120% } /* 120% of the element's 'font-size' */
In all inherited CSS1 properties, if the value is specified as a percentage, child elements inherit the resultant value, not the percentage value.
A color is a either a color name or a numerical RGB specification.
The suggested list of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette and will also be used in HTML 3.2. The RGB values for these color names are not defined in this specification.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications. These examples all specify the same color:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
These RGB colors are specified in the sRGB color space, see Part 1 of [6]. UAs may vary in the fidelity with which they represent these colors, but use of sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards [15].
UAs may limit their efforts in displaying colors to performing a gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified viewing conditions. UAs adjust the colors given in CSS such that, in combination with an output device's "natural" display gamma, an effective display gamma of 2.2 is produced. Appendix D gives further details of this. Note that only colors specified in CSS are affected; images are expected to carry their own color information.
Values outside the numerical ranges should be clipped. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped to 255 */
EM { color: rgb(110%, 0%, 0%) } /* clipped to 100% */
A Uniform Resource Locator (URL) is identified with a functional notation:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:
BODY { background: url(yellow) }
Parentheses and commas appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.
A User Agent that uses CSS1 to display documents conforms to the CSS1 specification if it:
A User Agent that outputs CSS1 style sheets conforms to the CSS1 specification if it:
A User Agent that uses CSS1 to display documents and outputs CSS1 style sheets conforms to the CSS1 specification if it meets both sets of conformance requirements.
A UA does not have to implement all the functionality of CSS1: it can be conformant to CSS1 by implementing the core functionality. The core functionality consists of the whole CSS1 specification except those parts explicitly excluded. In the text, those parts are marked with "CSS1 core:" followed by an explanation of what functionality is outside the core functionality. The set of features excluded from the core functionality is called CSS1 advanced features.
This section only defines conformance to CSS1. There will be other levels of CSS in the future that may require a UA to implement a different set of features in order to be compliant.
Examples of constraints of the presentation medium are: limited resources (fonts, color) and limited resolution (so margins may not be accurate). In these cases, the UA should approximate the style sheet values. Also, different user interface paradigms may have their own constraints: a VR browser may rescale the document based on its "distance" from the user.
UAs may offer readers additional choices on presentation. For example, the UA may provide options for readers with visual impairments or may provide the choice to disable blinking.
Note that CSS1 does not specify all aspects of formatting. E.g., the UA is free to select a letter-spacing algorithm.
This specification also recommends, but doesn't require, that a UA:
The above conformance rules describe only functionality, not user interface.
This section and the next describe a "meta-syntax", in the sense that they define the limits within which CSS1 and all future extensions will have to remain. In other words, the CSS1 language is a subset of the language described here, and all later versions of CSS are intended to be subsets of that language as well. Implementors must create parsers that are "forward compatible": when unknown constructions are encountered, the text below tells the parser how much of the input can be safely skipped.
Here is an EBNF-like grammar:
stylesheet : CDO? rules? CDC?
rules : [ at-rule | rule ]+
rule : selector decl-block
at-rule : AT_KEYWORD token* [ ';' | decl-block | rule-block ]
selector : token+
decl-block : '{' declarations '}'
rule-block : '{' rules '}'
declarations : declaration? [ ';' declaration? ]*
declaration : IDENT ':' token+
token : IDENT | '[' token* ']' | '(' token* ')' |
SYMBOL | ':' | ',' | STRING | NUMBER | DIM
Note that this grammar is not LL(1); in practice, it will depend on the AT_KEYWORD whether an at-rule ends with a semicolon, a decl-block or a rule-block.
In English, the grammar says: a style sheet is a list of rules (normal rules or @-rules), each rule ends either with a semicolon (;) or with a block ({...}). Blocks contain either declarations (keyword-colon-value), or they contain more rules, in which case they may be nested. Note that nested blocks are not used in CSS1.
The style sheet may be enclosed in <!-- and -->, which is useful when it is embedded in an HTML document.
Besides the 9 punctuation characters ( , : ; [ ] ( ) { } ), the lexical tokens of CSS are:
IDENT : namestart namechar*
AT_KEYWORD : '@' IDENT
NUMBER : [ '-' | '+' ]? decimal+
| [ '-' | '+' ]? decimal* '.' decimal+
DIM : NUMBER IDENT
STRING : '"' [ stringchar | escape | sq ]* '"'
| sq [ stringchar | escape | '"' ]* sq
WS : whitespace+
CDO : '<' '!' '-' '-'
CDC : '-' '-' '>'
SYMBOL : symchar+
Using the following auxiliary definitions:
symchar : '`' | '~' | '!' | '@' | '#' | '$' | '%' | '^' | '&' |
'*' | '-' | '_' | '+' | '=' | '|' | '<' | '>' | '.' |
'/' | '?'
stringchar : <any printable character except ' and " including space>
decimal : '0' | ... | '9'
hex : '0' | ... | '7' | 'A' | ... | 'F'
sq : <a single quote: ' >
namestart : letter | latin1 | escape
namechar : letter | latin1 | escape | decimal | '-'
letter : 'A' | ... | 'Z' | 'a' | ... | 'z'
latin1 : <a Latin 1 character (codes 161-255)>
escape : unicode | '\' printable
unicode : '\' hex [ hex [ hex hex? ]? ]? ]?
printable : <any printable character including space>
whitespace : <tab> | <space> | <newline> | comment
comment : '/' '*' any* '*' '/'
any : <any character>
These definitions assume the Latin 1 character set. Future versions of CSS may widen some of them to allow Unicode characters.
Paraphrased in English:
In case of ambiguity, take the longest match, except for comments.
In order for CSS implementations to be interoperable, as well as being prepared for future extensions to CSS, a conforming UA must follow these parsing conventions:
IMG { float: left } /* CSS1 */
IMG { float: left top } /* CSSx */
In the above example, a CSS1 parser would honor the first rule and ignore the second. A CSSx parser would accept both rules, but the last would override the first due to cascading.
Note: The CLASS attribute of HTML allows more characters in a class name than the set allowed for selectors above. In CSS1, these characters have to be escaped or written as Unicode numbers: "B&W?" can be written as "B\&W\?" or "B\26W\3F", "κουρος" (Greek: "kouros") has to be written as "\3BA\3BF\3C5\3C1\3BF\3C2". It is expected that in later versions of CSS more characters can be entered directly.
As a help to implementers, a more detailed grammar for CSS1 is included in appendix B.
[1] The W3C resource page on web style sheets (http://www.w3.org/pub/WWW/Style)
[2] RFC 1866: Hypertext Markup Language - 2.0, (ftp://ds.internic.net/rfc/rfc1866.txt). The specification is also available in hypertext form (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)
[3] ISO 8879. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML), 1986.
[4] HTML3 and Style Sheets (http://www.w3.org/pub/WWW/TR/WD-style.html)
[5] HyperText Markup Language Specification Version 3.0 (http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html). The draft has now expired
[6] M Anderson, R Motta, S Chandrasekar, M Stokes: Proposal for a Standard Color Space for the Internet - sRGB (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)
[7] T Berk, L Brownston, A Kaufman: A New Color-Naming System for Graphics Languages, IEEE CG&A, May 1982
[8] DSSSL (http://occam.sjf.novell.com:8080/dsssl/dsssl96) is a tree transformation and style language from the SGML community. Bert Bos has written some notes on Translating CSS to DSSSL (http://www.w3.org/pub/WWW/Style/css/css2dsssl.html)
[9] Frame-based layout via Style Sheets (http://www.w3.org/pub/WWW/TR/WD-layout.html)
[10] F Yergeau, G Nicol, G Adams, M Dürst: Internationalization of the Hypertext Markup Language (ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).
[11] Gamma Appendix of PNG Specification (http://www.w3.org/pub/WWW/TR/PNG-GammaAppendix.html)
[12] PNG specification (http://www.w3.org/pub/WWW/TR/REC-png-multi.html)
[13] Gamma correction on the Macintosh Platform (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium Profile, version 3.2 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3, (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
During the short life of HTML, there have been several style sheet proposals to which this proposal is indebted. Especially the proposals from Robert Raisch, Joe English and Pei Wei were influential.
A number of people have contributed to the development of CSS1. We could especially like to thank: Terry Allen, Murray Altheim, Glenn Adams, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, Gilles Kahn, Philippe Kaplan, Phil Karlton. Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.
Three people deserve special mentioning: Dave Raggett (for his encouragement and work on HTML3), Chris Lilley (for his continued contributions, especially in the area of colors and fonts) and Steven Pemberton (for his organizational as well as creative skills).
(This appendix is informative, not normative)
The following style sheet is written according to the suggested rendering in the HTML 2.0 specification. Some styles, e.g. colors, have been added for completeness. It is suggested that a style sheet similar to the one below is used as a UA default.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relative to the parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* tight formatting */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom' could also have been used */
A:link { color: blue } /* unvisited link */
A:visited { color: red } /* visited links */
A:active { color: lime } /* active links */
/* setting the anchor border around IMG elements
requires contextual selectors */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(This appendix is informative, not normative)
The minimal CSS grammar that all implementations need to support is defined in section 7. However, that grammar is not very helpful when implementing CSS1. Hopefully, the yacc/lex grammar below better serves that purpose.
The format of the productions is optimized for human consumption and some shorthand notation beyond yacc is used:
* : 0 or more + : 1 or more ? : 0 or 1 | : separates alternatives [] : grouping
The productions are:
stylesheet
: CDO? import* ruleset* CDC?
;
import
: IMPORT_SYM [STRING|URL] ';' /* E.g., @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
/*
* The only operators in CSS1 are slash, space and comma.
* An expression `a b c, d e f' stands for a list
* [[a,b,c],[d,e,f]]. Note that `a,b,c' is the list
* [a,b,c], *not* [[a],[b],[c]].
*/
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ ':' pseudo_element ]?
;
/*
* A simple_selector is something like H1, PRE.FOO,
* .FOO, etc., or it is an ID: #p004
*
* DOT_WO_WS is a `.' without preceding whitespace.
* DOT_W_WS is a `.' with preceding whitespace.
*/
simple_selector
: element_name [ DOT_WO_WS class ]? pseudo_class?
| DOT_W_WS class
| id_selector
;
element_name
: IDENT
;
pseudo_class
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class
: IDENT
;
pseudo_element
: IDENT
;
id_selector
: '#' IDENT
;
declaration
: property ':' expr prio?
| /* empty */ /* Prevents syntax errors... */
;
prio
: IMPORTANT_SYM /* !important" */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | HEXCOLOR | URL | RGB ]
;
The following is the input to a lex/flex scanner. Note that this assumes an 8-bit implementation of (f)lex.
%{
#include "constants.h"
/*
The constants include definitions similar to the following:
#define INCH (25.4 * MM)
#define CM (10 * MM)
#define MM 1
#define PICA (12 * INCH/72 * MM)
#define POINT (INCH/72 * MM)
*/
%}
%a 3000
%o 4000
unicode \\[0-7A-Z]{1,6}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-zA-Z]|{latin1}|{escape}
nmchar [-a-zA-Z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
d [0-9]
notnm [^-a-zA-Z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
h [0-9a-fA-F]
h3 {h}{h}{h}
h6 {h3}{h3}
h9 {h3}{h3}{h3}
%x COMMENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(INITIAL);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import return IMPORT_SYM;
"!"{w}important return IMPORTANT_SYM;
{ident} {yylval.sym = str2Symbol(yytext); return IDENT;}
\"({stringchar}|\')*\" |
\'({stringchar}|\")*\' {yylval.str = noquotes(yytext); return STRING;}
{num} {yylval.num = atof(yytext); return NUMBER;}
{num}"%" {yylval.num = atof(yytext); return PERCENTAGE;}
{num}pt/{notnm} {yylval.num = atof(yytext) * POINT; return LENGTH;}
{num}mm/{notnm} {yylval.num = atof(yytext); return LENGTH;}
{num}cm/{notnm} {yylval.num = atof(yytext) * CM; return LENGTH;}
{num}pc/{notnm} {yylval.num = atof(yytext) * PICA; return LENGTH;}
{num}in/{notnm} {yylval.num = atof(yytext) * INCH; return LENGTH;}
{num}px/{notnm} {yylval.num = atof(yytext) * pixelwd; return LENGTH;}
{num}em/{notnm} {yylval.num = atof(yytext); return EMS;}
{num}ex/{notnm} {yylval.num = atof(yytext); return EXS;}
":"link {return LINK_PSCLASS;}
":"visited {return VISITED_PSCLASS;}
":"active {return ACTIVE_PSCLASS;}
"#"{h9} |
"#"{h6} |
"#"{h3} {yylval.str = yytext; return HEXCOLOR;}
"url("[^\n)]+")" {yylval.str = noquotes(yytext+3); return URL;}
"rgb("{w}{num}%?{w},{w}{num}%?{w},{w}{num}%?"{w})" {yylval.str = yytext; return RGB;}
":" return ':';
^"." |
[ \t]+"." return DOT_W_WS;
"." return DOT_WO_WS;
"/" return '/';
"+" return '+';
"-" return '-';
"{" return '{';
"}" return '}';
";" return ';';
"," return ',';
"#" return '#';
[ \t]+ {/* ignore whitespace */}
\n {/* ignore whitespace */}
\<\!\-\- return CDO;
\-\-\> return CDC;
. {yyerror("Illegal character");}
(This appendix is informative, not normative)
HTML documents may contain any of the about 30,000 different characters defined by Unicode. Many documents only need a few hundred. Many fonts also only contain just a few hundred glyphs. In combination with section 5.2, this appendix explains how the characters in the document and the glyphs in a font are matched.
The content of an HTML document is a sequence of characters and markup. To send it "over the wire", it is encoded as a sequence of bytes, using one of several possible encodings. The HTML document has to be decoded to find the characters. For example, in Western Europe it is customary to use the byte 224 for an a-with-grave-accent (à), but in Hebrew, it is more common to use 224 for an Aleph. In Japanese, the meaning of a byte usually depends on the bytes that preceded it. In some encodings, one character is encoded as two (or more) bytes.
The UA knows how to decode the bytes by looking at the "charset" parameter in the HTTP header. Typical encodings (charset values) are "ASCII" (for English), "ISO-8859-1" (for Western Europe), "ISO-8859-8" (for Hebrew), "Shift-JIS" (for Japanese).
HTML (assuming the HTML-i18n document [10] is adopted), allows some 30,000 different characters, namely those defined by Unicode. Not many documents will use that many different characters, and choosing the right encoding will usually ensure that the document only needs one byte per character. Occasional characters outside the encoded range can still be entered as numerical character references: 'Π' will always mean the Greek uppercase Pi, no matter what encoding was used. Note that this entails that UAs have to be prepared for any Unicode character, even if they only handle a few encodings.
A font doesn't contain characters, it contains pictures of characters, known as glyphs. The glyphs, in the form of outlines or bitmaps, constitute a particular representation of a character. Either explicitly or implicitly, each font has a table associated with it, the font encoding table, that tells for each glyph what character it is a representation for. In Type 1 fonts, the table is referred to as an encoding vector.
In fact, many fonts contain several glyphs for the same character. Which of those glyphs should be used depends either on the rules of the language, or on the preference of the designer.
In Arabic, for example, all letters have four different shapes, depending on whether the letter is used at the start of a word, in the middle, at the end, or in isolation. It is the same character in all cases, and thus there is only one character in the HTML document, but when printed, it looks differently each time.
There are also fonts that leave it to the graphic designer to choose from among various alternative shapes provided. Unfortunately, CSS1 doesn't yet provide the means to select those alternatives. Currently, it is always the default shape that is chosen from such fonts.
To deal with the problem that a single font may not be enough to display all the characters in a document, or even a single element, CSS1 allows the use of font sets.
A font set in CSS1 is a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. An element that contains English text mixed with mathematical symbols may need a font set of two fonts, one containing letters and digits, the other containing mathematical symbols. See section 5.2 for a detailed description of the selection mechanism for font sets.
Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
The characters available in the Baskerville font (a font with only Latin characters) will be taken from that font, Japanese will be taken from Mincho, and the mathematical symbols will come from Symbol. Any other characters will (hopefully) come from the generic font family 'serif'. The 'serif' font family will also be used if one or more of the other fonts is unavailable.
(This appendix is informative, not normative)
See the Gamma Tutorial [11] in the PNG specification [12] if you aren't already familiar with gamma issues.
In the computation, UAs displaying on a CRT may assume an ideal CRT and ignore any effects on apparent gamma caused by dithering. That means the minimal handling they need to do on current platforms is:
"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.
This may rapidly be done by building a 256-element lookup table once per browser invocation thus:
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
which then avoids any need to do transcendental math per color attribute, far less per pixel.
(This appendix is informative, not normative)
The goal of the work on CSS1 has been to create a simple style sheet mechanism for HTML documents. The current specification is a balance between the simplicity needed to realize style sheets on the web, and pressure from authors for richer visual control. CSS1 offers:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
with the style sheet:
H1 { font-style: small-caps }
<H1>Headline</H1>
CSS1 does not offer:
We expect to see extensions of CSS in several directions:
We do not expect CSS to evolve into: