Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
11062 lines (8512 sloc) 396 KB
WD-CSS2-971104
CSS2 Specification
W3C Working Draft 04-November-1997
Abstract
This specification defines Cascading Style Sheet, Level 2.
Status of this document
This is a W3C Working Draft for review by W3C members and other interested
parties. It is a draft document and may be updated, replaced or obsoleted by
other documents at any time. It is inappropriate to use W3C Working Drafts
as reference material or to cite them as other than "work in progress". This
is work in progress and does not imply endorsement by, or the consensus of,
either W3C or members of the CSS working group.
This document has been produced as part of the W3C Style Activity, and is
intended as a draft of a proposed recommendation for CSS2.
If you did not get this document directly from the W3C website you may want
to check whether you have the latest version of this document by looking at
the list of W3C technical reports at <http://www.w3.org/TR/>.
CSS2 builds on CSS1, specified in http://www.w3.org/TR/REC-CSS1-961217. All
valid CSS1 stylesheets are valid CSS2 stylesheets.
Editors
* Bert Bos <bbos@w3.org>
* Håkon Wium Lie <howcome@w3.org>
* Chris Lilley <chris@w3.org>
* Ian Jacobs <ij@w3.org>
Comments
Please send detailed comments on this document to the editors. We cannot
guarantee a personal response but we will try when it is appropriate. Public
discussion on CSS features takes place on www-style@w3.org and messages are
archived at http://lists.w3.org/Archives/Public/www-style/.
Table of Contents
1 About the CSS2 Specification
1.1 How to read the specification
1.2 How the specification is organized
1.3 Acknowledgments
2 Introduction to CSS2
2.1 A brief CSS2 tutorial
2.2 Design principles behind CSS2
3 Definitions and document conventions
3.1 Definitions
3.1.1 Document language
3.1.2 Element
3.1.3 User agent (or UA)
3.1.4 Conforming user agent
3.1.5 Default style sheet
3.2 Conventions
3.2.1 Document language elements and attributes
3.2.2 CSS property definitions
3.2.3 HTML conventions
4 CSS2 syntax and basic data types
4.1 Syntax
4.1.1 Tokenization
4.1.2 Characters and case
4.1.3 Statements
4.1.4 At-rules
4.1.5 Blocks
4.1.6 Rule sets, declaration blocks, and selectors
4.1.7 Declarations and properties
4.1.8 Comments
4.1.9 More examples
4.2 Values
4.2.1 Integers and numbers
4.2.2 Lengths
4.2.3 Percentages
4.2.4 URLs
4.2.5 Colors
4.2.6 Angles
4.2.7 Time
4.2.8 Frequencies
4.3 CSS embedded in HTML
4.4 CSS as a stand-alone file
4.5 Character escapes in CSS
5 CSS2 processing model
5.1 Introduction to the CSS2 processing model
5.2 The document tree
5.3 Inheritance
5.4 Rendering objects
6 Selectors
6.1 Type selectors
6.2 Grouping
6.3 Attribute selectors
6.3.1 Matching attributes, single values, and multiple values
6.3.2 The class and id attribute in HTML
6.3.3 The class attribute in other document languages: @class
6.3.4 The id attribute
6.4 Contextual selectors
6.5 Parent-child selectors
6.6 Sequential selectors
6.7 Pseudo-elements and pseudo-classes
6.7.1 The :first-line pseudo-element
6.7.2 The :first-letter pseudo-element
6.7.3 Overlapping pseudo-elements
6.7.4 Pseudo-elements with contextual selectors
6.7.5 Anchor pseudo-classes: :link, :active, and :visited
6.7.6 Combining pseudo-elements with normal classes
6.7.7 Colliding attribute selectors and pseudo-classes
7 Cascade
7.1 Cascading order
7.1.1 'Important' rules
7.1.2 Cascading order in HTML
7.1.3 Precedence of non-CSS presentational hints
8 Media types
8.1 Introduction to media types
8.2 Specifying media-dependent style sheets
8.2.1 The @media rule
8.2.2 The media-dependent @import rule
8.3 Recognized media types
8.3.1 The canvas
Scrollable media
9 The box model
9.1 Introduction to the box model
9.2 Box dimensions
9.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom',
'margin-left', and 'margin'
Values for <margin-width>
9.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom',
'padding-left', and 'padding'
9.4.1 Values for <padding-width>
9.5 Border properties
9.5.1 Border width: 'border-top-width', 'border-right-width',
'border-bottom-width', 'border-left-width', and 'border-width'
Values for <border-width>
9.5.2 Border color: 'border-top-color', 'border-right-color',
'border-bottom-color', 'border-left-color', and 'border-color'
9.5.3 Border style: 'border-top-style', 'border-right-style',
'border-bottom-style', 'border-left-style', and 'border-style'
Values for <border-style>
9.6 Example of margins, padding, and borders
10 Visual rendering model
10.1 Introduction to the visual rendering model
10.2 Establishing box positions
10.2.1 Containing blocks
10.2.2 Direction of flow
10.3 Normal flow
10.3.1 Block-level layout
List-item elements
10.3.2 Inline layout
Anonymous text boxes
10.3.3 Dual-mode elements: run-in and compact
10.3.4 Relative positioning
10.3.5 Controlling layout behavior: the 'display' property
10.4 Floats: 'float' and 'clear'
10.4.1 Controlling floats
10.5 Absolute positioning
10.5.1 Properties to specify position: 'top', 'right', 'bottom', 'left'
10.5.2 Fixed positioning
10.6 Comparison of normal, relative, floating, absolute positioning
10.6.1 Normal flow
10.6.2 Relative positioning
10.6.3 Floating a box
10.6.4 Absolute positioning
10.7 Z-order: Layered presentation
10.7.1 Specifying the stack level: the 'z-index' property
10.8 Multicolumn layout
11 Visual rendering model details
11.1 Box width calculations: the 'width' property
11.1.1 Relationship of width dimensions
11.1.2 Width of floats and replaced elements
11.1.3 Width of absolutely positioned elements
11.1.4 Minimum and maximum widths: 'min-width' and 'max-width'
11.2 Box height calculations: the 'height' property
11.2.1 Height of replaced elements
11.2.2 Height of absolutely positioned elements
11.2.3 Minimum and maximum heights: 'min-height' and 'max-height'
11.2.4 Collapsing margins
11.3 Line height calculations: the 'line-height' and 'vertical-align'
properties
11.4 Floating constraints
11.5 Overflow and clipping
11.5.1 Overflow: the 'overflow' property
11.5.2 Clipping: the 'clip' property
11.6 Visibility: the 'visibility' property
11.7 Dynamic positioning
11.8 Filters
12 Paged media
12.1 Introduction to paged media
12.2 Page breaks
12.2.1 Page break properties: 'page-break-before', 'page-break-after',
'orphans', and 'widows'
12.2.2 Allowed page breaks
12.2.3 Forced page breaks
12.2.4 "Best" page breaks
12.3 Page boxes: the @page rule
12.3.1 Page margins
12.3.2 Page size: the 'size' property
Rendering page boxes that do not fit a target sheet
12.3.3 Crop marks: the 'marks property
12.3.4 Left and right pages
12.3.5 Running headers and footers
12.3.6 Marking elements for the running headers & footers
12.3.7 Content outside the page box
12.4 Cascading in the page context
13 Colors and Backgrounds
13.1 Foreground color: the 'color' property
13.2 Background properties: 'background-color', 'background-image',
'background-repeat', 'background-attachment', 'background-position', and
'background'
14 Fonts
14.1 Introduction
14.2 Font specification
14.2.1 Font specification properties
14.2.2 Font family: the 'font-family'
14.2.3 Font style: the 'font-style', 'font-variant', and 'font-weight'
properties
14.2.4 Font size: the 'font-size' property
14.2.5 Shorthand font property: the 'font' property
14.2.6 Generic font families
serif
sans-serif
cursive
fantasy
monospace
14.3 Font selection
14.3.1 Font Descriptions and @font-face
14.3.2 Descriptors for Selecting a Font: 'font-family', 'font-style',
'font-variant', 'font-weight', and 'font-size'
14.3.3 Descriptors for Font Data Qualification: 'unicode-range'
14.3.4 Descriptor for Numeric Values: 'units-per-em'
14.3.5 Descriptor for Referencing: 'src'
14.3.6 Descriptors for Matching: 'panose-1', 'stemv', 'stemh', 'slope',
'cap-height', 'x-height', 'ascent', and 'descent'
14.3.7 Descriptors for Synthesis: 'widths' and 'definition-src'
14.3.8 Descriptors for Alignment: 'baseline', 'centerline', 'mathline',
and 'topline'
14.4 Font Characteristics
14.4.1 Introducing Font Characteristics
14.4.2 Adorned font name
14.4.3 Central Baseline
14.4.4 Co-ordinate units on the em square
14.4.5 Font encoding tables
14.4.6 Font family name
14.4.7 Glyph Representation widths
14.4.8 Horizontal stem width
14.4.9 Height of capital glyph representations
14.4.10 Height of lowercase glyph representations
14.4.11 Lower Baseline
14.4.12 Mathematical Baseline
14.4.13 Maximal bounding box
14.4.14 Maximum unaccented height
14.4.15 Maximum unaccented depth
14.4.16 Panose-1 number
14.4.17 Range of Unicode characters
14.4.18 Top Baseline
14.4.19 Vertical stem width
14.4.20 Vertical stroke angle
14.5 Font matching algorithm
14.5.1 Examples of font matching
15 Text
15.1 Indentation: the 'text-indent' property
15.2 Alignment: the 'alignment' property
15.3 Decoration
15.3.1 Underlining, over lining, striking, and blinking: the
'text-decoration' property
15.3.2 Text shadows: the 'text-shadow' property
15.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing'
properties
15.5 Case
15.5.1 Capitalization: the 'text-transform' property
15.5.2 Special first letter/first line
15.6 White space: the 'white-space' property
15.7 Generated text
15.8 Automatic numbering
15.9 Text in HTML
15.9.1 Forcing a line break
16 Lists
16.1 Visual formatting of lists
16.1.1 List properties: 'list-style-type', 'list-style-image',
'list-style-position', and 'list-style'
17 Tables
17.1 Table layout
17.1.1 Row and column properties: 'column-span', and 'row-span'
17.2 Computing widths and heights
17.3 Placement of the borders
17.4 Conflict resolution for borders
17.5 Properties for columns and rows
17.6 Vertical alignment of cells in a row
17.7 Horizontal alignment of cells in a column
17.8 Table captions: the 'caption-side' property
17.9 Generating speech: the 'speak-header-cell' property
17.10 Table implementation notes
18 User interface
18.1 Cursors: the 'cursor' property
18.2 User preferences for colors
18.3 Other rendering issues that depend on user agents
18.3.1 Magnification
19 Aural style sheets
19.1 Aural cascading style sheet properties
19.1.1 Volume properties: 'volume'
19.1.2 Speaking properties: 'speak'
19.1.3 Pause properties: 'pause-before', 'pause-after', and 'pause'
19.1.4 Cue properties: 'cue-before', 'cue-after', and 'cue'
19.1.5 Mixing properties: 'play-during'
19.1.6 Spatial properties: 'azimuth' and 'elevation'
19.1.7 Voice characteristic properties: 'speech-rate', 'voice-family',
'pitch', 'pitch-range', 'stress', 'richness', 'speak-punctuation',
'speak-date', 'speak-numeral', and 'speak-time'
Appendix A: A sample style sheet for HTML 4.0
Appendix B: Changes from CSS1
Appendix C: Implementation and performance notes
Colors
Gamma Correction
Fonts
Glossary of font terms
Font retrieval
Appendix D: The grammar of CSS2
Appendix E: Aids to Web Fonts implementation
Meaning of the Panose Digits
Deducing Unicode Ranges for TrueType
References
Normative references
Informative references
Index
1 About the CSS2 Specification
Contents
1. How to read the specification
2. How the specification is organized
3. Acknowledgments
This document has been written with two types of readers in mind: CSS
authors and CSS implementors. We hope the specification will provide authors
with the tools they need to write efficient, attractive, and accessible
documents, without overexposing them to CSS's implementation details.
Implementors, however, should find all they need to build user agents that
interpret CSS correctly.
The specification has been written with two modes of presentation in mind:
electronic and printed. Although the two presentations will no doubt be
similar, readers will find some differences. For example, links will not
work in the printed version (obviously), and page numbers will not appear in
the electronic version. In case of a discrepancy, the electronic version is
considered the authoritative version of the document.
1.1 How to read the specification
The specification may be approached in several ways:
* Read from beginning to end. The specification begins with a general
presentation of CSS and becomes more and more technical and specific
towards the end. This is reflected in the specification's main table of
contents, which presents topical information, and the indexes, which
present lower level information in alphabetical order.
* Quick access to information. In order to get information about syntax
and semantics as quickly as possible, the electronic version of the
specification includes the following features:
1. Every reference to an property or value is linked to its
definition in the specification.
2. Every page will include links to the table of contents and to the
index, so readers of the electronic version will never be more
than two links away from finding the definition of a property or
value.
1.2 How the specification is organized
This specification includes the following sections:
Section 2: An introduction CSS2
The introduction begins with a brief tutorial in CSS2. The following
section discusses design principles behind CSS2. Finally, we provide a
list of suggested practice for style sheet authors.
Sections 3 - 19: CSS2 reference manual.
The bulk of the reference manual is the definition of CSS2, including
all properties and their values.
Appendixes:
The appendix contains information about a sample style sheet for HTML
4.0, changes from CSS1 , implementation and performance , the grammar
of CSS2, and a list of normative and informative references.
General index:
The general index contains links to key concepts, property and value
definitions, and other useful information.
1.3 Acknowledgments
This specification is the product of the W3C Working Group on Cascading
Style Sheets and Formatting Properties. In addition to the editors of this
specification, the members of the Working Group are: Brad Chase (Bitstream),
Chris Wilson (Microsoft), Daniel Glazman (Electricité de France), Dave
Raggett (W3C/HP), Ed Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood
(SoftQuad), Laurie Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray
Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne
(JavaSoft), Steven Pemberton (CWI), and Thom Phillabaum (Netscape). We thank
them for their continued efforts.
A number of invited experts to the Working Group have contributed: George
Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen
(The Productivity Works), Martin Dürst (Universität Zürich), Roy Platon
(RAL), Todd Fahrner (Verso) and Vincent Quint (W3C).
The section on Web Fonts was strongly shaped by Brad Chase (Bitstream) David
Meltzer (Microsoft Typography) and Steve Zilles (Adobe). The following
people have also contributed in various ways to the section pertaining to
fonts: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP),
Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed
Tecot (Microsoft), Erik van Blokland (LettError), François Yergeau (Alis),
Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf
(Reuters), Paul Haeberli (SGI), and the late Phil Karlton (Netscape).
The section on Paged Media was in large parts authored by Robert Stevahn
(HP) and Stephen Waters (Microsoft).
Robert Stevahn (HP), along with Scott Furman (Netscape) and Scott Isaacs
(Microsoft) were key contributors to CSS Positioning.
Mike Wexler (Adobe) was the editor of the interim Working Draft which
described many of the new features of CSS2.
T.V.Raman (Adobe) made pivotal contributions towards Aural Cascading Style
Sheets and the concepts of Aural presentation.
Todd Fahrner (Verso) researched contemporary and historical browsers to
develop the sample style sheet in the appendix.
Through electronic and physical encounters, the following people have
contributed to the development of CSS2: James Clark, Dan Connolly, Douglas
Rand, Sho Kuwamoto, Donna Converse, Scott Isaacs, Lou Montulli, Henrik
Frystyk Nielsen, Jacob Nielsen, Vincent Mallet, Philippe Le Hegaret, William
Perry, David Siegel, Al Gilman, Jason White, Daniel Dardailler.
The discussions on www-style@w3.org have been influential in many key issues
for CSS. Especially, we would like to thank Bjorn Backlund, Todd Fahrner,
MegaZone, Eric Meyer, David Perrell, Liam Quinn and Chris Wilson for their
participation.
Special thanks to Arnaud Le Hors, whose engineering contributions made this
document work.
Lastly, thanks to Tim Berners-Lee without whom none of this would have been
possible.
2 Introduction to CSS2
Contents
1. A brief CSS2 tutorial
2. Design principles behind CSS2
2.1 A brief CSS2 tutorial
In this tutorial, we show how easy it can be to design simple style sheets.
For this tutorial, you will need to know a little [HTML40] and some basic
desktop publishing terminology.
We begin with the following little HTML document:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
To set the text color of the H1 elements to blue, you can write the
following CSS rule:
H1 { color: blue }
The [HTML40] specification defines how style sheet rules may be included in
or linked to an HTML document (in the element's start tag, in the head of
the document, or linked externally). Please consult the [HTML40]
specification for details and recommended usage.
In our example, we place the rule in the head of the document in a STYLE
element:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
H1 { color: blue }
</STYLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Note that what appears within the STYLE element's start and end tags has CSS
syntax, not HTML syntax.
This example illustrates 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 [HTML40] specification.
The 'color' property is just one of around 100 properties defined in this
specification that determine the presentation of a document.
HTML authors only need to write style sheets if they want to suggest a
specific style for their documents. Each user agent (UA) will have a default
style sheet that presents documents in a reasonable, but arguably mundane,
manner. This specification includes a sample style sheet which describes how
HTML documents typically are rendered.
2.2 Design principles behind CSS2
* backward compatibility
* complementary to structured documents
* cascading
* platform & device independence
* accessibility
* maintainability
* network performance
This section will be expanded
3 Definitions and document conventions
Contents
1. Definitions
1. Document language
2. Element
3. User agent (or UA)
4. Conforming user agent
5. Default style sheet
2. Conventions
1. Document language elements and attributes
2. CSS property definitions
3. HTML conventions
3.1 Definitions
In this section, we begin the formal specification of CSS2, starting with
the contract between authors, documents, users, and user agents.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",
"SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this
document are to be interpreted as described in [RFC2119]. However, for
readability, these words do not appear in all upper case letters in this
specification.
At times, the authors of this specification recommend good practice for
authors and user agents. These recommendations are not normative and
conformance with this specification does not depend on their realization.
These recommendations contain the expression "We recommend ...", "This
specification recommends ...", or some similar wording.
3.1.1 Document language
Style sheets specify the presentation of a document written in another
computer language (such as HTML or XML) which, in this specification, is
referred to as the document language .
3.1.2 Element
The primary syntactic constructs of the document language are called
elements , an SGML term (see [ISO8879]). Most CSS style sheet rules refer to
these elements and specify rendering information for them. Examples of
elements in HTML include "P" (for structuring paragraphs), "TABLE" (for
creating tables), "OL" (for creating ordered lists), etc.
Block-level elments are those elements of the document language that, by
default, are formatted visually as blocks (e.g., paragraphs). Inline
elments are those elements of the document language that do not cause
paragraph breaks (e.g., pieces of text, inline images, etc.)
3.1.3 User agent (or UA)
A user agent is a computer program which interprets a document written in
the document language and associated style sheets by applying the terms of
this specification. A user agent may display a document, read it aloud,
cause it to be printed, convert it, etc.
3.1.4 Conforming user agent
This section defines conformance with the CSS2 specification only. There
may be other levels of CSS in the future that may require a UA to implement
a different set of features in order to conform.
A user agent that elects to implement a topic (e.g., fonts, colors, aural
style sheets, etc.) covered by this specification must adhere to all
pertinent sections of the specification in order to be considered to conform
to CSS2 for that topic. In such cases, a user agent may claim to conform to
part of the CSS2 specification.
A user agent that elects to implement all topics covered by this
specification and that does so in accordance with the specification may
claim to conform to all of CSS2. The inability of a user agent to implement
a specific topic due to the limitations of a particular device (e.g., a user
agent cannot render colors on a monochrome monitor or a black and white
page) does not imply non-conformance.
In addition to the previous conditions, a user agent that uses CSS2 to
display documents conforms to the CSS2 specification if:
* it attempts to retrieve all referenced style sheets and parse them
according to this specification.
* it sorts the declarations according to the cascade order.
A user agent that outputs CSS2 style sheets conforms to the CSS2
specification if it outputs valid CSS2 style sheets.
A user agent that uses CSS2 to display documents and outputs CSS2 style
sheets conforms to the CSS2 specification if it meets both sets of
conformance requirements.
This specification also recommends, but doesn't require, that a UA observe
the following rules (which refer to functionality, not user interface):
* allow the reader to specify personal style sheets
* allow individual style sheets to be turned on and off
* approximate style sheet values even if it can't implement them exactly
according to the specification.
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.
3.1.5 Default style sheet
Conforming user agents must apply a default style sheet (or behave as if
they did) prior to all other style sheets for a document. A user agent's
default style sheet generally presents elements of the document language in
ways that satisfy the expectations that most people have (e.g., for visual
browsers, the EM element in HTML is presented using an italic font).
If a document has associated style sheets, the default style sheet is
considered along with author and user style sheets when determining how
rules cascade.
User agents that don't actually use style sheets to specify default rules
must behave as if they did.
See "A sample style sheet for HTML 4.0" for a recommended default style
sheet for HTML 4.0 documents.
3.2 Conventions
3.2.1 Document language elements and attributes
* CSS property, descriptor, and pseudo-class names are delimited by
single quotes.
* CSS values are delimited by single quotes.
* Document language element names are in upper case letters.
* Document language attribute names are in lower case letters and
delimited by double quotes.
3.2.2 CSS property definitions
Each CSS property definition begins with a summary of key information that
resembles the following:
'Property-name'
Value: Possible constant values or value types
Initial: The initial value
Applies to: Elements this property applies to
Inherited: Whether the property is inherited
Percentage values:How percentage values should be interpreted
The five categories have the following meanings:
Value
This part of the property definition specifies the set of valid values
for the property. Value types may be designated in several ways:
1. constant values (e.g., 'auto', 'disc', etc.)
2. basic data types, which appear between "<" and ">" (e.g.,
<length>, <percentage>, etc.). In the electronic version of the
document, each instance of a basic data type links to its
definition.
3. non-terminals that have the same range of values as a property
bearing the same name (e.g., <border-width>
<background-attachment>, etc.). In this case, the non-terminal
name is the property name (complete with quotes) between "<" and
">" (e.g., <'border-width'>). In the electronic version of the
document, each instance of this type of non-terminal links to the
corresponding property definition.
4. non-terminals that do not share the same name as a property. In
this case, the non-terminal name appears between "<" and ">"
(e.g., <border-width>) and its definition is located near its
first appearance in the specification. In the electronic version
of the document, each instance of this type of non-terminal links
to the corresponding value definition.
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:
o An asterisk (*) indicates that the preceding type, word or group
is repeated zero or more times.
o A plus (+) indicates that the preceding type, word or group is
repeated one or more times.
o A question mark (?) indicates that the preceding type, word or
group is optional.
o A pair of numbers in curly braces ({A,B}) indicates that the
preceding type, word or group is repeated at least A and at most B
times.
The following examples illustrate different value types:
Value: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: [<family-name> , ]* <family-name>
Value: <url>? <color> [ / <color> ]?
Value: <url> || <color>
Initial
The property's default value. If the property is inherited, this is the
value that is given to the root element of the document. Otherwise it
is the value that the property will have if there are no style rules
for it in either the user's or the designer's style sheet.
Applies to
Lists the elements to which the property applies. All elements are
considered to have all properties, but some properties have no
rendering effect on some types of elements. For example, 'font-style'
has no effect if the element is an image.
Inherited
Indicates whether the value of the property is inherited from a parent
element.
Percentage values
Indicates how percentages should be interpreted, if they occur in the
value of the property. If "N/A" appears here, it means that the
property does not accept percentages as values.
3.2.3 HTML conventions
In this specification, most of the examples refer to HTML. For clarity, HTML
elements are written with upper case letters (e.g., HTML, BODY, EM, P) and
HTML attributes are written with lower case letters (e.g., src, class, id).
4 CSS2 syntax and basic data types
Contents
1. Syntax
1. Tokenization
2. Characters and case
3. Statements
4. At-rules
5. Blocks
6. Rule sets, declaration blocks, and selectors
7. Declarations and properties
8. Comments
9. More examples
2. Values
1. Integers and numbers
2. Lengths
3. Percentages
4. URLs
5. Colors
6. Angles
7. Time
8. Frequencies
3. CSS embedded in HTML
4. CSS as a stand-alone file
5. Character escapes in CSS
4.1 Syntax
This section describes a grammar common to any version of CSS (including
CSS2). Future versions of CSS will adhere to this core syntax, although they
may add additional syntactic constraints.
The following descriptions are normative. They are also complemented by the
normative grammar rules presented in Appendix B.
4.1.1 Tokenization
All levels of CSS, level 1, level 2, but also any future levels, use the
same core syntax. This allows UAs to parse (though not, of course,
completely understand) style sheets written in levels of CSS that didn't
exist at the time the UAs were created. Designers can use this feature to
create style sheets that work with downlevel UA, while also exercising the
possibilities of the latest levels of CSS.
CSS style sheets consist of a sequence of tokens. The list of tokens for
CSS2 is as follows. The definitions use Lex-style regular expressions. Octal
codes refer to Unicode. Like in Lex, in case of multiple matches, the
longest match determines the token.
Token Definition
------------------------------------------------------------------------
IDENT {ident}
AT-KEYWORD @{ident}
STRING {string}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URL url\({w}{string}{w}\)|url\({w}([^ \n\'\")]|\\\
|\\\'|\\\"|\\\))+{w}\)
RGB rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)
UNICODE-RANGE U\+[0-9A-F?]{1,8}(-[0-9A-F]{1,8})?
CDO \<!--
CDC -->
DELIM [^][;{} \t\r\n()]
SEMICOLON ;
LBRACE \{
RBRACE \}
LPAR \(
RPAR \)
LBRACK \[
RBRACK \]
WHITESPACE [ \t\r\n]+
COMMENT /\*([^*]|\*[^/])*\*/
The macros in curly braces ({}) above are defined as follows:
Macro Definition
----------------------------------------------------------
ident {nmstart}{nmchar}*
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii [^\0-\177]
escape \\[0-9a-fA-F]{1,6}
nmchar {nmstart}|[-0-9]
num [0-9]+|[0-9]*\.[0-9]+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
stringchar {escape}|{nonascii}|[\40-\176]
Below is the core syntax for CSS. The following sections describe how to use
it. Also see Appendix B, for a more restrictive grammar that is closer to
the CSS level 2 language.
stylesheet : (CDO | CDC | statement)*;
statement : ruleset | at-rule;
at-rule : AT-KEYWORD any* (block | ';');
block : '{' (at-rule | any | block)* '}';
ruleset : selector '{' declaration? (';' declaration)* '}';
selector : any+;
declaration : property ':' value;
property : IDENT;
value : (any | block | AT-KEYWORD)+;
any : IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URL | RGB | HASH | UNICODE-RANGE
| '(' any* ')' | '[' any* ']';
WHITESPACE and COMMENT tokens do not occur in the grammar (to keep it
readable), but any number of these tokens may appear anywhere. The content
of these tokens (the matched text) doesn't matter, but their presence or
absence may change the interpretation of some part of the style sheet. For
example, in CSS2 the WHITESPACE is significant in selectors.
4.1.2 Characters and case
The following rules always hold:
* All CSS style sheets are case-insensitive , except for parts that are
not under the control of CSS. For example, the case-sensitivity of the
HTML attributes 'id' and 'class', of font names, and of URLs lies
outside the scope of this specification. Note in particular that
element names are case-insensitive in HTML, but case-sensitive in XML.
* In CSS2, selectors (element names, classes and IDs) can contain only
the characters [A-Za-z0-9] and [UNICODE] characters 161 and higher,
plus the hyphen (-); they cannot start with a hyphen or a digit; they
can also contain escaped characters and any Unicode character as a
numeric code (see next item).
* The backslash (\) followed by at most six hexadecimal digits (0..9A..F)
stands for the [UNICODE] character with that number.
* Any character except a hexadecimal digit can be escaped to remove its
special meaning, by putting a backslash (\) in front, For example, "\""
is a string consisting of one double quote.
* The two preceding items define backslash-escapes . Backslash-escapes
are always considered to be part of an identifier or a strings (i.e.,
"\7B" is not punctuation, even though "{" is, and "\32" is allowed at
the start of a class name, even though "2" is not).
4.1.3 Statements
A CSS style sheet, for any version of CSS, consists of a list of statements
(see the grammar above). There are two kinds of statements: at-rules and
rule sets. There may be whitespace (spaces, tabs, newlines) around the
statements.
In this specification, the expressions "immediately before" or "immediate
after" mean "with no intervening white space."
4.1.4 At-rules
At-rules start with an at-keyword, which is an identifier with an '@' at the
start (for example, '@import', '@page', etc.). An identifier consists of
letters, digits, hyphens, non-ASCII, and escaped characters.
An at-rule consists of everything up to and including the next semicolon (;)
or the next block (defined shortly), whichever comes first. A CSS UA that
encounters an unrecognized at-rule must ignore the whole of the @-rule and
continues parsing after it.
CSS2 User agents have some additional constraints, e.g., they must also
ignore any '@import' rule that occurs inside a block or that doesn't
preceded all rule sets.
Here is an example. Assume a CSS2 parser encounters this style sheet:
@import "subs.css";
H1 { color: blue }
@import "list.css";
The second '@import' is illegal according to CSS2. The CSS2 parser skips the
whole at-rule, effectively reducing the style sheet to:
@import "subs.css";
H1 { color: blue }
In the following example, the second '@import' rule is invalid, since it
occurs inside a '@media' block.
@import "subs.css";
@media print {
@import "print-main.css";
BODY { font-size: 10pt }
}
H1 {color: blue}
4.1.5 Blocks
A block starts with a left curly brace ({) and ends with the matching right
curly brace (}). In between there may be any characters, except that
parentheses (()), brackets ([]) and braces ({}) always occur in matching
pairs and may be nested. Single (') and double quotes (") also occur in
matching pairs, and characters between them are parsed as a string . See
Tokenization above for the definition of a string.
Here is an example of a block. Note that the right brace between the quotes
does not match the opening brace of the block, and that the second single
quote is an escaped character, and thus doesn't match the opening quote:
{ causta: "}" + ({7} * '\'') }
Note that the above rule is not legal CSS2, but it is still a block as
defined above.
4.1.6 Rule sets, declaration blocks, and selectors
A rule set consists of a selector followed by a declaration block.
A declaration-block (also called a {}-block in the following text) starts
with a left curly brace ({) and ends with the matching right curly brace
(}). In between there is a list of zero or more declarations, separated by
semicolons (;).
The selector (see also the section on selectors consists of everything up
to (but not including) the first left curly brace ({). A selector always
goes together with a {}-block. When a UA can't parse the selector (i.e., it
is not valid CSS2), it should skip (i.e., ignore) the {}-block as well.
Note that CSS2 gives a special meaning to the comma (,) in selectors.
However, since it is not known if the comma may acquire other meanings in
future versions of CSS, the whole statement should be ignored if there is an
error anywhere in the selector, even though the rest of the selector may
look reasonable in CSS2.
For example, since the "&" is not a legal token in a CSS2 selector, a CSS2
UA must ignore the whole second line, and not set the color of H3 to red:
H1, H2 {color: green}
H3, H4 & H5 {color: red}
H6 {color: black}
Here is a more complex example. The first two pairs of curly braces are
inside a string, and do not mark the end of the selector. This is a legal
CSS2 statement.
P[example="public class foo
{
private int x;
foo(int x) {
this.x = x;
}
}"] {color: red}
4.1.7 Declarations and properties
A declaration consists of a property , a colon (:) and a value. Around each
of these there may be whitespace. A property is an identifier, as defined
earlier. Any character may occur in the value, but parentheses (()),
brackets ([]), braces ({}), single quotes (') and double quotes (") must
come in matching pairs. Parentheses, brackets, and braces may be nested.
Inside the quotes, characters are parsed as a string.
To ensure that new properties and new values for existing properties can be
added in the future, a UA must skip a declaration with an invalid property
name or an invalid value. Every CSS2 property has its own syntactic and
semantic restrictions on the values it accepts.
For example, assume a CSS2 parser encounters this style sheet:
H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
P { color: blue; font-vendor: any; /* Invalid: font-vendor */
font-variant: small-caps }
EM EM { font-style: normal }
The second declaration on the first line has an invalid value '12pt'. The
second declaration on the second line contains an undefined property
'font-vendor'. The CSS2 parser will skip these declarations, effectively
reducing the style sheet to:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
4.1.8 Comments
Comments begin with the characters "/*" and end with the characters "*/".
They may occur anywhere where whitespace can occur and their contents have
no influence on the rendering. Comments may not be nested.
CSS also allows the SGML comment delimiters ("<!--" and "-->") in certain
places, but they do not delimit comments. They are included so that style
rules appearing in an HTML source document (in the STYLE element) may be
hidden from pre-HTML3.2 browsers. See HTML4[ref] for more information.
4.1.9 More examples
Here are a few more examples of error handling by a CSS (in particular CSS2)
UA.
* Unknown properties. User agents must ignore a declaration with an
unknown property. For example, if the style sheet is:
H1 { color: red; rotation: 70minutes }
the UA will treat this as if the style sheet had been
H1 { color: red; }
* Illegal values. User agents must treat illegal values, or values with
illegal parts, as if the entire declaration weren't there at all:
IMG { float: left } /* CSS2 */
IMG { float: left here } /* "here" is not a value of 'float' */
IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
IMG { border-width: 3 } /* a unit must be specified for length values */
In the above example, a CSS2 parser would honor the first rule and
ignore the rest, as if the style sheet had been:
IMG { float: left }
IMG { }
IMG { }
IMG { }
A UA conforming to a future CSS specification may accept one or more of
the other rules as well.
* User agents must ignore an invalid at-keyword together with everything
following it, up to and including the next semicolon (;) or brace pair
({...}), whichever comes first. For example, assume the style sheet
reads:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 { color: blue }
The '@three-dee' is illegal according to CSS2. Therefore, the whole
at-rule (up to, and including, the third right curly brace) is ignored.
The CSS2 UA skips it, effectively reducing the style sheet to:
H1 { color: blue }
4.2 Values
4.2.1 Integers and numbers
Some value types may have integer values, denoted by <integer> in this
specification.
Some value types may have number values, denoted by <number> in this
specification. A number may have a decimal point.
In CSS2, numbers and integers are specified in decimal notation only. An
<integer> consists of one or more digits "0" to "9". A <number> can either
be an <integer>, or it can be zero of more digits followed by a dot followed
by one or more digits. Both integers and numbers may be preceded by a "-" or
"+" to indicate the sign.
Note that many properties that allow a number or integer as value actually
restrict the value to some range, often to a non-negative value.
4.2.2 Lengths
The format of a length value (denoted by <length> in this specification) 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 (an abbreviation between one and
four letters). 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 converted to the
nearest value that can be supported.
There are two types of length units: relative and absolute. Relative length
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: em, ex, and px.
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 viewing device */
The 'em' unit, as used in CSS, is equal to the font size used when
rendering an element's text. It may be used for vertical or horizontal
measurement. The 'ex' unit is equal to the font's x-height (the height of
the letter 'x') of the element's font. A font need not contain the letter
"M" to have an 'em' size or the letter "x" to have an x-height; the font
should still define the two units.
Both 'em' and 'ex' refer to the font size of an element except when used in
the 'font-size' property, where they are relative to the font size inherited
from the parent element.
The rule:
H1 { line-height: 1.2em }
means that the line height of the H1 elements will be 20% greater than the
font size of the H1 elements. On the other hand:
H1 { font-size: 1.2em }
means that the font-size of H1 elements will be 20% greater than the font
size inherited by H1 elements.
Please consult the section on line height calculations for more information
about line heights in the visual flow model.
Pixel units are relative to the resolution of the viewing device, 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 do not inherit the relative values specified for their
parent; they inherit the computed values. For example:
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, if H1 is a child of the BODY element.
Absolute length units are only useful when the physical properties of the
output medium are known. These absolute units are supported: in (inches), cm
(centimeters), mm (millimeters), pt (points), and pc (picas).
For example:
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 CSS2 properties, further computations and inheritance
should be based on the approximated value.
4.2.3 Percentages
The format of a percentage value (denoted by <percentage> in this
specification) is an optional sign character ('+' or '-', with '+' being the
default) immediately followed by a number immediately followed by '%'.
Percentage values are always relative to another value, for example a length
unit. Each property that allows percentage units also defines what value the
percentage refers to.
Since child elements inherit the computed, not relative, values specified
for their parent, in the following example, the children of the P element
will inherit a value of 12pt for 'line-height' (i.e., 12pt), the percentage
value (120%):
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
4.2.4 URLs
A Uniform Resource Locator, or URL (denoted by <url> in this
specification) is identified with a functional notation.
For example:
BODY { background: url(http://www.bg.com/pinkish.gif) }
The format of a URL value is 'url(' followed by optional white space
followed by an optional single quote (') or double quote (") character
followed by the URL itself (as defined in [RFC1738]) followed by an optional
single quote (') or double quote (") character followed by optional
whitespace followed by ')'. Quote characters that are not part of the URL
itself must be balanced.
Parentheses, commas, whitespace characters, single quotes (') and double
quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)',
'\,'.
In order to create modular style sheets that are not dependent on the
absolute location of a resource, authors may specify the location of
background images with partial URLs. Partial URLs (as defined in [RFC1808])
are interpreted relative to the base URL of the style sheet, not relative to
the base URL of the source document.
For example, suppose the following rule is located in a style sheet named
basic.css:
BODY { background: url(yellow) }
The background of the source document's BODY will be tiled with whatever
image is described by the resource named yellow in the same directory as
basic.css.
User agents may vary in how they handle URLs that designate unavailable or
inapplicable resources.
4.2.5 Colors
A <color> is a either a keyword or a numerical RGB specification.
The suggested list of keyword 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
their RGB values are not defined in this specification.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is 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% */
In addition to these color keywords, users may specify keywords that
correspond to the colors used by certain objects in the user's environment.
Please consult the section on system colors for more information.
The format of an RGB value in hexadecimal notation is a '#' immediately
followed by either three or six hexadecimal characters. 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.
The format of an RGB value in the functional notation is 'rgb(' followed by
a comma-separated list of three numerical values (either three integer
values in the range of 0-255, or three percentage values, typically in the
range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed
around the numerical values.
Values outside the device gamut should be clipped. For a device whose gamut
is sRGB, the three rules below are 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% */
All RGB colors are specified in the sRGB color space (see [SRGB]). UAs may
vary in the fidelity with which they represent these colors, but using sRGB
provides an unambiguous and objectively measurable definition of what the
color should be, which can be related to international standards
[COLORIMETRY].
Conforming UAs may limit their color-displaying efforts 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. See the section on gamma correction for
further details. Note that only colors specified in CSS are affected; e.g.,
images are expected to carry their own color information.
4.2.6 Angles
Angle units (denoted by <angle> in the text) are used with aural cascading
style sheets.
These following are legal angle units:
* deg: degrees
* grad: gradient
* rad: radians
Values in these units may be negative. They should be normalized to the
range 0-360deg by the UA. For example, -10deg and 350deg are equivalent. The
angle value must be followed immediately by the angle unit without an
intervening space.
The angle value must be immediately followed by the angle unit.
4.2.7 Time
Time units (denoted by <time> in the text) are used with aural cascading
style sheets.
These following are legal time units:
* ms: milliseconds
* s: seconds
Time values may not be negative. The time value must be followed immediately
by the time unit without an intervening space.
4.2.8 Frequencies
Frequency units (denoted by <frequency> in the text) are used with aural
cascading style sheets.
There are two legal frequency units:
* Hz: Hertz
* kHz: kilo Hertz
For example, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a
treble sound.
The frequency value must be followed immediately by the frequency unit
without an intervening space.
4.3 CSS embedded in HTML
CSS style sheets may be embedded in HTML documents, and to be able to hide
style sheets from older UAs, it is convenient put the style sheets inside
HTML comments. The HTML comment tokens "<!--" and "-->" may occur before,
after, and in between the statements. They may have whitespace around them.
When CSS is embedded in HTML, it shares the charset parameter used to
transmit the enclosing HTML document. As with HTML, the value of the charset
parameter is used to convert from the transfer encoding to the document
character set, which is Unicode.
4.4 CSS as a stand-alone file
CSS style sheets may exist in files by themselves, being linked from the
document. In that case the CSS files are served with the media type
text/css. As with all text media types, a charset parameter may be added
which is used to convert from the transfer encoding to Unicode.
4.5 Character escapes in CSS
CSS may need to use characters which are outside the encoding used to
transmit the document. For example, the "class" attribute of HTML allows
more characters in a class name than the set allowed for selectors above. In
CSS2, such characters can be escaped or written as Unicode numbers:"B&W?"
can be written as "B\&W\?" or "B\26W\3F". For example, a document
transmitted as ISO-8859-1 (Latin-1) cannot contain Greek letters directly:
"??????" (Greek: "kouros") has to be written as "\3BA\3BF\3C5\3C1\3BF\3C2".
These escapes are thus the CSS equivalent of numeric character references in
HTML or XML documents.
5 CSS2 processing model
Contents
1. Introduction to the CSS2 processing model
2. The document tree
3. Inheritance
4. Rendering objects
5.1 Introduction to the CSS2 processing model
This section of the specification presents a model of how user agents that
implement CSS2 behave. This is only a conceptual model; real implementations
may vary.
In this model, a user agent processes a source document written in the
document language by going through the following steps:
1. Create a document tree from the source document. The document tree is a
tree of elements from the document language.
2. Annotate every node of the document tree by assigning a single value
for every CSS2 property. The style sheets associated with the source
document generally specify values for some, but not all nodes of the
document tree (see the section on selectors) and values for some, but
not all, CSS properties. Since rules often overlap in CSS2, three
mechanisms are applied until each property has exactly one value at
each node:
1. Style rules are applied according to the cascade.
2. Inheritance is invoked for properties which inherit.
3. The initial (default) value for the property is assigned.
3. From the annotated document tree, generate a tree of rendering objects
based on the target medium. Since during this phase, some properties
may have non-specific values (e.g., the 'auto' value for many
properties), user agents must obey rendering algorithms defined in this
specification to complete the tree of rendering objects. For example,
if the destination medium is the screen, user agents must obey the
visual flow model. If the destination medium is the printed page, user
agents must obey the page model. If the destination medium is an aural
rendering device (e.g., speech synthesizer), user agents must obey the
aural rendering model.
4. Finally, user agents transfer the tree of rendering objects to the
destination medium (e.g., print the results, display them on the
screen, render text as speech, etc.).
Step 1 lies outside the scope of this specification (see, for example,
[DOM]).
Steps 2 and 3 are addressed by the bulk of this specification.
The majority of transfer issues in step 4 lie outside the scope of this
specification. However, CSS2 addresses these issues:
* What can user agents do when certain system resources are not available
(e.g., fonts)?
* How do style sheets interact with system resources (e.g., cursors and
colors)?
* How do style sheet properties assist certain devices (e.g., page
orientation for a printer)?
5.2 The document tree
User agents transform a document written in the document language into a
document tree where every element except one has exactly one parent
element. (See the SGML ([ISO8879]) and XML ([XML]) specifications for the
definition of parent.) The one exception is the root element, which has no
parent. An element A is called a child of an element B, if and only if B is
the parent of A.
An element A is called an ancestor of an element B, if either (1) A is the
parent B, or (2) A is the parent of some element C that is an ancestor of B.
An element A is called a descendant of an element B, if and only if B is an
ancestor of A.
For example, the following HTML document:
<HTML>
<TITLE>My home page</TITLE>
<BODY>
<H1>My home page</H1>
<P>Welcome to my home page! Let me tell you about my favorite
composers:
<UL>
<LI> Elvis Costello
<LI> Johannes Brahms
<LI> Georges Brassens
</UL>
</BODY>
</HTML>
results in the following tree:
[Sample document tree]
According to the definition of HTML, HEAD elements will be inferred during
parsing and become part of the document tree even if the HEAD tags are not
in the document source.
5.3 Inheritance
If a value is inherited , it means the value is the same as the value in the
rendering object for the parent element.
Suppose there is an H1 element with an emphasized element inside:
<H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to the EM element, the emphasized "is" will
inherit the color of the parent element, so if H1 has the color blue, the EM
element will likewise be in blue.
To set a "default" style property for a document, one can set the property
on the root of the document tree. In HTML, the HTML or BODY elements can
serve this function. Note that this will work even if the author omits the
BODY tag in the HTML source since the HTML parser will infer the missing
tag.
For example, the 'color' property on the BODY element is inherited by all
descendents of the BODY element:
BODY {
color: black;
background: url(texture.gif) white;
}
In this example, all descendents of the BODY element inherit the 'color'
property.
Not all style properties are inherited. For example, the 'background'
property is not inherited. (However, due to the initial 'tranparent' value
on the 'background' property, the parent's background shines through.) All
properties have an initial value. If the property is not inherited, the
value will be the initial value.
Each property definition indicates whether the property is inherited by
child elements, and what the initial value of the property is.
The root element obviously can't inherit values. If no value is set
explicitly, the initial value will be used.
For all inherited CSS2 properties, if the value is specified as a
percentage, child elements inherit the resultant value, not the percentage
value.
For example, with the style sheet
BODY {font-size: 10pt}
H1 {font-size: 120%}
and the document fragment
<BODY>
<H1>A <EM>large</EM> heading</H1>
...
the H1 element will have 'font-size' 12pt (120% times 10pt), but the EM will
also be 12pt, since it inherits the resultant value (12pt), not the
percentage (120%).
When a percentage value is set on a property of the root element, and the
percentage is defined as referring to the inherited value of some property
X, the resultant value is the percentage times the initial value of property
X.
For example, with and HTML document and the style sheet
HTML {font-size: 120%}
The resultant value for 'font-size' will be 120% of the initial value of the
'font-size' property. (The initial value of 'font-size' is defined to be
'medium', so the resultant value is 20% larger than 'medium'.)
5.4 Rendering objects
Once a user agent has assigned, for every node in the document tree, a value
for every property, it generates a tree of rendering objects. Each node in
the document tree generates zero or more rendering objects.
A rendering object is defined by a set of CSS properties. Since the type of
rendering object created depends on a specific target medium, a rendering
object may not carry information for every CSS2 property (e.g., a visual
rendering object may not carry aural properties).
This specification defines three types of rendering objects:
* Box: The box rendering object is meant for the screen medium. Boxes are
rectangular objects with padding, borders, and margins.
* Page box: The page box rendering object is meant for paged media.
* Aural: The aural rendering object is meant for aural media.
If an element A is an ancestor of an element D, all rendering objects
generated for A must be above the rendering objects rendered for D in the
tree of rendering objects. For box and page box rendering objects, this
implies that, to find a containing box for a node, a user agent need only
search upward in the tree of rendering objects (not left, right, or down).
6 Selectors
Contents
1. Type selectors
2. Grouping
3. Attribute selectors
1. Matching attributes, single values, and multiple values
2. The class and id attribute in HTML
3. The class attribute in other document languages: @class
4. The id attribute
4. Contextual selectors
5. Parent-child selectors
6. Sequential selectors
7. Pseudo-elements and pseudo-classes
1. The :first-line pseudo-element
2. The :first-letter pseudo-element
3. Overlapping pseudo-elements
4. Pseudo-elements with contextual selectors
5. Anchor pseudo-classes: :link, :active, and :visited
6. Combining pseudo-elements with normal classes
7. Colliding attribute selectors and pseudo-classes
In CSS, pattern matching rules determine which style rules apply to elements
in a document. These patterns, called selectors, may range from simple
element types to rich contextual patterns. If all conditions in the pattern
are true for a certain element, the selector matches the element.
6.1 Type selectors
The simplest selector is the name of an element from the document language,
called a type selector. Type selectors match all instances of the element
type in the document. The case-sensitivity of element names depends on the
document language. For example, in HTML, element names are case-insensitive,
but in XML they are case-sensitive.
An example of a selector is the following which matches all H1 element in a
document:
H1 { font-family: Helvetica }
6.2 Grouping
When element selectors share the same declarations, they may be grouped into
comma-separated lists.
In this example, we condense three rules with identical declarations into
one. Thus,
H1 { font-family: Helvetica }
H2 { font-family: Helvetica }
H3 { font-family: Helvetica }
is equivalent to:
H1, H2, H3 { font-family: Helvetica }
Furthermore, multiple declarations for the same selector may be organized
into semicolon separated groups.
Thus, the following rules:
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
are equivalent to:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
In addition, some properties are shorthand rules that allow authors to
specify the values of several properties with a single property. For
instance, the 'font' property is a shorthand property for setting
'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and
'font-family' all at once.
The multiple style rules of the previous example:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
may be rewritten with a single shorthand property:
H1 { font: bold 12pt/14pt Helvetica }
Note that since 'font-variant' and 'font-style' take their default values of
'normal' in this example, these values have been omitted from the shorthand
form.
6.3 Attribute selectors
CSS2 allows authors to specify rules that match according to attributes
defined in the document language. A rule may match based on the simple
presence of the attribute, or on one or more values for the attribute.
6.3.1 Matching attributes, single values, and multiple values
An attribute selector can select on the simple presence or absence of an
attribute, on the attribute and its value, or on the attribute and one word
in its value. The syntax is [att], [att=val], and [att~=val] respectively.
For example, the following rule matches all H1 elements that specify the
"href" attribute, whatever its value:
H1[href] { color: blue; }
In the following example, the rule matches all SPAN elements whose "class"
attribute has the value "example":
SPAN[class=example] { color: blue; }
The case-sensitivity of attribute values depends on the document language.
For example, in HTML, attribute values are case-insensitive, but in XML they
are case-sensitive.
Attribute values must be quoted or escaped if they are not identifiers.
Document languages may allow multi-valued attributes, typically
space-separated lists such as the following:
<SPAN class="fish fresh-water edible">perch</SPAN>
To accommodate value lists such as this, CSS2 defines the following two
types of equality:
The "=" sign
For the rule to apply, the value following "=" must match the whole
attribute value.
The "~=" sign
For the rule to apply, the string following "~=" must match at least
one member of the space-separated list of attribute values. With the
"~=" operator, attribute values cannot contain spaces.
The following rules illustrate the differences between "=" and "~=":
A[rel~="copyright"] {...} /* matches, e.g., <A rel="copyright copyleft ..." */
td[colspan="2"] {...} /* matches only <TD colspan="2"> ... */
The following rule hides all elements for which the value of the "lang"
attribute is "fr" (i.e., the language is French).
[LANG=fr] { display : none }
6.3.2 The class and id attribute in HTML
Although authors may refer to any attributes with the generic syntax
"[attribute=value]" and "[attribute~=value]", CSS2 defines a special syntax
for two [HTML40] attributes: "class" and "id".
The HTML "class" attribute allows authors to group elements together and
specify style information for the entire group. The CSS2 shortcut syntax for
"[class~=value]" is a "." followed by the class value, with no intervening
white space.
For example, we can assign style information to all elements with
class="pastoral":
.pastoral { color: green } /* all elements with class=pastoral */
or just to H1 elements with class="pastoral":
H1.pastoral { color: green } /* H1 elements with class=pastoral */
Given these rules, the first H1 instance below would not have green text,
while the second would:
<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>
Note that "H1.pastoral" is equivalent to "H1[class~=pastoral]".
To match a subset of "class" values, each value must be preceded by a ".",
in any order.
For example, the following rule matches any P element whose "class"
attribute has been assigned a list of space-separated values that includes
"pastoral" and "marine":
P.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match
for class="pastoral blue".
Similarly, the following aural style sheet rules allow a script to be read
aloud in different voices for each role:
P.role.romeo { voice-family: romeo, male }
P.role.juliet { voice-family: juliet, female }
Note. CSS gives so much power to the "class" attribute, that in many cases
it doesn't 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.
6.3.3 The class attribute in other document languages: @class
The shorthand selector syntax associated with the class attribute in HTML
can also be used in other document languages. For these languages, authors
must specify which attribute will be acting as the "class" attribute. This
is done with the @class rule, which has the form "@class
<attribute-name>;".
For instance, to specify that the "type" attribute of XML has the role of
assigning class information, authors should include the following
declaration in their style sheets:
@class type;
Then, a rule for XML such as:
PARA.romeo { ... }
would be equivalent to:
PARA[type~=romeo] { ... }
@class declarations must obey the following rules:
* An @class declaration must appear before the first selector in the
current style resource.
* If it occurs more than once, only the last instance applies.
* If it occurs, it only applies to the current style resource and not to
any imported style sheets.
A style resource is either
1. a style sheet corresponding to a URL (excluding any style sheets
imported recursively),
2. or the whole document if the style sheet is embedded in it.
6.3.4 The id attribute
The "id" attribute allows authors to assign a unique name to an element.
CSS2 allows authors to specify style rules that apply to a single instance
of an element, based on its "id" value.
To match an element with a given "id" value, the selector must contain "#"
followed by the "id" value.
In the following example, the style rule contains no selector information
and therefore matches any element that has id="z98y". The rule will thus
match for the P element:
<HEAD>
<STYLE>
#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
In the next example, however, the style rule will only match an H1 element
that has id="z98y". The rule will not match the P element in this example:
<HEAD>
<STYLE>
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
Note. While style sheets have been designed to augment document structure,
this feature will allow authors to create documents that may render well,
but don't take advantage of the structural elements of HTML. This use of
style sheets is discouraged.
Note that in HTML 4.0, the ID attribute is called "ID", but in XML documents
it may be called something else. The name of the ID attribute is immaterial
for CSS. Also note that, even in HTML, the selector #p123 is not equivalent
to [ID=p123], since the former has a higher specificity.
6.4 Contextual selectors
At times, authors may want selectors to match elements that appear in a
certain context, such as "only those EM elements that are contained by an H1
element". In these cases, contextual selectors add specificity. Context is
defined as an ancestor/descendent/sibling relationship between elements in
the document tree. Sibling relationships (one element after another) are
discussed in the section on sequential selectors.
A contextual selector matches when an element is an arbitrary descendent of
some ancestor element (i.e., it may be any generation below the ancestor
element). A contextual selector is made up of two or more selectors
separated by white space.
For example, consider the following rules:
H1 { color: red }
EM { color: red }
Although the intention of these rules is to add emphasis to text by changing
its color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
We address this case by adding a contextual rule to the previous two that
sets the text color to blue whenever an EM occurs anywhere within an H1:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
The third rule will also match the following fragment:
<H1>This
<SPAN class="myclass">headline is <EM>very</EM>
important</SPAN></H1>
A contextual selector may also contain attribute selectors.
For example, the following matches any element with an "href" attribute
inside a P with class "myclass" inside any DIV. Note that the space after
"myclass" is essential: without it the selector would match a P with both a
class and an "href":
DIV P.myclass [href]
Contextual selectors may be grouped according to the rules for grouping
listed above.
6.5 Parent-child selectors
A parent-child selector matches when an element is the direct descendent of
some parent element. A parent-child selector is made up of two or more
selectors separated by a tilde (~).
The following rule sets the style of P elements that are children of BODY:
BODY ~ P { line-height: 1.3 }
A parent-child selector may also contain attribute selectors. Parent-child
selectors may be grouped according to the rules for grouping listed above.
Contextual selectors and parent-child selectors can be combined. For
instance, DIV OL~LI P groups as follows (DIV (OL ~ (LI P))), i.e., it
matches a P that is a descendant of an LI, that is in turn a child of an OL,
which is a descendant of a DIV.
6.6 Sequential selectors
Often, special formatting rules apply when two types of elements appear next
to each other in a document. For example, when block-level elements are laid
out, the vertical space between them collapses. In this case, the special
formatting is handled by the rules for collapsing margins, but in other
cases of sequential selectors, authors may want to specify their own special
formatting rules.
Sequential selectors have the following syntax: a forward slash ("/")
precedes the first selector and immediately the second selector. The
sequential selector matches if the element matched by the first selector
precedes the element matched by the second selector, and both have the same
parent.
If, in addition, there is a tilde (~) between the selectors, then the
sequential selector matches if the element matched by the first selector
immediately precedes the element matched by the second selector, i.e.,
without any intervening elements.
Thus, the following rule states that when a P element immediately follows a
MATH element, it should not be indented:
/MATH ~ P/ { text-indent: 0 }
The next example brings an H2 that follows an H1 closer to it:
/H1~H2/ { margin-top: -5mm }
Sequential selectors may be used along with other types of selectors.
Thus, for example, the following rule is similar to the one in the previous
example, except that the special formatting only occurs when H1 has
class="opener" (see the section on attribute selectors):
/H1.opener ~ H2/ { margin-top: -5mm }
Sequential selectors can also be used to match the first child of some
element. In this case the first selector is omitted, and the first slash is
doubled, e.g., //P/.
Some descriptions of SGML and XML refer to text data as a "PCDATA element"
or a "character-data pseudo-element". For CSS, text is never counted as an
element. E.g., the EM in <P>abc <EM>def</EM> is the first child of the P.
The following rule sets the font weight to "bold" for any EM element that is
the descendent of a paragraph that is the first child in some element. Note
that in this rule, the sequential selector "//P/" is the parent of "EM":
//P/ EM { font-weight : bold }
Similarly, the following rule suppresses indentation for the first paragraph
(P) of a DIV:
DIV ~ //P/ { text-indent: 0 }
This example would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
<P> The first P inside the note.
</DIV>
but would not match the second P in the following fragment:
<P> The last P before the note.
<DIV class="note">
<H2>Note</H2>
<P> The first P inside the note.
</DIV>
[Do we need the functionality of /H1 P/, or only that of /H1~P/ and //P/?
Also, should /P// and //P// be added?]
Sequential selectors can be combined with other kinds of selectors: type
selectors and attribute selectors can occur inside the slashes, and
sequential selectors themselves can be part of contextual or parent-child
selectors.
6.7 Pseudo-elements and pseudo-classes
In CSS2, style is normally attached to an element based on its position in
the document tree. This simple model is sufficient for many cases, but some
common publishing scenarios (such as changing the font size of the first
letter of a paragraph) may be independent of the document tree. For
instance, in [HTML40], no element refers to the first line of a paragraph,
and therefore no simple CSS selector may refer to it.
CSS introduces the concepts of pseudo-elements and pseudo-classes to
extend the addressing model and permit formatting based on information that
lies outside the document tree.
* Pseudo-elements refer to sub-parts of an element's content (e.g., the
first letter or first line of a paragraph, etc.).
* Pseudo-classes refer to elements that are grouped dynamically (e.g.,
all links that have been visited, all left-hand pages, etc.)
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may
only appear as the last segment of a selector.
Although pseudo-elements and pseudo-classes do not exist in the document
tree, their behavior is defined as if they did. Each pseudo-element and
pseudo-class may be modeled by a fictional tag sequence, a fragment of
document source that includes imaginary elements from the document language.
The fictional tag sequence is a tool to describe the rendering effects of
pseudo-elements and pseudo-classes and does not indicate how these should be
implemented.
Pseudo-elements and pseudo-class names are case-insensitive.
Note. In CSS2, only one pseudo-element can be specified per selector. This
may change in future versions of CSS.
Conforming UAs may ignore all rules with :first-line or :first-letter in the
selector, or, alternatively, may only support a subset of the properties on
these pseudo-elements. See the section on conformance for further
information.
6.7.1 The :first-line pseudo-element
The :first-line pseudo-element is used to apply special styles to the first
formatted line. For instance:
P:first-line { font-style: small-caps }
The above rule means "change the font style of the first line of every
paragraph to small-caps". However, the selector "P:first-line" does not
match any real HTML element. It does match a pseudo-element that conforming
user agents will insert at the beginning of every paragraph.
Note that the length of the first line depends on a number of factors,
including the width of the page, the font size, etc. Suppose for this
example that the paragraph is broken into the lines indicated in the
example. Thus, an ordinary HTML paragraph such as:
<P>This is a somewhat long HTML paragraph that will
be broken into several lines. The first line will be
identified by a fictional tag sequence. The other lines will
be treated as ordinary lines in the paragraph.</P>
will be "rewritten" by user agents to include the fictional tag sequence for
:first-line.
<P>
<P:first-line>This is a somewhat long HTML paragraph that will</P:first-line>
be broken into several lines. The first line will be
identified by a fictional tag sequence. The other lines will
be treated as ordinary lines in the paragraph.</P>
If a pseudo-element breaks up a real element, the necessary extra tags must
be regenerated in the fictional tag sequence. Thus, if we mark up the
previous paragraph with a SPAN element:
<P><SPAN class="test">This is a somewhat long HTML paragraph that will
be broken into several lines.</SPAN> The first line will be
identified by a fictional tag sequence. The other lines will
be treated as ordinary lines in the paragraph.</P>
The user agent must generate the appropriate start and end tags for SPAN
when inserting the fictional tag sequence for :first-line.
<P><P:first-line><SPAN class="test">This is a somewhat long HTML paragraph that will</SPAN></P:first-line>
<SPAN>be broken into several lines.</SPAN> The first line will be
identified by a fictional tag sequence. The other lines will
be treated as ordinary lines in the paragraph.</P>
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, color properties, background properties,
'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align',
'text-transform', 'line-height', and 'clear',
6.7.2 The :first-letter pseudo-element
[Define better alignment of drop caps? BB]
The :first-letter pseudo-element may be 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, color properties, background properties, 'text-decoration',
'vertical-align' (only if 'float' is 'none'), 'text-transform',
'line-height', margin properties, padding properties, border properties,
'float', and 'clear'.
The following CSS2 will 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%; font-style: italic; font-weight: bold; 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>
This example might be formatted as follows:
[Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements]
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 to which it is attached.
The UA defines what characters are inside the :first-letter element. Quotes
that precede the first letter should be included, as in:
[Quotes that precede thefirst letter should be included.]
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.
The :first-letter pseudo-element can only be attached to a block-level
element.
Note. 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.
6.7.3 Overlapping pseudo-elements
Several pseudo-element rules may have an impact on the same content.
In the following example, the first letter of each P element will be green
with a font size of 24pt. The rest of the first formatted line will be blue
while the rest of the paragraph will be red.
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>
Assuming that a line break will occur before the word "ends", the fictional
tag sequence for this fragment 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.
6.7.4 Pseudo-elements with contextual selectors
In a contextual selector, pseudo-elements are only allowed at the end of the
selector.
The following example illustrates this with the :first-letter
pseudo-element.
BODY P:first-letter { color: purple }
Pseudo-classes may also be used in contextual selectors.
The following example sets the border color to blue of all images that
descend from A elements that have not yet been visited:
A:link IMG { border: solid blue }
6.7.5 Anchor pseudo-classes: :link , :active , and :visited
User agents commonly display unvisited links differently from previously
visited ones. CSS2 allows authors to specify the rendering of a link in one
of several states:
* The :link pseudo-class applies for links that have not yet been
visited.
* The :active pseudo-class applies while the link is being activated by
the user.
* The :visited pseudo-class applies once the link has been visited by the
user. Note. After a certain amount of time, user agents may choose to
return a visited link to the (unvisited) 'link' state.
The three states are mutually exclusive.
A:link { color: red } /* unvisited links */
A:active { color: lime } /* active links */
A:visited { color: blue } /* visited links */
User agents are not required to reformat a currently displayed document due
to anchor pseudo-class transitions. For instance, a style sheet may 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.
In HTML, the following two CSS2 declarations are equivalent and select the
same elements:
A:link { color: red }
:link { color: red }
6.7.6 Combining pseudo-elements with normal classes
Pseudo-classes can be combined with normal classes. In this case, the class
name must precede the pseudo-class name in the selector.
If the following link:
<A class="external" href="http://out.side/">external link</A>
has been visited, this rule:
A.external:visited { color: blue }
will cause it to be blue.
Pseudo-elements can also be combined with attribute selectors.
Thus, the following rule:
P.initial:first-letter { color: red }
would make the first letter of all P elements with "class=initial" such as
the following, the color red:
<P class="initial">First paragraph</A>
Pseudo-elements must be specified at the end of the selector.
6.7.7 Colliding attribute selectors and pseudo-classes
CSS syntax allows the following rules to co-exist:
A:link { color: red } /* The :link pseudo-class */
A.link { color: green } /* In HTML, class=link */
A#link { color: blue } /* In HTML, id=link */
Since a link may have class="link", id="link", and belong to the
pseudo-class :link simultaneously (i.e., be unvisited), user agents must
resolve the colliding rules. User agents must do so according to the
cascading order.
7 Cascade
Contents
1. Cascading order
1. 'Important' rules
2. Cascading order in HTML
3. Precedence of non-CSS presentational hints
In CSS, more than one style sheet can simultaneously influence a the
presentation of a document and rules from these style sheets may overlap in
scope (e.g., two rules that apply to the same element specify a font size).
CSS resolves these conflicts by assigning a weight to each style rule and
when several rules apply, choosing the one with the greatest weight. This is
known as the cascade .
By default, rules in a user's personal style sheets have less weight than
rules in the author's documents. Thus, 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 style sheet.
Imported style sheets also cascade and their weight depends on their import
order. Rules specified in a given style sheet override rules imported from
other style sheets. Imported style sheets can themselves import and override
other style sheets, recursively, and the same precedence rules apply.
7.1 Cascading order
Conflicting rules are intrinsic to the CSS mechanism. To find the value for
an element/property combination, user agents must apply the following
algorithm:
1. Find all declarations that apply to the element/property in question.
Declarations apply if the associated selector matches the element in
question. If no declarations apply, terminate the algorithm.
2. Sort the declarations by explicit weight: declarations marked
'!important' carry more weight than unmarked (normal) declarations.
See the section on 'important' rules for more information.
3. Sort by origin: the author's style sheets override the reader's style
sheet which override the UA's default values. An imported style sheet
has the same origin as the style sheet from which it is imported.
4. Sort by specificity of selector: more specific selectors will override
more general ones. The definition and calculation of specificity is
object-language dependent. Pseudo-elements and pseudo-classes are
counted as normal elements and classes, respectively.
5. Sort by order specified: if two rules have the same weight, the latter
specified wins. Rules in imported style sheets are considered to be
before any rules in the style sheet itself.
The search for the property value must be terminated when any of the above
steps yields a rule that has a higher weight than the other rules that apply
to the same element/property combination.
If the cascade does not yield a value, the user agent must seek an inherited
value, and if no value inherits, the user agent must assign the initial
value. (See the CSS2 processing model for more general information.)
This strategy gives author's style sheets considerably higher weight than
those of the reader. It is therefore important that the User agent gives the
user the ability to turn off the influence of a certain style sheet, e.g.,
through a pull-down menu.
7.1.1 'Important' rules
Style sheet designers can increase the weights of their declarations by
declaring them 'important' .
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-variant: 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.
Declaring a shorthand property (e.g., 'background') to be important is
equivalent to declaring all of its sub-properties important.
7.1.2 Cascading order in HTML
In HTML, a selector's specificity is calculated as follows:
* (a) count the number of "id" attributes in the selector
* (b) count the number of other attributes in the selector (including
class attributes)
* (c) count the number of element names in the selector
Concatenating the three numbers (in a number system with a large base) gives
the specificity.
Some examples:
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 */
/H1 [REL=up]/ {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {...} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
A declaration in the "style" attribute of an element 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.
7.1.3 Precedence of non-CSS presentational hints
The UA may choose to honor presentational hints from other sources than
style sheets, for example the FONT element or the "align" attribute in HTML.
If so, the non-CSS presentational hints must be 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.
Note. In a transition phase, this policy will make it easier for stylistic
attributes to coexist with style sheets.
8 Media types
Contents
1. Introduction to media types
2. Specifying media-dependent style sheets
1. The @media rule
2. The media-dependent @import rule
3. Recognized media types
1. The canvas
1. Scrollable media
8.1 Introduction to media types
One of the most important features of style sheets is that they allow
authors to specify how a document is to be presented on different media: on
the screen, on paper, with a speech synthesizer, with a braille device, etc.
Certain CSS properties only make sense for certain media (e.g., the
'cue-before' property for aural style sheets). On occasion, however, style
sheets for different media types may share a property, but require different
values for that property. For example, the 'font-size' property is useful
both for screen and print media. However, the two media are different enough
to require different values for the common property; a document will
typically need a larger font on a computer screen than on paper. Experience
also shows that sans serif fonts are easier to read on screen, while fonts
with serifs are easier to read on paper. For these reasons, it is necessary
to express that a style sheet -- or a section of a style sheet -- applies to
certain media types.
The following sections describe how authors may specify different style
sheets for different media (all of which participate in the cascade).
8.2 Specifying media-dependent style sheets
There are currently two ways to specify media dependencies for style sheets:
* Specify the target medium from a style sheet with the @media or
@import at-rules.
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
* Specify the target medium within the document language. For example, in
[HTML40], the "media" attribute on the LINK element specifies the
target medium of an external style sheet.
<LINK rel="stylesheet" type="text/css"
media="print" href="foo.css">
Please consult the [HTML40] specification for information about
specifying alternate style sheets according to different media types.
Since these two examples have the same media type, they are semantically
equivalent.
8.2.1 The @media rule
An @media rule lists the media types (separated by commas) affected by a set
of rules delimited by curly braces.
The @media construct allows style sheet rules for various media in the same
style sheet:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
8.2.2 The media-dependent @import rule
So that user agents can avoid retrieving resources for unsupported media
types, authors may specify media-dependent @import rules. These conditional
imports specify comma-separated media types after the URL.
The following rules have the same effect as if the imported style sheet were
wrapped in an @media rule for the same media, but it may save the UA a
fruitless download.
@import url(fineprint.css) print;
@import url(blueish.css) projection, tv;
In the absence of any media types, the import is unconditional. Specifying
'all' for the medium has the same effect.
8.3 Recognized media types
Due to rapidly changing technologies, CSS2 does not specify a definitive
list of media types that may be values for @media . However, user agents
that elect to support the devices in the following list must recognize the
associated media type:
* SCREEN: intended primarily for scrolled color computer screens. See the
section on scrollable media for more information.
* PRINT: intended for paged, opaque material and for documents viewed on
screen in print preview mode. Please consult the section on paged media
for information about formatting issues that are specific to paged
media.
* PROJECTION: intended for projected presentations, for example
projectors or print to transparencies. Please consult the section on
paged media for information about formatting issues that are specific
to paged media.
* BRAILLE: intended for braille tactile feedback devices. [HWL: we should
also have a media type for Braille printers]
* AURAL: intended for speech synthesizers. See the section on aural style
sheets for details.
* TV: intended for television-type devices (low resolution, color,
limited scrollability).
* HANDHELD: intended for handheld devices (small screen, monochrome,
limited bandwidth).
* ALL: suitable for all devices.
Media types are case-insensitive.
8.3.1 The canvas
For all media, the term canvas means "the space where rendering objects are
rendered" (see the CSS2 process model). For a screen, the canvas is a
rectangular space generally of fixed width and "infinite" length. For paged
media, the canvas is a sequence of rectangular page boxes of fixed width and
height. For aural media, the canvas is a three dimensional audio space.
Scrollable media
User agents for scrolled media may implement the canvas as an "infinitely"
long (or however long the rendered document is) rectangle that has a fixed
width. Users see this canvas through a user agent's viewport , a window or
other viewing area on the screen. The canvas may be larger or smaller than
the viewport. Typically, when the canvas is larger than the viewport, the
user agent will offer the user a scrolling mechanism to bring hidden parts
into view.
The user agent generally determines the width of the canvas and may change
the dimensions of the canvas when the viewport is resized.
In general, when a document doesn't cover the entire canvas, the User agent
should "borrow" the background of the root element. Since the BODY element
is often percieved as the root element in HTML, this special rules apply to
HTML documents: 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 the following:
<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.
Note that no structural element of a document corresponds to the canvas. In
HTML, until other means of addressing the canvas become available, we
recommend that authors set canvas properties on the BODY element.
9 The box model
Contents
1. Introduction to the box model
2. Box dimensions
3. Margin properties: 'margin-top', 'margin-right', 'margin-bottom',
'margin-left', and 'margin'
1. Values for <margin-width>
4. Padding properties: 'padding-top', 'padding-right', 'padding-bottom',
'padding-left', and 'padding'
1. Values for <padding-width>
5. Border properties
1. Border width: 'border-top-width', 'border-right-width',
'border-bottom-width', 'border-left-width', and 'border-width'
1. Values for <border-width>
2. Border color: 'border-top-color', 'border-right-color',
'border-bottom-color', 'border-left-color', and 'border-color'
3. Border style: 'border-top-style', 'border-right-style',
'border-bottom-style', 'border-left-style', and 'border-style'
6. Example of margins, padding, and borders
9.1 Introduction to the box model
The CSS box model describes the box rendering object. This object is
characterized in particular by three groups of properties: margin, padding,
and border, described below.
For information on the layout of boxes, please consult the section on the
visual flow model.
The page box is a special kind of box which is described in detail on the
section on paged media.
9.2 Box dimensions
Each box has a core content area (e.g., text, an image, etc.) and optional
surrounding padding, border and margin areas. The following diagram
illustrates how these areas relate and defines more precise terminology used
to describe pieces of margin, border, and padding:
[Image illustrating the relationship between content, padding, borders, and margins.]
The width (resp., height) of the box is given by the sum of the content
width (resp., height), the padding, the border, and the margin. The size of
the margin, border and padding are set with the margin, padding, and border
properties, respectively.
The width of the element is the width of the content, i.e., the distance
between left inner edge and right inner edge. The height of the element is
the height of the content, i.e., the distance from inner top to inner
bottom.
The outer edge is the edge of an element including its padding, border, and
margin. The inner edge is the edge of the content only, inside any padding,
border or margin.
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-level 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; it is only defined for inline and floating
elements, not for non-floating block-level elements. The inner bottom is the
bottom of the element, inside any padding, border and margin.
In the following sections, we define the properties that allow authors to
set margins, padding, and borders. There are no properties to set the color
of margins and padding; margins are always transparent and padding areas
always uses the background of the element itself.
9.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom',
'margin-left', and 'margin'
Margin properties set the margin of an element. The 'margin' property sets
the border for all four sides while the other margin properties only set
their respective side.
Values for <margin-width>
The properties defined in this section refer to the <margin-width> value
type, whose possible values may be:
<length> | <percentage> | auto
Negative values for margin properties are allowed, but there may be
implementation-specific limits.
Percentage values for margin properties refer to the width of the containing
block.
'margin-top'
Property name: 'margin-top'
Value: <margin-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the top margin of an element. It applies to replaced and
block-level elements.
H1 { margin-top: 2em }
'margin-right'
Property name: 'margin-right'
Value: <margin-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the right margin of an element:
H1 { margin-right: 12.3% }
'margin-bottom'
Property name: 'margin-bottom'
Value: <margin-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the bottom margin of an element. It applies to replaced
and block-level elements.
H1 { margin-bottom: 3px }
'margin-left'
Property name: 'margin-left'
Value: <margin-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the left margin of an element:
H1 { margin-left: 2em }
'margin'
Property name: 'margin'
Value: <margin-width>{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
The 'margin' property is a shorthand property for setting 'margin-top',
'margin-right' 'margin-bottom' and 'margin-left' at the same place in the
style sheet.
If four length values are specified they 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 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) */
}
9.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom',
'padding-left', and 'padding'
The padding properties describe how much space to insert between the border
and the content (e.g., text or image). The 'padding' property sets the
padding for all four sides while the other padding properties only set their
respective side.
9.4.1 Values for <padding-width>
The properties defined in this section refer to the <padding-width> value
type, whose possible values may be:
<length> | <percentage>
Unlike margin properties, values for padding values cannot be negative.
Like margin properties, percentage values for padding properties refer to
the width of the containing block.
'padding-top'
Property name: 'padding-top'
Value: <padding-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the top padding of an element.
BLOCKQUOTE { padding-top: 0.3em }
'padding-right'
Property name: 'padding-right'
Value: <padding-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the right padding of an element.
BLOCKQUOTE { padding-right: 10px }
'padding-bottom'
Property name: 'padding-bottom'
Value: <padding-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the bottom padding of an element.
BLOCKQUOTE { padding-bottom: 2em }
'padding-left'
Property name: 'padding-left'
Value: <padding-width>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values:refer to parent block element's width
This property sets the left padding of an element.
BLOCKQUOTE { padding-left: 20% }
'padding'
Property name: 'padding'
Value: <padding-width>{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values:refer to parent element's width
The 'padding' property is a shorthand property for setting 'padding-top',
'padding-right', 'padding-bottom', and 'padding-left' at the same place in
the style sheet.
If four values are specified they 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.
9.5 Border properties
The border 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.
9.5.1 Border width: 'border-top-width', 'border-right-width',
'border-bottom-width', 'border-left-width', and 'border-width'
Values for <border-width>
The properties defined in this section refer to the <border-width> value
type, whose possible values may be:
* 'thin' | 'medium' | 'thick' | <length>
The interpretation of the first three values depends on the user agent. The
following must hold, however:
'thin' <='medium' <= 'thick'.
Furthermore, these widths must be constant throughout a document.
Border widths cannot be negative.
'border-top-width'
Property name: 'border-top-width'
Value: <border-width>
Initial: medium
Applies to: all elements
Inherited: no
Percentage values:N/A
This property sets the width of an element's top border.
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 achieve relative widths, the 'em' unit can be
used:
H1 { border: solid 0.5em }
'border-right-width'
Property name: 'border-right-width'
Value: <border-width>
Initial: medium
Applies to: all elements
Inherited: no
Percentage values:N/A
This property sets the width of an element's right border.
'border-bottom-width'
Property name: 'border-bottom-width'
Value: <border-width>
Initial: medium
Applies to: all elements
Inherited: no
Percentage values:N/A
This property sets the width of an element's bottom border.
'border-left-width'
Property name: 'border-left-width'
Value: <border-width>
Initial: medium
Applies to: all elements
Inherited: no
Percentage values:N/A
This property sets the width of an element's left border.
'border-width'
Property name: 'border-width'
Value: <border-width>{1,4}
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
This property is a shorthand property for setting 'border-top-width',
'border-right-width', 'border-bottom-width', and 'border-left-width' at the
same place in the style sheet.
There can be from one to four values, with the following interpretation:
* one value: all four border widths are set to that value
* two values: top and bottom border widths are set to the first value,
right and left are set to the second
* three values: top is set to the first, right and left are set to the
second, bottom is set to the third
* four values: top, right, bottom and left, respectively
In the examples below, the comments indicate the resulting widths of the
top, right, bottom and left borders:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */
9.5.2 Border color: 'border-top-color', 'border-right-color',
'border-bottom-color', 'border-left-color', and 'border-color'
'border-top-color'
Property name: 'border-top-color'
Value: <color>
Initial: the value of the 'color' property
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-right-color'
Property name: 'border-right-color'
Value: <color>
Initial: the value of the 'color' property
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-bottom-color'
Property name: 'border-bottom-color'
Value: <color>
Initial: the value of the 'color' property
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-left-color'
Property name: 'border-left-color'
Value: <color>
Initial: the value of the 'color' property
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-color'
Property name: 'border-color'
Value: <color>{1,4}
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
The 'border-color' property sets the color of the four borders.
'border-color' can have from one to four values, and the values are set on
the different sides as for 'border-width' above.
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.
9.5.3 Border style: 'border-top-style', 'border-right-style',
'border-bottom-style', 'border-left-style', and 'border-style'
Values for <border-style>
The border style properties refer to the <border-style> value type which is
defined as follows:
* none | dotted | dashed | solid | double | groove | ridge | inset |
outset
'border-top-style'
Property name: 'border-top-style'
Value: <border-style>
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-right-style'
Property name: 'border-right-style'
Value: <border-style>
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-bottom-style'
Property name: 'border-bottom-style'
Value: <border-style>
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-left-style'
Property name: 'border-left-style'
Value: <border-style>
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
'border-style'
Property name: 'border-style'
Value: <border-style>{1,4}
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
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-width' 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 border style is set.
The border styles mean:
none
no border is drawn (regardless of the 'border-width' property's value)
dotted
the border is a dotted line drawn on top of the background of the
element
dashed
the border is a dashed line drawn on top of the background of the
element
solid
the border is a solid line
double
the border is a double line drawn on top of the background of the
element. The sum of the two single lines and the space between equals
the value of 'border-width'.
groove
a 3D groove is drawn in colors based on the value of the 'color'
property.
ridge
a 3D ridge is drawn in colors based on the value of the 'color'
property.
inset
a 3D inset is drawn in colors based on the value of the 'color'
property.
outset
a 3D outset is drawn in colors based on the value of the 'color'
property.
UAs may interpret all of 'dotted', 'dashed', 'double', 'groove', 'ridge',
'inset' and 'outset' as 'solid'. See the section on conformance for details.
'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'
'border-top'
Property name: 'border-top'
Value: <'border-top-width'> || <'border-style'> || <color>
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
This is a shorthand property for setting the width, style and color of an
element's top border.
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.
Note that while the 'border-style' property accepts up to four values, this
property only accepts one style value.
'border-bottom'
Property name: 'border-bottom'
Value: <'border-bottom-width'> || <'border-style'> || <color>
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
This is a shorthand property for setting the width, style and color of an
element's bottom border. It behaves just like 'border-top'.
'border-right'
Property name: 'border-right'
Value: <'border-right-width'> || <'border-style'> || <color>
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
This is a shorthand property for setting the width, style and color of an
element's right border. It behaves just like 'border-top'.
'border-left'
Property name: 'border-left'
Value: <'border-left-width'> || <'border-style'> || <color>
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
This is a shorthand property for setting the width, style and color of an
element's left border. It behaves just like 'border-top'.
'border'
Property name: 'border'
Value: <'border-width'> || <'border-style'> || <color>
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentage values:N/A
The 'border' property is a shorthand property for setting the same width,
color and style on all four borders of an element.
Unlike the shorthand 'margin' and 'padding' properties, the 'border'
property cannot set different values on the four borders. To do so, one or
more of the other border properties must be used.
Note that while the 'border-width' property accepts up to four length
values, this property only accepts one.
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
}
Since to some extent the properties 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 given by 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.
Example of margins, padding, and borders
This example illustrates how margins, padding, and borders interact. The
example HTML document:
<STYLE type="text/css">
UL {
background: orange;
margin: 12px 12px 12px 12px
padding: 3px 3px 3px 3px
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px
padding: 12px 0px 12px 12px /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: green;
}
</STYLE>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
results in a document tree with (among other relationships) a UL element
that has two LI children. According to the visual rendering model, the LI
elements are laid out vertically (one after the other) and form the content
of the UL.
The first of the following diagrams illustrates what this example would
produce. The second illustrates the relationship between the margins,
padding, and borders of the UL elements and those of its children LI
elements.
[Image illustrating how parent and child margins, borders,and padding relate.]
Note that:
* The width of content for each LI element has not been specified by the
'width' property. Therefore, according to the rules of the box height
calculations, the width allotted for the content of each LI element is
the width of the parent element's (UL) content less the margins,
padding, and border of the LI elements. The width of the UL element is
determined by the width of its parent, not shown explicitly here.
* The height of each LI element's contents is determined by the height of
the content. The height of the UL element's content is determined by
the sum of the heights of the LI elements' content, plus LI margins,
padding, and borders (see the section on box height calculations for
details). Note that vertical margins between the LI boxes collapse.
* The initial border style is 'none', and this value must be changed for
a border to be rendered. In the example above, only the second
list-item element changes the border style.
* The right side padding of the LI elements has been set to zero width.
The effect is apparent in the second illustration.
* The foreground color of the LI elements has been set to white for
legibility against a blue background.
* The margins and padding of the LI elements are transparent (due to the
initial value), so the background color of the UL elements (orange)
shines through the transparent LI margins. However, the (blue)
background color (blue) of the LI elements changes the color of the LI
padding and content.
* Although padding and margin properties are not inherited, the LI
elements are still offset by the UL margin.
10 Visual rendering model
Contents
1. Introduction to the visual rendering model
2. Establishing box positions
1. Containing blocks
2. Direction of flow
3. Normal flow
1. Block-level layout
1. List-item elements
2. Inline layout
1. Anonymous text boxes
3. Dual-mode elements: run-in and compact
4. Relative positioning
5. Controlling layout behavior: the 'display' property
4. Floats: 'float' and 'clear'
1. Controlling floats
5. Absolute positioning
1. Properties to specify position: 'top', 'right', 'bottom', 'left'
2. Fixed positioning
6. Comparison of normal, relative, floating, absolute positioning
1. Normal flow
2. Relative positioning
3. Floating a box
4. Absolute positioning
7. Z-order: Layered presentation
1. Specifying the stack level: the 'z-index' property
8. Multicolumn layout
10.1 Introduction to the visual rendering model
The following sections describe how user agents construct a tree of box
rendering objects.
Most elements in the document tree generate a corresponding box in the tree
of rendering objects that participates in the formatting algorithms known as
the visual flow model. The dimensions of each rectangular box, the
relationship of the box to its parent and children in the tree of rendering
objects, and other factors all affect how the user agent will lay out these
boxes on the canvas.
All elements that have text content (block or inline) generate "anonymous"
boxes in the tree of boxes. These anonymous boxes, which contain "chunks" of
text, inherit properties (colors, fonts, etc.) from their ancestor boxes. By
default, anonymous boxes are inline, i.e., text is laid out horizontally.
Decisions about the construction of anonymous boxes depend on many factors
(language, hyphenation, etc.) and lie outside the scope of this
specification.
Elements with a value of 'none' for the 'display' property generate no box
in the tree of rendering objects. Thus, those elements have no impact on the
positioning of any boxes.
Finally, some elements in the document tree generate a box in the tree of
rendering objects but that box is invisible. It cannot be seen, but it does
participate in formatting algorithms. Please consult the section on
visibility for details.
Normally, child boxes are positioned within the box of their parent.
However, a child box may extend horizontally beyond the bounding box of its
parent in certain situations. These are described in the section on
overflow.
CSS2 does not specify all aspects of formatting (e.g., letter-spacing
algorithm). Conforming user agents may format differently for situations not
covered in this specification.
10.2 Establishing box positions
The visual rendering model describes how user agents generate a tree of box
rendering objects. The bulk of this model involves calculating the positions
of boxes based on their dimensions, their position in the rendering tree,
and the dimensions of the canvas.
The value of the 'position' property determines which of the positioning
models will determine a box's final position on the canvas.
'position'
Property name: 'position'
Value: absolute | relative | static
Initial: static
Applies to: all elements
Inherited: no
Percentage values:N/A
The values of this property have the following meanings:
* 'static': Static boxes belong to the normal flow and are described in
this section.
* 'relative': The box generated for this element will first be positioned
according to the normal flow, then offset. Relative positioning is
described in a separate section.
* 'absolute': The box generated for this element will be given an
absolute position (and possibly size) with respect to a positioning
block. Absolutely positioned elements are described in a separate
section.
* 'fixed; Fixed positioning is a variant of absolute positioning where
elements are fixed with respect to the canvas. These are described in
the section on fixed positioning.
Note. The 'static' value causes some user agents to ignore the 'left' and
'top' properties. To ensure that values of 'left' and 'top' are taken into
account, authors should explicitly set the value of the 'position' property
to 'relative'.
10.2.1 Containing blocks
In CSS2, all box positions are calculated with respect to a rectangular box
called a containing block
The containing block is defined as follows:
* If a box has no parent, then it has no containing block
* Otherwise, if the value of the 'display' property for the parent box is
anything else besides 'inline' then the containing block is that parent
* Otherwise, the containing block is the containing block of the parent.
For example, for an inline element like EM, the containing block is
typically the enclosing paragaph (P). On the other hand, the containing
block of a positioned element is the element relative to which it is
positioned.
10.2.2 Direction of flow
'direction'
Property name: 'direction'
Value: ltr | rtl | ltr-override | rtl-override
Initial: ltr
Applies to: all elements
Inherited: yes
Percentage values:N/A
This property determines the whether inline boxes are laid out left-to-right
or right-to-left and how children of block-level boxes flow. It may take the
following values:
ltr
Left to right flow. This is the default value.
rtl
Right to left flow.
ltr-override
[Ian: What does this mean?]
rtl-override
[Ian: What does this mean?]
[Ian: Examples here.]
This property also specifies the direction of table layout.
10.3 Normal flow
10.3.1 Block-level layout
Block-level boxes are laid out one after the other, vertically.
The vertical distance between the top of a box and its preceding sibling (or
parent if no preceding sibling exists) is determined by the 'margin'
properties.
Vertical margins between adjacent block-level boxes collapses, as described
in the section on collapsing margins.
For left-to-right flowing content, a block-level box flows inside the left
side of its parent, at a horizontal distance specified by the 'margin'
properties. For right-to-left flowing content, boxes flow inside the right
side of their parent.
For information about page breaks in paged media, please consult the section
on allowed page breaks.
List-item elements
Some block elements generate boxes that may be formatted as lists. In terms
of flow, lists are formatted as other block-level elements.
For information about lists and examples of list formatting, please consult
the section on lists.
10.3.2 Inline layout
Inline boxes are laid out one after the other, horizontally, within a
horizontal space defined by the containing block (see the section on box
width calculations for more information).
For left-to-right flow, the horizontal distance between the left side of a
box and its preceding sibling's right side (or parent's right side if no
preceding sibling exists) is determined by the 'margin' properties. For
right-to-left flow, the horizontal distance is between the right side of a
box and its preceding sibling's left side (or parent's left side if no
preceding sibling exists).
Horizontally adjacent inline boxes form a line box. To form a paragraph,
line boxes are stacked vertically. Note that in the same block, stacked line
boxes have the same width but may vary in height.
When an inline box is less wide than the width of the line box that contains
it, its horizontal alignment within the line box is determined by the
'alignment' property.
When an inline box is wider than a line box, it it may be split into several
inline boxes and these boxes distributed across several lines.
Inline boxes in the same line may have different heights (e.g., an inline
image surrounded by text), so the final height of each line box is
determined by the rules given in the section on line height calculations.
When an inline box's height is less than the line box height, the vertical
alignment of the inline box within the line box is determined by the
'vertical-align' property.
Anonymous text boxes
When a block-level element contains text that is not the content of an
inline element, the element generates one or more "anonymous" inline boxes
in the tree of boxes, each of which contains a chunk of this text.
For example, the following paragraph (created by the HTML block-level
element P) contains chunks of text separated by the inline elements EM and
STRONG:
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
In terms of the document tree, P has five children elements that contain the
following pieces of text:
* Anonymous: "Several"
* EM: "emphasized words"
* Anonymous: "appear"
* STRONG: "in this"
* Anonymous: "sentence, dear."
To format the paragraph, the user agent generates an inline box for each
child and lays all five of them out into successive line boxes. The width of
the P element determines the width of these line boxes. If the width of P is
sufficient, all the inline boxes will fit into a single line box:
Several emphasized words appear in this sentence, dear.
If the inline boxes do not fit within a single line box, they will be split
up and distributed across several lines. The previous paragraph might be
split as follows:
Several emphasized words appear
in this sentence, dear.
or like this:
Several emphasized
words appear
in this
sentence, dear.
In this last example, the EM inline box has been split into two EM boxes
(call them "split1" and "split2"). If a inline box split this way has
margins, borders, padding, or text decorations, these have no visible effect
after split1 or before split2 (e.g., the border is not drawn and the margin
and padding are not included after split1).
Consider the following example:
<STYLE>
EM { padding: 2px ;
margin: 1em ;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
<BODY>
<P>Several <EM>emphasized words</EM> appear here.</P>
</BODY>
Depending on the width of the P, the boxes may be distributed as follows:
[Image illustrating the effect of line breaking on the display of margins, borders, and padding.]
* The margin is inserted before "emphasized" and after "words". Recall
that margins above and below inline elements have no effect.
* The padding is inserted before, above, and below "emphasized" and
after, above, and below "words" (i.e., neither after "emphasized" nor
before "words"). A dashed border surrounds the padding.
Note that with a small line height, the padding and borders around text in
different lines may overlap.
10.3.3 Dual-mode elements: run-in and compact
There are two types of boxes that are inline or block depending on the
context. A compact box is one that is put in the margin of the following
block if there is enough room, otherwise, it will be rendered as a block. A
run-in box is one that is rendered inline in the following block, or as a
block if there is no following block. The 'display' property determines
whether a box is 'compact' or 'run-in'.
The following example illustrates a compact box. This document:
<style>
DT {display: compact}
DD {margin-left: 4em}
</style>
<dl>
<dt>Short
<dd><p>Description goes here.
<dt>too long for the margin
<dd><p>Description goes here.
</dl>
may be rendered as:
short Description goes here
too long for the margin
Description goes here
A 'run-in' element, on the other hand, is useful for run-in headers, as in
this example:
<style>
H3 {display: run-in}
H3:after {content: ". "}
</style>
<h3>A run-in heading</h3>
<p>And a paragraph of text that
follows it.
which may be rendered as follows:
A run-in heading. And a
paragraph of text that
follows it.
A 'run-in' element is rendered exactly like a 'block' element if the
following sibling element is not of type 'block' or is floating or
positioned absolutely. Otherwise the run-in element is rendered inline as if
it were the first inline box of the following block.
Properties apply to a run-in element depending on whether it is rendered
inline or as a block. For example, the 'white-space' property only applies
if the element is rendered as a block.
For a 'compact' element to be rendered as an inline box, it must be followed
by a 'block' element that doesn't float and is not positioned absolutely.
That block must have a 'margin-left' (or 'margin-right' if it's 'direction'
is 'rtl') that is wide enough for the compact element. That means: the
compact element, when rendered as an inline box, must be a single box (no
line breaks) with overall width (including margins, border and padding) that
is no larger than the margin of the block.
The compact box is outside (to the left or right) of the first line box of
the block, but it takes part in the calculation of that line box's height.
The 'vertical-align' property of the compact box determines its vertical
position relative to that line box.
The horizontal position is always in the margin of the block, as far to the
outside as possible. The compact box's left margin (or right, if the block's
'direction' is 'rtl') determines the position.
10.3.4 Relative positioning
Once a block-level or inline box has been assigned its position according to
the flow model, it may be shifted relative to this position. This is called
relative positioning and the offset is specified by the the 'top',
'bottom', 'left', and 'right' properties. Offsetting a box in this way has
no effect on sibling boxes; they are not "reflowed" as a result of the
offset. This implies that relative positioning may cause boxes to overlap.
Relatively positioned elements establish a new reference box that child
elements can be positioned with respect to. See the section on absolutely
positioned elements for more on this.
Relatively positioned elements keep their natural shape, including line
breaks and the space originally reserved for them. Dynamic movement of
relatively positioned elements can provide animation effects in scripting
environments (see the section on dynamic positioning for details).
Elements are positioned relatively by setting the 'position' property to
'relative'.
Relative positioning could also be used as a general form of superscripting
and subscripting except that line height is not automatically adjusted to
take the positioning into consideration. See the description of line height
calculations for more information.
Examples of relative positioning are provided in the section comparing
normal, relative, floating, and absolute positioning.
10.3.5 Controlling layout behavior: the 'display' property
An element of the document language is not inherently inline or block-level
(except, perhaps in the minds of the language's designers). CSS does not
assume any default layout behavior for elements. The layout behavior of
every element is determined by the value of its 'display' property.
'display'
Property name: 'display'
Value: block | inline | list-item | run-in | compact | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values:N/A
An element with a 'display' value of 'block' causes the generation of a
block-level box.
A value of 'list-item' is similar to 'block' except that a list-item marker
is added. For example, in HTML, LI will typically have this value.
An element with a 'display' value of 'inline' generates an inline box. 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 any border
around the element); 'none' completely removes the element so that it does
not affect layout at all. Descendent elements will also be turned off and
cannot override this by setting the 'display' property themselves.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
The last rule turns off the display of images.
[Add pointers to run-in and compact -IJ]
The initial value of 'display' is 'block', but a user agent will typically
have default values for all document language elements.
UAs may ignore 'display' and use only the UA's default values. See the
section on conformance for details.
For many document languages, and in particular for HTML, user agents may
provide a default style sheet that implements the layout behavior expected
of the language's elements. Please consult the sample style sheet in the
appendix for information about the default layout behavior of HTML 4.0.
10.4 Floats: 'float' and 'clear'
At times, authors may want to control the positioning of a box in a way that
cannot be done within the normal flow. There are three ways to place a box
outside the normal flow:
* Create a floating box that floats to the left or right of where it
would normally appear in the flow. For instance, authors may float
paragraph boxes in order to place them side-by-side.
* Use absolute positioning.
* Set the value of the 'display' property to 'none' (in which case, the
element does not generate a box at all).
The primary difference between a floating box and one that is absolutely
positioned is that absolute positioning has no impact on the flow of later
siblings; later siblings are laid out as though their absolutely positioned
sister did not exist at all. Later siblings of floating objects flow with
respect to the final position of the floating element.
Floating and absolutely positioned boxes do affect the flow of children
elements: children elements always flow relative to the position of their
parent (the floater or absolutely positioned element) unless positioned
absolutely themselves.
A floated box is moved to the left or right until the margin, padding, or
border of another block-level element is reached.
User agents take the boundaries of floated boxes into account when flowing
subsequent boxes, i.e., boxes that follow flow around the floated box. The
margins, borders and padding of the floated box are honored, and the margins
never collapse with the margins of adjacent elements.
To float a box, set the 'float' property for the element generating the box.
'float'
Property name: 'float'
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
With the value 'none', the generated box 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 (and thus the 'display' property is ignored).
This property is most often used with inline images, but also applies to
text elements.
The following example will place all IMG elements with class="icon" along
the left side of the parent element:
IMG.icon {
float: left;
margin-left: 0;
}
The following HTML source:
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
could be formatted as:
[Image illustrating how floating elements interact with margins.]
Note that the margin of the P element encloses the floating IMG element.
10.4.1 Controlling floats
The 'clear' property specifies whether an element will allow floating
elements on its sides.
'clear'
Property name: 'clear'
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values:N/A
When set for an element E, this property indicates which sides of E may not
be adjacent to sides of a floating element. A value of 'left' means that E
may not be positioned next to any floating elements to its left; when
flowed, E will therefore be moved to the next available line below. The
value 'right' means the same thing, but on the right side of E.
A value of 'none' means that E may be placed next to floating objects to the
left or right.
A value of 'both' means that E may not be placed next to floating objects on
either side.
The following style rule means that no H1 element may have a floating
element to its left. All H1 elements will be positioned at the current left
margin.
H1 { clear: left }
Consult the section on floating constraints for more information about
controlling floats.
10.5 Absolute positioning
Elements that are positioned with respect to a reference box are said to be
absolutely positioned .
The default reference box is the box generated for the root element of the
document tree. However, an element for which the 'position' property has
been set to a value other than 'static' establishes a new reference box.
Absolutely positioned descendents of the element will be positioned with
regard to the inner edges of the reference box. Furthermore, an absolutely
positioned element establishes a new context in which normally flowing
descendents are aligned.
When the reference box is established by a block-level element, it has the
same width, height, and position as the content and padding area of the
block-level element. When the reference box is established by an inline
element, it has the same width, height, and position as the content and
padding area of the first box generated by the inline elements. In other
words, if the inline element is split into several boxes on different lines,
the reference box is defined by the first box.
The contents of an absolutely positioned element do not flow around any
other elements. They may or may not obscure the contents of another element,
depending on the z-order of the overlapping elements.
An absolutely positioned element lives inside of this reference block, as
illustrated below:
[Illustration of a reference box]
10.5.1 Properties to specify position: 'top', 'right', 'bottom', 'left'
The position of an relatively, absolutely or fixed positioned (see below)
element is determined from four properties:
'top'
Property name: 'top'
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values:N/A
'right'
Property name: 'right'
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values:N/A
'bottom'
Property name: 'bottom'
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values:N/A
'left'
Property name: 'left'
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values:N/A
Each of these four properties specifies an offset between the reference box
and the element which is being positioned. More specifically, values
indicate the offset between the edge of the reference box and the
corresponding content+padding+border box of the element that is being
positioned.
The values have the following meanings:
<length>
The offset is a fixed distance from the edge.
<percentage>
The offset is a percentage of the reference box's width (for 'left' or
'right') or height (for 'top' and 'bottom').
auto
The offset depends on the width and height specified for the element.
For absolutely positioned elements, the values of the 'left', 'right',
'top', and 'bottom' properties take over the roles of the corresponding
margin properties (i.e., absolutely positioned element boxes do not have
margins but do have padding and borders).
For more information about the width and height of absolutely positioned
elements, please consult the sections on box width calculations and box
height calculations respectively.
10.5.2 Fixed positioning
Fixed positioning is a variant of absolute positioning. The only difference
is that absolutely positioned elements are positioned with respect to a
reference box, while fixed positioned elements are positioned with respect
to the canvas. Fixed positioned elements are, as the name indicates, fixed
to the canvas.
For scrolled media, fixed boxes do not move when the document is scrolled.
In this respect, they are similar to fixed background images.
In a paged medium, fixed positioned elements are repeated on every page.
This is useful for placing, for instance, a signature at the bottom of each
page.
10.6 Comparison of normal, relative, floating, absolute positioning
To illustrate the relationship between normal flow, relative positioning,
floats, and absolute positioning, we provide a series of examples in the
following sections based on the following HTML fragment:
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
The final positioning of the outer and inner spans vary in each example. In
each illustration, the numbers to the left of the illustration indicate the
normal position of the double-spaced (for clarity in this example) lines.
10.6.1 Normal flow
Consider the following CSS declarations for outer and inner that don't alter
the normal flow of elements:
#outer {color: red;}
#inner {color: blue;}
This results in something like the following:
[Image illustrating the normal flow of text between parent and sibling elements.]
10.6.2 Relative positioning
To see the effect of relative positioning, consider the following CSS rules:
BODY {line-height: 200%}
#outer {position: relative; top: -12px; color: red;}
#inner {position: relative; top: 12px; color: blue;}
First, the outer text is flowed into its "normal" position and dimensions at
the end of line 1. Then, the entire box (distributed over three lines) is
shifted upwards by 12px.
The contents of inner, as a child of outer, would normally flow immediately
after the words "of outer contents" (on line 1.5). However, the inner
contents are themselves offset relative to the outer contents by 12px
downwards, back to their original position on line 2.
Note that the content following outer is not affected by the relative
positioning of outer.
[Image illustrating the effects of relative positioning on an element's content.]
Note also that if the relative positioning of outer were -24px, the text of
outer and the body text would have overlapped.
10.6.3 Floating a box
Now consider the effect of floating the inner text to the right by means of
the following rules:
#outer {color: red;}
#inner {float: right; width: 130px; color: blue;}
First, the inner box (whose width has been set explicitly) is floated to the
right margin. The text that follows flows in the space left by the inner
box, and respects the new right margin imposed by the left border of inner.
[Image illustrating the effects of floating an element.]
To show the effect of the 'clear' property, we add a sibling element to the
example:
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents.</SPAN>
<SPAN id=sibling> Sibling contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
The following rules:
#inner {float: right; width: 130px; color: blue;}
#sibling {color: red;}
cause the inner box to float to the right and the sibling box to flow in the
available space:
[Image illustrating the effects of floating an element without setting the clear property to control the flow of text around the element.]
However, if the 'clear' property on the sibling box is set to 'right' (i.e.,
the sibling box will not accept being positioned next to floating objects to
its right), the sibling box flows on the next available line below:
#inner {float: right; width: 130px; color: blue;}
#sibling {clear: right; color: red;}
[Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.]
10.6.4 Absolute positioning
Finally, we consider the effect of absolute positioning on elements.
Consider the following CSS declarations for outer and inner:
#outer {position: absolute; top: 200px; left: 200px; width: 200px; color: red;}
#inner {color: blue;}
which causes the top of the outer box to be positioned with respect to the
reference box (which we suppose is set on the root of the document). The top
side of the outer box is 200px from the top of the reference box and the
left side is 200px from the left side. The child element of outer flows with
respect to its parent.
[Image illustrating the effects of absolutely positioning an element.]
Note that because outer has been absolutely positioned, it establishes a new
reference box for any absolutely positioned children (there aren't any in
this example).
Recall that absolutely positioned elements are positioned with respect to a
reference box set on an ancestor element. The following example shows an
absolutely positioned element that is a child of a relatively positioned
element. Although the parent outer box is not actually offset, setting its
'position' property to 'relative' causes its box to serve as the reference
box for any descendents. Since the outer box is an inline box that is split
across several lines, only the first box (whose upper left-hand corner is
designated by a "@" in the illustration below) establishes the reference box
for the descendents.
#outer {position: relative; color: red;}
#inner {position: absolute; top: 200px; left: -100px; height:
130px; width: 130px; color: blue;}
This results in something like the following:
[Image illustrating the effects of absolutely positioning anelement with respect to a reference box.]
Recall that statically positioning an element is equivalent to using the
'position' property to put an element back in the normal flow. Statically
positioned elements do not establish a reference box for their children.
Thus, the following rules:
#outer {position: static; color: red;}
#inner {position: absolute; top: 200px; left: -100px; height:
130px; width: 130px; color: blue;}
are equivalent to:
#outer {color: red;}
#inner {position: absolute; top: 200px; left: -100px; height:
130px; width: 130px; color: blue;}
and cause the inner box to be positioned with respect to
the reference box (which we assume here is set on the root element
of the document tree).
[Image illustrating the effects of absolutely positioning an element with respect to a coordinate system established by a statically positioned parent.]
Relative and absolute positioning may be used to implement change
bars, as shown in the following example. We use a value of 'auto' for
the value of the 'top' property,
which results in the element being placed at the "current"
location in the document window, just as if the element were being
flowed into that space. The following HTML text:
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
might result in something like:
[Image illustrating the use of floats to create a changebar effect.]
10.7 Z-order: Layered presentation
CSS allows authors to specify the position of an element in three
dimensions. The stack level of an element refers to its position above or
below other elements. The stack level is particularly relevant to elements
that overlap visually.
10.7.1 Specifying the stack level: the 'z-index' property
In the following sections, the expression "in front of" means closer to the
user as the user faces the screen.
The stack level of an element may be determined in two ways:
* By an element's place in the document tree (i.e., with respect to
parent and sibling elements). Elements are stacked in the order they
appear in the document tree. Thus, an element is stacked in front of
its parent and "older" siblings (i.e., those to the left of the element
in the document tree) and behind its children and later siblings.
* Explicitly, via the 'z-index' property.
'z-index'
Property name: 'z-index'
Value: auto | <integer>
Initial: auto
Applies to: elements that may be positioned
Inherited: no
Percentage values:N/A
The 'z-index' property is used to specify the stacking order of elements
that may be positioned (i.e., element's whose 'position' property has a
value of 'absolute' or 'relative').
The default ('auto') behavior is to stack elements back-to-front in the
order they appear in the document tree.
An integer value for 'z-index' specifies stacking order for an element
relative to its sibling and parent elements:
* Sibling elements are stacked bottom-to-top in order of increasing
'z-index' value. Sibling elements with identical 'z-index' values have
unspecified relative stacking order.
* Elements that have negative 'z-index' values are stacked below their
parent element and elements with positive 'z-index' values are stacked
in front of their parent element. In other words, each element that may
be positioned defines a positioning context for z-order in which their
own 'z-index' is 0.
* A 'z-index' value of 0 is equivalent to a value of 'auto'.
The relative z-order of two elements that are neither siblings nor
parent/child can be determined by evaluation of the above rules for both
elements' ancestors.
By default, a positioned element will be placed just above (in z-space) its
parent in the document tree.
It is not possible to position an element behind a grandparent.
In the following example, the order of the elements, listed back-to-front
is:
* image
* text2
* text1
<STYLE type="text/css">
<!--
.pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
-->
<IMG src="butterfly.gif" class="pile" id="image" style="z-index: 1">
<DIV class="pile" id="text1" style="z-index: 3">
This text will overlay the butterfly image.
</DIV>
<DIV class="pile" id="text2" style="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
The previous example demonstrates the notion of transparency. The default
behavior of an element is to allow elements below it to be visible through
transparent areas in its content. In the example, each element transparently
overlays the elements below it. This behavior can be overridden by utilizing
one of the existing background-related properties like 'background'.
10.8 Multicolumn layout
Flowing content into several columns is a common way of presenting text,
especially in print. When multiple columns are use, line lengths are shorter
and the font size and line height can be reduced while maintaining
legibility. In CSS, columns are vertical boxes formed in the content area of
an column element. In HTML, the column element will typically be of type DIV
and its child elements will be flowed into the columns.
All columns in a column element have the same width. The UA should attempt
to balance the content so that each column is filled to the same extent.
When breaking elements over several columns, the 'widows' and 'orphans'
properties should be consulted (in the section on page breaks).
In a paged medium, page breaks may occur within the column element. This can
be due to lack of space, or from a page break property value for a child
element. When this happens, the column element should be continued on the
next page with the same number of columns.
Authors may specify a column gap and a vertical column rule between columns.
'columns'
Property name: 'columns'
Value: <length> | <number> | <percentage>
Initial: 1
Applies to: block-level elements
Inherited: no
Percentage values:the width of the element itself
The 'columns' property determines the number of columns into which the
content of the element will be flowed.
By specifying a numeric value, a fixed number of columns is set. In the
following example, DIV elements will have three columns:
DIV { columns: 3 }
By specifying a length value, the UA creates as many columns as possible
within the available space. So, if the available space increases (for
example when the user enlarges the UA window), the number of columns may
increase. The number of columns (n) is a function of the width of the
element (w), the desired column width (cw), the column gap (cg) and the
width of the column rule (cr):
n' = (w + cg + cr) / (cw + cg + cr)
n = round(n')
See a description of the column gap and column rule below.
Child elements that are flowed into the columns will be "adapted" by them.
Consider this example:
<STYLE>
DIV {
columns: 3;
column-gap: 1em;
}
IMG.logo {
width: 100%;
}
</STYLE>
<BODY>
<DIV>
<IMG CLASS="logo">
<P>Some text.<P>
<P>Some more text.<P>
</DIV>
</BODY>
The percentage value on the 'width' property refers to the width of the
parent element, but since the IMG element appears inside a column, the width
of the column will take the place of the width of the parent element.
'column-gap'
Property name: 'column-gap'
Value: <length> | <percentage>
Initial: UA-specific
Applies to: block-level elements
Inherited: no
Percentage values:the width of the element itself
This property sets the gap between adjacent columns. The initial value is
UA-specific, but should be greater than zero. Negative values are not
allowed.
'column-rule-width'
Property name: 'column-rule-width'
Value: <border-width>
Initial: medium
Applies to: block-level elements
Inherited: no
Percentage values:the width of the element itself
'column-rule-style'
Property name: 'column-rule-style'
Value: <border-style>
Initial: none
Applies to: block-level elements
Inherited: no
Percentage values:the width of the element itself
'column-rule-color'
Property name: 'column-rule-color'
Value: <color>
Initial: the value of the <color> property
Applies to: block-level elements
Inherited: no
Percentage values:N/A
'column-rule'
Property name:'column-rule'
Value:<column-rule-width> || <column-rule-style> ||
<column-rule-color>
Initial:see individual properties
Applies to:block-level elements
Inherited:no
Percentage values:N/A
These properties set the vertical column rule between adjacent columns. The
rule will appear in the middle of the column gap. On each side of the rule
there will be a gap equal to half the specified column gap.
Vertically, the column rule extend up to, but not including, the padding
area. If there is a border, but no padding the column rule will abut the
border. In this case, the UA should attempt to gracefully join the column
rule and the border.
11 Visual rendering model details
Contents
1. Box width calculations: the 'width' property
1. Relationship of width dimensions
2. Width of floats and replaced elements
3. Width of absolutely positioned elements
4. Minimum and maximum widths: 'min-width' and 'max-width'
2. Box height calculations: the 'height' property
1. Height of replaced elements
2. Height of absolutely positioned elements
3. Minimum and maximum heights: 'min-height' and 'max-height'
4. Collapsing margins
3. Line height calculations: the 'line-height' and 'vertical-align'
properties
4. Floating constraints
5. Overflow and clipping
1. Overflow: the 'overflow' property
2. Clipping: the 'clip' property
6. Visibility: the 'visibility' property
7. Dynamic positioning
8. Filters
11.1 Box width calculations: the 'width' property
The width of a box generated by an element does not depend on the width of
its children nor on its content -- it is given by the 'width' property.
'width'
Property name: 'width'
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.
Negative values for 'width' are not allowed.
For 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.
11.1.1 Relationship of width dimensions
See the section on the the box model for an illustration of box rendering
objects.
The width of a block-level element's box is determined by seven properties:
'margin-left', 'border-left', 'padding-left', 'width', 'padding-right',
'border-right', and 'margin-right'.
For elements in the flow, the sum of these seven is equal to the content
'width' of the parent element.
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.
Horizontal margins are not collapsed.
11.1.2 Width of floats and replaced elements
For floats and replaced elements (i.e., block-level or inline elements whose
markup is replaced by other content such as the IMG element in HTML), the
calculation of width is as follows:
Three of the seven properties given above 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.
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 have the value 'auto', the value of 'margin-right'
will be assigned 'auto'.
If more than one of the three is 'auto', and one of them is 'width', then
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.
11.1.3 Width of absolutely positioned elements
The width of an absolutely positioned element's box is specified with the
'width' property.
However, if the 'width' has the value 'auto', the width of the box is given
by the 'left' and 'right' properties. Note that these take the place of the
'left-margin' and 'right-margin' properties, which don't apply to absolutely
positioned elements.
If all three properties have the value 'auto', the box has exactly the width
of the inherited reference box.
11.1.4 Minimum and maximum widths: 'min-width' and 'max-width'
It is sometimes useful to constrain the width of elements to a certain
range. Two properties offer this functionality:
'min-width'
Property name: 'min-width'
Value: <length> | <percentage>
Initial: 0
Applies to: all
Inherited: no
Percentage values:refer to parent's width
'max-width'
Property name: 'max-width'
Value: <length> | <percentage>
Initial: 100%
Applies to: all
Inherited: no
Percentage values:refer to parent's width
This algorithm describes how the two properties influence the width
calculations:
1. the normal width calculations (without 'min-width' and 'max-width') are
performed and the calculated width is found
2. if the value of 'min-width' is greater than the value of 'max-width',
'max-width' should be set to the value of 'min-width'
3. if the calculated width is greater than 'max-width', the value of
'width' is set to 'max-width'. Goto step 1.
4. if the calculated width is smaller than 'min-width', the value of
'width' is set to 'min-width'. Goto step 1.
5. terminate
When the algorithm terminates, use the calculated width as the width of the
element.
11.2 Box height calculations: the 'height' property
The height of a box is the minimal height necessary to include the vertical
content of the element and that of all its flowed children (see also the
section on minimum and maximum heights). This is the height necessary before
any relative offset of children.
However, the height of an element may be set explicitly with the 'height'
property.
'height'
Property name: 'height'
Value: <length> | 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, but it is most useful with replaced
elements such as images.
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 by the user
interface (e.g., a scrollbar).