CSS

REC-CSS1-19990111


Cascading Style Sheets, level 1
W3C Recommendation 17 Dec 1996, revised 11 Jan 1999

Status of this document
This document is a W3C Recommendation. It has been reviewed by W3C
(http://www.w3.org/)
Members and general consensus that the specification is appropriate for use has been reached. It
is a stable document and may be used as reference material or cited as a normative reference
from another document. W3C promotes widespread deployment of this Recommendation.
A list of current W3C Recommendations and other technical documents can be found at
http://www.w3.org/TR/
.
This document is a revised version of the document first released on 17 December 1996.
Changes from the original version are listed in Appendix F. The list of known errors in this
specification is available at http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata

Abstract
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.
This Recommendation results from W3C activities in the area of Style Sheets
. For background
information on style sheets, see [1].
Table of contents
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-color'
5.3.3 'background-image'
5.3.4 'background-repeat'
5.3.5 'background-attachment'
5.3.6 'background-position'
5.3.7 'background'
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'
5.5.2 'margin-right'
5.5.3 'margin-bottom'
5.5.4 'margin-left'
5.5.5 'margin'
5.5.6 'padding-top'
5.5.7 'padding-right'
5.5.8 'padding-bottom'
5.5.9 'padding-left'
5.5.10 'padding'
5.5.11 'border-top-width'
5.5.12 'border-right-width'
5.5.13 'border-bottom-width'
5.5.14 'border-left-width'
5.5.15 'border-width'
5.5.16 'border-color'
5.5.17 'border-style'
5.5.18 'border-top'
5.5.19 'border-right'
5.5.20 'border-bottom'
5.5.21 'border-left'
5.5.22 'border'
5.5.23 'width'
5.5.24 'height'
5.5.25 'float'
5.5.26 'clear'
5.6 Classification properties
5.6.1 'display'
5.6.2 'white-space'
5.6.3 'list-style-type'
5.6.4 'list-style-image'
5.6.5 'list-style-position'
5.6.6 'list-style'
6 Units
6.1 Length units
6.2 Percentage units
6.3 Color units
6.4 URL
7 CSS1 conformance
7.1 Forward-compatible parsing
8 References
9 Acknowledgments

Appendix A: Sample style sheet for HTML 2.0

Appendix B: CSS1 grammar
Appendix C: Encoding
Appendix D: Gamma correction

Appendix E: The applicability and extensibility of CSS1
Appendix F: Changes from the 17 December 1996 version
Terminology
attribute
HTML attribute
author
the author of an HTML document
block-level element
an element which has a line break before and after (e.g. 'H1' in HTML)
canvas
the part of the UA's drawing surface onto which documents are rendered
child element
a subelement in SGML [5] terminology
contextual selector
a selector that matches elements based on their position in the document structure. A
contextual selector consists of several simple selectors. E.g., the contextual selector
'H1.initial B' consists of two simple selectors, 'H1.initial' and 'B'.
CSS
Cascading Style Sheets
CSS1
Cascading Style Sheets, level 1. This document defines CSS1 which is a simple style
sheet mechanism for the web.
CSS1 advanced features
features that are described in this specification but labeled as not among the CSS1 core
features
CSS1 core features
the part of CSS1 that is required in all CSS1 conforming UAs
CSS1 parser
a User Agent that reads CSS1 style sheets
declaration
a property (e.g. 'font-size') and a corresponding value (e.g. '12pt')
designer
the designer of a style sheet
document
HTML document
element
HTML element
element type
a generic identifier in SGML [5]
terminology
fictional tag sequence
a tool for describing the behavior of pseudo-classes and pseudo-elements
font size
The size for which a font is designed. Typically, the size of a font is approximately equal
to the distance from the bottom of the lowest letter with a descender to the top of the
tallest letter with an ascender and (optionally) with a diacritical mark.
HTML
Hypertext Markup Language [2]
, an application of SGML.
HTML extension

Markup introduced by UA vendors, most often to support certain visual effects. The
"FONT", "CENTER" and "BLINK" elements are examples of HTML extensions, as is
the "BGCOLOR" attribute. One of the goals of CSS is to provide an alternative to HTML
extensions.
inline element
an element which does not have a line break before and after (e.g. 'STRONG' in HTML)
intrinsic dimensions
the width and height as defined by the element itself, not imposed by the surroundings. In
this specification it is assumed that all replaced elements -- and only replaced elements --
come with intrinsic dimensions.
parent element
the containing element in SGML [5]
terminology
pseudo-element
pseudo-elements are used in CSS selectors to address typographical items (e.g. the first
line of an element) rather than structural elements.
pseudo-class
pseudo-classes are used in CSS selectors to allow information external to the HTML
source (e.g. the fact that an anchor has been visited or not) to classify elements.
property
a stylistic parameter that can be influenced through CSS. This specification defines a list
of properties and their corresponding values.
reader
the person for whom the document is rendered
replaced element
an element that the CSS formatter only knows the intrinsic dimensions of. In HTML,
'IMG', 'INPUT', 'TEXTAREA', 'SELECT' and 'OBJECT' elements can be examples of
replaced elements. E.g., the content of the 'IMG' element is often replaced by the image
that the SRC attribute points to. CSS1 does not define how the intrinsic dimensions are
found.
rule
a declaration (e.g. 'font-family: helvetica') and its selector (e.g. 'H1')
selector
a string that identifies what elements the corresponding rule applies to. A selector can
either be a simple selector (e.g. 'H1') or a contextual selector (e.g. 'H1 B') which consists
of several simple selectors.
SGML
Standard Generalized Markup Language [5]
, of which HTML is an application
simple selector
a selector that matches elements based on the element type and/or attributes, and not he
element's position in the document structure. E.g., 'H1.initial' is a simple selector.
style sheet
a collection of rules
UA
User Agent, often a web browser or web client
user
synonymous with reader
weight
the priority of a rule
In the text of this specification, single quotes ('...') denote HTML and CSS excerpts.

1 Basic concepts
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 sheet, and all HTML element
types are possible selectors. HTML element types are defined in the HTML specification [2]
.
The 'color' property is one of around 50 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 [3].
The formal grammar for the CSS1 language is defined in Appendix B.
1.1 Containment in HTML
In order for the style sheets to influence the presentation, the UA must be aware of their
existence. The HTML specification [2] define 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 a 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 [2]
), conforming
SGML parsers will not consider the above style sheet to be a comment that is to be removed.
1.2 Grouping
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-variant: normal;
font-style: normal;
}
In addition, some properties have their own grouping syntax:
H1 { font: bold 12pt/14pt helvetica }
which is equivalent