Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
4635 lines (4585 sloc) 182 KB
<!doctype html public '-//W3C//DTD HTML Experimental 19960712//EN'>
<!-- $Id: REC-CSS1-961217.html,v 1.8 1998/04/07 21:08:44 fillault Exp $ -->
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY {
margin-left: 2%;
margin-right: 2%;
color: black;
font-family: sans-serif;
background: #def url(recbg.jpg);
}
A:link {
color: red
}
A:visited {
color: blue
}
DIV.spec {
margin-left: 13%;
}
DIV.spec H2, DIV.spec H3 {
margin-left: -13%;
}
H1 {
clear: left;
margin-top: 2em;
text-align: center;
}
PRE {
font-family: monospace;
/* font-size: 90%; */
}
IMG {
border: 0;
}
-->
</STYLE>
<TITLE>Cascading Style Sheets, level 1</TITLE>
</HEAD>
<BODY BACKGROUND="http://www.w3.org/pub/WWW/TR/recbg.jpg">
<H3 align=right>
<A HREF="http://www.w3.org/">
<IMG border=0 align=left alt="W3C" src="http://www.w3.org/pub/WWW/Icons/WWW/w3c_home"></A>
REC-CSS1-961217
</H3>
<P>
<BR clear=left>
<!-- END HEADER -->
<H1 align=center>
Cascading Style Sheets, level 1
</H1>
<H3 align=center>
W3C Recommendation 17 Dec 1996
</H3>
<DL>
<DT>
This is:
<DD>
<A HREF="http://www.w3.org/pub/WWW/TR/REC-CSS1">http://www.w3.org/pub/WWW/TR/REC-CSS1</A>
<DT>
Authors:
<DD>
<A HREF="http://www.w3.org/People/howcome/">H&aring;kon Wium Lie</A>
(howcome@w3.org)<BR>
<A HREF="http://www.w3.org/People/Bos/">Bert Bos</A> (bert@w3.org)
</DL>
<P>
<HR>
<H3>
Status of this document
</H3>
<P>
This document is a W3C Recommendation. It has been reviewed by
<A HREF="http://www.w3.org/">W3C</A> (http://www.w3.org/) Members and general
consensus that the specification is appropriate for use has been reached.
It is a stable document and may be used as reference material or cited as
a normative reference from another document. W3C promotes widespread deployment
of this Recommendation.
<P>
A list of current W3C Recommendations and other technical documents can be
found at <A href="http://www.w3.org/pub/WWW/TR/">
http://www.w3.org/pub/WWW/TR/</A>.
<HR>
<DIV CLASS=spec>
<H2>
<A name="abstract">Abstract</A>
</H2>
<P>
This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1).
CSS1 is a simple style sheet mechanism that allows authors and readers to
attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1
language is human readable and writable, and expresses style in common desktop
publishing terminology.
<P>
One of the fundamental features of CSS is that style sheets cascade; authors
can attach a preferred style sheet, while the reader may have a personal
style sheet to adjust for human or technological handicaps. The rules for
resolving conflicts between different style sheets are defined in this
specification.
<P>
This Recommendation results from W3C activities in the area of
<A HREF="http://www.w3.org/pub/WWW/Style/Activity">Style Sheets</A>. For
background information on style sheets, see <A HREF="#ref1">[1]</A>.
<H2>
<A name="table-of-contents">Table of contents</A>
</H2>
<P>
<A HREF="#abstract">Abstract</A><BR>
<A HREF="#terminology">Terminology</A><BR>
<BR>
<A HREF="#basic-concepts">1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Basic concepts</A><BR>
<A HREF="#containment-in-html">1.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Containment in HTML</A><BR>
<A HREF="#grouping">1.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grouping</A><BR>
<A HREF="#inheritance">1.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inheritance</A><BR>
<A HREF="#class-as-selector">1.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Class as selector</A><BR>
<A HREF="#id-as-selector">1.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID as selector</A><BR>
<A HREF="#contextual-selectors">1.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contextual selectors</A><BR>
<A HREF="#comments">1.7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comments</A><BR>
<A HREF="#pseudo-classes-and-pseudo-elements">2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pseudo-classes and
pseudo-elements</A><BR>
<A HREF="#anchor-pseudo-classes">2.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anchor pseudo-classes</A><BR>
<A HREF="#typographical-pseudo-elements">2.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Typographical
pseudo-elements</A><BR>
<A HREF="#the-first-line-pseudo-element">2.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The 'first-line'
pseudo-element</A><BR>
<A HREF="#the-first-letter-pseudo-element">2.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The 'first-letter'
pseudo-element</A><BR>
<A HREF="#pseudo-elements-in-selectors">2.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pseudo-elements in
selectors</A><BR>
<A HREF="#multiple-pseudo-elements">2.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Multiple
pseudo-elements</A><BR>
<A HREF="#the-cascade">3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The cascade</A><BR>
<A HREF="#important">3.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'important'</A><BR>
<A HREF="#cascading-order">3.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cascading order</A><BR>
<A HREF="#formatting-model">4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Formatting model</A><BR>
<A HREF="#block-level-elements">4.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Block-level elements</A><BR>
<A HREF="#vertical-formatting">4.1.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vertical formatting</A><BR>
<A HREF="#horizontal-formatting">4.1.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horizontal formatting</A><BR>
<A HREF="#list-item-elements">4.1.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;List-item elements</A><BR>
<A HREF="#floating-elements">4.1.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Floating elements</A><BR>
<A HREF="#inline-elements">4.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inline elements</A><BR>
<A HREF="#replaced-elements">4.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Replaced elements</A><BR>
<A HREF="#the-height-of-lines">4.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The height of lines</A><BR>
<A HREF="#the-canvas">4.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The canvas</A><BR>
<A HREF="#br-elements">4.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'BR' elements</A><BR>
<A HREF="#css1-properties">5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS1 properties</A><BR>
<A HREF="#notation-for-property-values">5.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Notation for property
values</A><BR>
<A HREF="#font-properties">5.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Font properties</A><BR>
<A HREF="#font-matching">5.2.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Font matching</A><BR>
<A HREF="#font-family">5.2.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font-family'</A><BR>
<A HREF="#font-style">5.2.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font-style'</A><BR>
<A HREF="#font-variant">5.2.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font-variant'</A><BR>
<A HREF="#font-weight">5.2.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font-weight'</A><BR>
<A HREF="#font-size">5.2.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font-size'</A><BR>
<A HREF="#font">5.2.7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font'</A><BR>
<A HREF="#color-and-background-properties">5.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Color and background
properties</A><BR>
<A HREF="#color">5.3.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'color'</A><BR>
<A HREF="#background-color">5.3.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color'</A><BR>
<A HREF="#background-image">5.3.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-image'</A><BR>
<A HREF="#background-repeat">5.3.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-repeat'</A><BR>
<A HREF="#background-attachment">5.3.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-attachment'</A><BR>
<A HREF="#background-position">5.3.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-position'</A><BR>
<A HREF="#background">5.3.7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background'</A><BR>
<A HREF="#text-properties">5.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text properties</A><BR>
<A HREF="#word-spacing">5.4.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'word-spacing'</A><BR>
<A HREF="#letter-spacing">5.4.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'letter-spacing'</A><BR>
<A HREF="#text-decoration">5.4.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-decoration'</A><BR>
<A HREF="#vertical-align">5.4.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'vertical-align'</A><BR>
<A HREF="#text-transform">5.4.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-transform'</A><BR>
<A HREF="#text-align">5.4.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-align'</A><BR>
<A HREF="#text-indent">5.4.7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'text-indent'</A><BR>
<A HREF="#line-height">5.4.8
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'line-height'</A><BR>
<A HREF="#box-properties">5.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Box properties</A><BR>
<A HREF="#margin-top">5.5.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'margin-top'</A><BR>
<A HREF="#margin-right">5.5.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'margin-right'</A><BR>
<A HREF="#margin-bottom">5.5.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'margin-bottom'</A><BR>
<A HREF="#margin-left">5.5.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'margin-left'</A><BR>
<A HREF="#margin">5.5.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'margin'</A><BR>
<A HREF="#padding-top">5.5.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'padding-top'</A><BR>
<A HREF="#padding-right">5.5.7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'padding-right'</A><BR>
<A HREF="#padding-bottom">5.5.8
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'padding-bottom'</A><BR>
<A HREF="#padding-left">5.5.9
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'padding-left'</A><BR>
<A HREF="#padding">5.5.10
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'padding'</A><BR>
<A HREF="#border-top-width">5.5.11
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-top-width'</A><BR>
<A HREF="#border-right-width">5.5.12
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-right-width'</A><BR>
<A HREF="#border-bottom-width">5.5.13
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-bottom-width'</A><BR>
<A HREF="#border-left-width">5.5.14
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-left-width'</A><BR>
<A HREF="#border-width">5.5.15
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-width'</A><BR>
<A HREF="#border-color">5.5.16
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color'</A><BR>
<A HREF="#border-style">5.5.17
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-style'</A><BR>
<A HREF="#border-top">5.5.18
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-top'</A><BR>
<A HREF="#border-right">5.5.19
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-right'</A><BR>
<A HREF="#border-bottom">5.5.20
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-bottom'</A><BR>
<A HREF="#border-left">5.5.21
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-left'</A><BR>
<A HREF="#border">5.5.22
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border'</A><BR>
<A HREF="#width">5.5.23
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'width'</A><BR>
<A HREF="#height">5.5.24
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'height'</A><BR>
<A HREF="#float">5.5.25
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'float'</A><BR>
<A HREF="#clear">5.5.26
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'clear'</A><BR>
<A HREF="#classification-properties">5.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Classification
properties</A><BR>
<A HREF="#display">5.6.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'display'</A><BR>
<A HREF="#white-space">5.6.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'white-space'</A><BR>
<A HREF="#list-style-type">5.6.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'list-style-type'</A><BR>
<A HREF="#list-style-image">5.6.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'list-style-image'</A><BR>
<A HREF="#list-style-position">5.6.5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'list-style-position'</A><BR>
<A HREF="#list-style">5.6.6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'list-style'</A><BR>
<A HREF="#units">6
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Units</A><BR>
<A HREF="#length-units">6.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Length units</A><BR>
<A HREF="#percentage-units">6.2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Percentage units</A><BR>
<A HREF="#color-units">6.3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Color units</A><BR>
<A HREF="#url">6.4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;URL</A><BR>
<A HREF="#css1-conformance">7
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CSS1 conformance</A><BR>
<A HREF="#forward-compatible-parsing">7.1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Forward-compatible
parsing</A><BR>
<A HREF="#references">8
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;References</A><BR>
<A HREF="#acknowledgments">9
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Acknowledgments</A><BR>
<BR>
<A HREF="#appendix-a">Appendix A: Sample style sheet for HTML 2.0</A><BR>
<A HREF="#appendix-b">Appendix B: CSS1 grammar</A><BR>
<A HREF="#appendix-c">Appendix C: Encoding</A><BR>
<A HREF="#appendix-d">Appendix D: Gamma correction</A><BR>
<A HREF="#appendix-e">Appendix E: The applicability and extensibility of
CSS1</A><BR>
<H2>
<A name="terminology">Terminology</A>
</H2>
<DL>
<DT>
attribute
<DD>
HTML attribute
<DT>
author
<DD>
the author of an HTML document
<DT>
block-level element
<DD>
an element which has a line break before and after (e.g. 'H1' in HTML)
<DT>
canvas
<DD>
the part of the UA's drawing surface onto which documents are rendered
<DT>
child element
<DD>
a <EM>subelement</EM> in SGML <A HREF="#ref5">[5]</A> terminology
<DT>
contextual selector
<DD>
a selector that matches elements based on their position in the document
structure. A contextual selector consists of several simple selectors. E.g.,
the contextual selector 'H1.initial B' consists of two simple selectors,
'H1.initial' and 'B'.
<DT>
CSS
<DD>
Cascading Style Sheets
<DT>
CSS1
<DD>
Cascading Style Sheets, level 1. This document defines CSS1 which is a simple
style sheet mechanism for the web.
<DT>
CSS1 advanced features
<DD>
features that are described in this specification but labeled as not among
the CSS1 core features
<DT>
CSS1 core features
<DD>
the part of CSS1 that is required in all CSS1 conforming UAs
<DT>
CSS1 parser
<DD>
a User Agent that reads CSS1 style sheets
<DT>
declaration
<DD>
a property (e.g. 'font-size') and a corresponding value (e.g. '12pt')
<DT>
designer
<DD>
the designer of a style sheet
<DT>
document
<DD>
HTML document
<DT>
element
<DD>
HTML element
<DT>
element type
<DD>
a <EM>generic identifier</EM> in SGML <A HREF="#ref5">[5]</A> terminology
<DT>
fictional tag sequence
<DD>
a tool for describing the behavior of pseudo-classes and pseudo-elements
<DT>
font size
<DD>
The size for which a font is designed. Typically, the size of a font is
approximately equal to the distance from the bottom of the lowest letter
with a descender to the top of the tallest letter with an ascender and
(optionally) with a diacritical mark.
<DT>
HTML
<DD>
Hypertext Markup Language <A HREF="#ref2">[2]</A>, an application of SGML.
<DT>
HTML extension
<DD>
Markup introduced by UA vendors, most often to support certain visual effects.
The "FONT", "CENTER" and "BLINK" elements are examples of HTML extensions,
as is the "BGCOLOR" attribute. One of the goals of CSS is to provide an
alternative to HTML extensions.
<DT>
inline element
<DD>
an element which does not have a line break before and after (e.g. 'STRONG'
in HTML)
<DT>
intrinsic dimensions
<DD>
the width and height as defined by the element itself, not imposed by the
surroundings. In this specification it is assumed that all replaced elements
-- and only replaced elements -- come with intrinsic dimensions.
<DT>
parent element
<DD>
the <EM>containing element</EM> in SGML <A HREF="#ref5">[5]</A> terminology
<DT>
pseudo-element
<DD>
pseudo-elements are used in CSS selectors to address typographical items
(e.g. the first line of an element) rather than structural elements.
<DT>
pseudo-class
<DD>
pseudo-classes are used in CSS selectors to allow information external to
the HTML source (e.g. the fact that an anchor has been visited or not) to
classify elements.
<DT>
property
<DD>
a stylistic parameter that can be influenced through CSS. This specification
defines a list of properties and their corresponding values.
<DT>
reader
<DD>
the person for whom the document is rendered
<DT>
replaced element
<DD>
an element that the CSS formatter only knows the intrinsic dimensions of.
In HTML, 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' and 'OBJECT' elements can be
examples of replaced elements. E.g., the content of the 'IMG' element is
often replaced by the image that the SRC attribute points to. CSS1 does not
define how the intrinsic dimensions are found.
<DT>
rule
<DD>
a declaration (e.g. 'font-family: helvetica') and its selector (e.g. 'H1')
<DT>
selector
<DD>
a string that identifies what elements the corresponding rule applies to.
A selector can either be a simple selector (e.g. 'H1') or a contextual selector
(e.g. 'H1 B') which consists of several simple selectors.
<DT>
SGML
<DD>
Standard Generalized Markup Language <A HREF="#ref5">[5]</A>, of which HTML
is an application
<DT>
simple selector
<DD>
a selector that matches elements based on the element type and/or attributes,
and not he element's position in the document structure. E.g., 'H1.initial'
is a simple selector.
<DT>
style sheet
<DD>
a collection of rules
<DT>
UA
<DD>
User Agent, often a <EM>web browser</EM> or <EM>web client</EM>
<DT>
user
<DD>
synonymous with <EM>reader</EM>
<DT>
weight
<DD>
the priority of a rule
</DL>
<P>
In the text of this specification, single quotes ('...') denote HTML and
CSS excerpts.
<H2>
<A NAME="basic-concepts">1 &nbsp;&nbsp; Basic concepts</A>
</H2>
<P>
Designing simple style sheets is easy. One needs only to know a little HTML
and some basic desktop publishing terminology. E.g., to set the text color
of 'H1' elements to blue, one can say:
<PRE>
H1 { color: blue }
</PRE>
<P>
The example above is a simple CSS rule. A rule consists of two main parts:
selector ('H1') and declaration ('color: blue'). The declaration has two
parts: property ('color') and value ('blue'). While the example above tries
to influence only one of the properties needed for rendering an HTML document,
it qualifies as a style sheet on its own. Combined with other style sheets
(one fundamental feature of CSS is that style sheets are combined) it will
determine the final presentation of the document.
<P>
The selector is the link between the HTML document and the style sheet, and
all HTML element types are possible selectors. HTML element types are defined
in the HTML specification <A HREF="#ref2">[2]</A>.
<P>
The <A HREF="#color">'color'</A> property is one of around 50 properties
that determine the presentation of an HTML document. The list of
<A HREF="#css1-properties">properties and their possible values</A> is defined
in this specification.
<P>
HTML authors need to write style sheets only if they want to suggest a specific
style for their documents. Each User Agent (UA, often a "web browser" or
"web client") will have a default style sheet that presents documents in
a reasonable -- but arguably mundane -- manner. <A HREF="#appendix-a">Appendix
A</A> contains a sample style sheet to present HTML documents as suggested
in the HTML 2.0 specification <A HREF="#ref3">[3]</A>.
<P>
The formal grammar for the CSS1 language is defined in
<A HREF="#appendix-b">Appendix B</A>.
<H3>
<A NAME="containment-in-html">1.1 &nbsp;&nbsp; Containment in HTML</A>
</H3>
<P>
In order for the style sheets to influence the presentation, the UA must
be aware of their existence. The HTML specification <A HREF="#ref2">[2]</A>
define how to link HTML with style sheets. This section is therefore informative,
but not normative:
<PRE>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;title&lt;/TITLE&gt;
&lt;LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool"&gt;
&lt;STYLE TYPE="text/css"&gt;
@import url(http://style.com/basic);
H1 { color: blue }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;H1&gt;Headline is blue&lt;/H1&gt;
&lt;P STYLE="color: green"&gt;While the paragraph is green.
&lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
<P>
The example shows four ways to combine style and HTML: using the 'LINK' element
to link an external style sheet, a 'STYLE' element inside the 'HEAD' element,
an imported style sheet using the CSS '@import' notation, and a 'STYLE' attribute
on an element inside 'BODY'. The latter option mixes style with content and
loses the corresponding advantages of traditional style sheets.
<P>
The 'LINK' element references alternative style sheets that the reader can
select, while imported style sheets are automatically merged with the rest
of the style sheet.
<P>
Traditionally, UAs have silently ignored unknown tags. As as result, old
UAs will ignore the 'STYLE' element, but its content will be treated as part
of the document body, and rendered as such. During a transition phase, 'STYLE'
element content may be hidden using SGML comments:
<PRE>
&lt;STYLE TYPE="text/css"&gt;&lt;!--
H1 { color: green }
--&gt;&lt;/STYLE&gt;
</PRE>
<P>
Since the 'STYLE' element is declared as "CDATA" in the DTD (as defined in
<A HREF="#ref2">[2]</A>), conforming SGML parsers will not consider the above
style sheet to be a comment that is to be removed.
<H3>
<A NAME="grouping">1.2 &nbsp;&nbsp; Grouping</A>
</H3>
<P>
To reduce the size of style sheets, one can group selectors in comma-separated
lists:
<PRE>
H1, H2, H3 { font-family: helvetica }
</PRE>
<P>
Similarly, declarations can be grouped:
<PRE>
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
</PRE>
<P>
In addition, some properties have their own grouping syntax:
<PRE>
H1 { font: bold 12pt/14pt helvetica }
</PRE>
<P>
which is equivalent to the previous example.
<H3>
<A NAME="inheritance">1.3 &nbsp;&nbsp; Inheritance</A>
</H3>
<P>
In the first example, the color of 'H1' elements was set to blue. Suppose
there is an 'H1' element with an emphasized element inside:
<PRE>
&lt;H1&gt;The headline &lt;EM&gt;is&lt;/EM&gt; important!&lt;/H1&gt;
</PRE>
<P>
If no color has been assigned to the 'EM' element, the emphasized "is" will
inherit the color of the parent element, i.e. it will also appear in blue.
Other style properties are likewise inherited, e.g.
<A HREF="#font-family">'font-family'</A> and
<A HREF="#font-size">'font-size'</A>.
<P>
To set a "default" style property for a document, one can set the property
on an element from which all visible elements descend. In HTML documents,
the 'BODY' element can serve this function:
<PRE>
BODY {
color: black;
background: url(texture.gif) white;
}
</PRE>
<P>
This will work even if the author has omitted the 'BODY' tag (which is legal)
since the HTML parser will infer the missing tag. The example above sets
the text color to be black and the background to be an image. The background
will be white if the image is not available. (See section 5.3 for more on
this.)
<P>
Some style properties are not inherited from the parent element to the child
element. Most often it is intuitive why this is not the case. E.g., the
<A HREF="#background">'background'</A> property does not inherit, but the
parent element's background will shine through by default.
<P>
Often, the value of a property is a percentage that refers to another property:
<PRE>
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
</PRE>
<P>
For each property that allows percentage values, it is defined what property
it refers to. Children elements of 'P' will inherit the computed value of
<A HREF="#line-height">'line-height'</A> (i.e. 12pt), not the
<A HREF="#percentage-units">percentage</A>.
<H3>
<A NAME="class-as-selector">1.4 &nbsp;&nbsp; Class as selector</A>
</H3>
<P>
To increase the granularity of control over elements, a new attribute has
been added to HTML <A HREF="#ref2">[2]</A>: 'CLASS'. All elements inside
the 'BODY' element can be classed, and the class can be addressed in the
style sheet:
<PRE>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Title&lt;/TITLE&gt;
&lt;STYLE TYPE="text/css"&gt;
H1.pastoral { color: #00FF00 }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;H1 CLASS=pastoral&gt;Way too green&lt;/H1&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
<P>
The normal inheritance rules apply to classed elements; they inherit values
from their parent in the document structure.
<P>
One can address all elements of the same class by omitting the tag name in
the selector:
<PRE>
.pastoral { color: green } /* all elements with CLASS pastoral */
</PRE>
<P>
Only one class can be specified per selector. 'P.pastoral.marine' is therefore
an invalid selector in CSS1. (Contextual selectors, described below, can
have one class per simple selector)
<P>
CSS gives so much power to the CLASS attribute, that in many cases it doesn't
even matter what HTML element the class is set on -- you can make any element
emulate almost any other. Relying on this power is not recommended, since
it removes the level of structure that has a universal meaning (HTML elements).
A structure based on CLASS is only useful within a restricted domain, where
the meaning of a class has been mutually agreed upon.
<H3>
<A NAME="id-as-selector">1.5 &nbsp;&nbsp; ID as selector</A>
</H3>
<P>
HTML <A HREF="#ref2">[2]</A> also introduces the 'ID' attribute which is
guaranteed to have a unique value over the document. It can therefore be
of special importance as a style sheet selector, and can be addressed with
a preceding '#':
<PRE>
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
&lt;P ID=z98y&gt;Wide text&lt;/P&gt;
</PRE>
<P>
In the above example, the first selector matches the 'P' element due to the
'ID' attribute value. The second selector specifies both an element type
('H1') and an ID value, and will therefore not match the 'P' element.
<P>
By using the ID attribute as selector, one can set style properties on a
per-element basis. While style sheets have been designed to augment document
structure, this feature will allow authors to create documents that present
well on the canvas without taking advantage of the structural elements of
HTML. This use of style sheets is discouraged.
<H3>
<A NAME="contextual-selectors">1.6 &nbsp;&nbsp; Contextual selectors</A>
</H3>
<P>
Inheritance saves CSS designers typing. Instead of setting all style properties,
one can create defaults and then list the exceptions. To give 'EM' elements
within 'H1' a different color, one may specify:
<PRE>
H1 { color: blue }
EM { color: red }
</PRE>
<P>
When this style sheet is in effect, all emphasized sections within or outside
'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to
turn red and this can be specified with:
<PRE>
H1 EM { color: red }
</PRE>
<P>
The selector is now a search pattern on the stack of open elements, and this
type of selector is referred to as a <EM>contextual selector</EM>. Contextual
selectors consist of several simple selectors separated by whitespace (all
selectors described up to now have been simple selectors). Only elements
that match the last simple selector (in this case the 'EM' element) are
addressed, and only if the search pattern matches. Contextual selectors in
CSS1 look for ancestor relationships, but other relationships (e.g. parent-child)
may be introduced in later revisions. In the example above, the search pattern
matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
<PRE>
UL LI { font-size: small }
UL UL LI { font-size: x-small }
</PRE>
<P>
Here, the first selector matches 'LI' elements with at least one 'UL' ancestor.
The second selector matches a subset of the first, i.e. 'LI' elements with
at least two 'UL' ancestors. The conflict is resolved by the second selector
being more specific because of the longer search pattern. See the
<A HREF="#cascading-order">cascading order (section 3.2)</A> for more on
this.
<P>
Contextual selectors can look for element types, CLASS attributes, ID attributes
or combinations of these:
<PRE>
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
</PRE>
<P>
The first selector matches all 'P' elements that have a 'DIV' among the
ancestors. The second selector matches matches all 'H1' elements that have
an ancestor of class 'reddish'. The third selector matches all 'CODE' elements
that are descendants of the element with 'ID=x78y'. The fourth selector matches
all 'H1' elements that have a 'DIV' ancestor with class 'sidenote'.
<P>
Several contextual selectors can be grouped together:
<PRE>
H1 B, H2 B, H1 EM, H2 EM { color: red }
</PRE>
<P>
Which is equivalent to:
<PRE>
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
</PRE>
<H3>
<A NAME="comments">1.7 &nbsp;&nbsp; Comments</A>
</H3>
<P>
Textual comments in CSS style sheets are similar to those in the C programming
language <A HREF="#ref7">[7]</A>:
<PRE>
EM { color: red } /* red, really red!! */
</PRE>
<P>
Comments cannot be nested. For a CSS1 parser, a comment is equivalent to
whitespace.
<H2>
<A NAME="pseudo-classes-and-pseudo-elements">2 &nbsp;&nbsp; Pseudo-classes
and pseudo-elements</A>
</H2>
<P>
In CSS1, style is normally attached to an element based on its position in
the document structure. This simple model is sufficient for a wide variety
of styles, but doesn't cover some common effects. The concept of pseudo-classes
and pseudo-elements extend addressing in CSS1 to allow external information
to influence the formatting process.
<P>
Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not
exist in the HTML source. Rather, they are "inserted" by the UA under certain
conditions to be used for addressing in style sheets. They are referred to
as "classes" and "elements" since this is a convenient way of describing
their behavior. More specifically, their behavior is defined by a <EM>fictional
tag sequence</EM>.
<P>
Pseudo-elements are used to address sub-parts of elements, while pseudo-classes
allow style sheets to differentiate between different element types.
<H3>
<A NAME="anchor-pseudo-classes">2.1 &nbsp;&nbsp; Anchor pseudo-classes</A>
</H3>
<P>
User agents commonly display newly visited anchors differently from older
ones. In CSS1, this is handled through pseudo-classes on the 'A' element:
<PRE>
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
</PRE>
<P>
All 'A' elements with an 'HREF' attribute will be put into one and only one
of these groups (i.e. target anchors are not affected). UAs may choose to
move an element from 'visited' to 'link' after a certain time. An 'active'
link is one that is currently being selected (e.g. by a mouse button press)
by the reader.
<P>
The formatting of an anchor pseudo-class is as if the class had been inserted
manually. A UA is not required to reformat a currently displayed document
due to anchor pseudo-class transitions. E.g., a style sheet can legally specify
that the 'font-size' of an 'active' link should be larger that a 'visited'
link, but the UA is not required to dynamically reformat the document when
the reader selects the 'visited' link.
<P>
Pseudo-class selectors do not match normal classes, and vice versa. The style
rule in the example below will therefore not have any influence:
<PRE>
A:link { color: red }
&lt;A CLASS=link NAME=target5&gt; ... &lt;/A&gt;
</PRE>
<P>
In CSS1, anchor pseudo-classes have no effect on elements other than 'A'.
Therefore, the element type can be omitted from the selector:
<PRE>
A:link { color: red }
:link { color: red }
</PRE>
<P>
The two selectors above will select the same elements in CSS1.
<P>
Pseudo-class names are case-insensitive.
<P>
Pseudo-classes can be used in contextual selectors:
<PRE>
A:link IMG { border: solid blue }
</PRE>
<P>
Also, pseudo-classes can be combined with normal classes:
<PRE>
A.external:visited { color: blue }
&lt;A CLASS=external HREF="http://out.side/"&gt;external link&lt;/A&gt;
</PRE>
<P>
If the link in the above example has been visited, it will be rendered in
blue. Note that normal class names precede pseudo-classes in the selector.
<H3>
<A NAME="typographical-pseudo-elements">2.2 &nbsp;&nbsp; Typographical
pseudo-elements</A>
</H3>
<P>
Some common typographical effects are associated not with structural elements
but rather with typographical items as formatted on the canvas. In CSS1,
two such typographical items can be addressed through pseudo-elements: the
first line of an element, and the first letter.
<P>
<EM>CSS1 core:</EM> UAs may ignore all rules with ':first-line' or
':first-letter' in the selector, or, alternatively, only support a subset
of the properties on these pseudo-elements. (see
<A href="#css1-conformance">section 7</A>)
<H3>
<A NAME="the-first-line-pseudo-element">2.3 &nbsp;&nbsp; The 'first-line'
pseudo-element</A>
</H3>
<P>
The 'first-line' pseudo-element is used to apply special styles to the first
line as formatted on the canvas:
<PRE>
&lt;STYLE TYPE="text/css"&gt;
P:first-line { font-style: small-caps }
&lt;/STYLE&gt;
&lt;P&gt;The first line of an article in Newsweek.
</PRE>
<P>
On a text-based UA, this could be formatted as:
<PRE>
THE FIRST LINE OF AN
article in Newsweek.
</PRE>
<P>
The fictional tag sequence in the above example is:
<PRE>
&lt;P&gt;
&lt;P:first-line&gt;
The first line of an
&lt;/P:first-line&gt;
article in Newsweek.
&lt;/P&gt;
</PRE>
<P>
The 'first-line' end tag is inserted at the end of the first line as formatted
on the canvas.
<P>
The 'first-line' pseudo-element can only be attached to a block-level element.
<P>
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 (<A href="#font-properties">5.2</A>), color and
background properties (<A href="#color-and-background-properties">5.3</A>),
'word-spacing' (<A href="#word-spacing">5.4.1</A>), 'letter-spacing'
(<A href="#letter-spacing">5.4.2</A>), 'text-decoration'
(<A href="#text-decoration">5.4.3</A>), 'vertical-align
(<A href="#vertical-align">5.4.4</A>), 'text-transform'
(<A href="#text-transform">5.4.5</A>), 'line-height'
(<A href="#line-height">5.4.8</A>), 'clear' (<A href="#clear">5.5.26</A>).
<H3>
<A NAME="the-first-letter-pseudo-element">2.4 &nbsp;&nbsp; The 'first-letter'
pseudo-element</A>
</H3>
<P>
The 'first-letter' pseudo-element is used for "initial caps" and "drop caps",
which are common typographical effects. It is similar to an inline element
if its 'float' property is 'none', otherwise it is similar to a floating
element. These are the properties that apply to 'first-letter' pseudo-elements:
font properties (<A href="#font-properties">5.2</A>), color and background
properties (<A href="#color-and-background-properties">5.3</A>),
'text-decoration' (<A href="#text-decoration">5.4.3</A>), 'vertical-align
(only if 'float' is 'none', <A href="#vertical-align">5.4.4</A>),
'text-transform' (<A href="#text-transform">5.4.5</A>), 'line-height'
(<A href="#line-height">5.4.8</A>), margin properties
(<A href="#margin-top">5.5.1</A>-<A href="#margin">5.5.5</A>), padding properties
(<A href="#padding-top">5.5.6</A>-<A href="#padding">5.5.10</A>), border
properties
(<A href="#border-top-width">5.5.11</A>-<A href="#border">5.5.22</A>), 'float'
(<A href="#float">5.5.25</A>), 'clear' (<A href="#clear">5.5.26</A>).
<P>
This is how you could make a dropcap initial letter span two lines:
<PRE>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Title&lt;/TITLE&gt;
&lt;STYLE TYPE="text/css"&gt;
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;&lt;SPAN&gt;The first&lt;/SPAN&gt; few words of an article in The Economist.&lt;/P&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
<P>
If a text-based UA supports the 'first-letter' pseudo-element (they probably
will not), the above could be formatted as:
<PRE>
___
| HE FIRST few
| words of an
article in the
Economist.
</PRE>
<P>
The fictional tag sequence is:
<PRE>
&lt;P&gt;
&lt;SPAN&gt;
&lt;P:first-letter&gt;
T
&lt;/P:first-letter&gt;he first
&lt;/SPAN&gt;
few words of an article in the Economist.
&lt;/P&gt;
</PRE>
<P>
Note that the 'first-letter' pseudo-element tags abut the content (i.e. the
initial character), while the 'first-line' pseudo-element start tag is inserted
right after the start tag of the element it is attached to.
<P>
The UA defines what characters are inside the 'first-letter' element. Normally,
quotes that precede the first letter should be included:
<PRE>
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
</PRE>
<P>
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.
<P>
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.
<P>
The 'first-letter' pseudo-element can only be attached to a block-level element.
<H3>
<A NAME="pseudo-elements-in-selectors">2.5 &nbsp;&nbsp; Pseudo-elements in
selectors</A>
</H3>
<P>
In a contextual selector, pseudo-elements are only allowed at the end of
the selector:
<PRE>
BODY P:first-letter { color: purple }
</PRE>
<P>
Pseudo-elements can be combined with classes in selectors:
<PRE>
P.initial:first-letter { color: red }
&lt;P CLASS=initial&gt;First paragraph&lt;/A&gt;
</PRE>
<P>
The above example would make the first letter of all 'P' elements with
'CLASS=initial' red. When combined with classes or pseudo-classes,
pseudo-elements must be specified at the end of the selector. Only one
pseudo-element can be specified per selector.
<H3>
<A NAME="multiple-pseudo-elements">2.6 &nbsp;&nbsp; Multiple
pseudo-elements</A>
</H3>
<P>
Several pseudo elements can be combined:
<PRE>
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
&lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
</PRE>
<P>
In this example, the first letter of each 'P' element would be green with
a font size of 24pt. The rest of the first line (as formatted on the canvas)
would be blue while the rest of the paragraph would be red. Assuming that
a line break will occur before the word "ends", the fictional tag sequence
is:
<PRE>
&lt;P&gt;
&lt;P:first-line&gt;
&lt;P:first-letter&gt;
S
&lt;/P:first-letter&gt;ome text that
&lt;/P:first-line&gt;
ends up on two lines
&lt;/P&gt;
</PRE>
<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'.
<P>
If a pseudo-element breaks up a real element the necessary extra tags must
be regenerated in the fictional tag sequence. For example, if a SPAN element
spans over a <TT>&lt;/P:first-line&gt;</TT> tag, a set of SPAN end and start
tags must be regenerated and the fictional tag sequence becomes:
<PRE>
&lt;P&gt;
&lt;P:first-line&gt;
&lt;SPAN&gt;
This text is inside a long
&lt;/SPAN&gt;
&lt;/P:first-line&gt;
&lt;SPAN&gt;
span element
&lt;/SPAN&gt;
</PRE>
<H2>
<A NAME="the-cascade">3 &nbsp;&nbsp; The cascade</A>
</H2>
<P>
In CSS, more than one style sheet can influence the presentation simultaneously.
There are two main reasons for this feature: modularity and author/reader
balance.
<DL>
<DT>
modularity
<DD>
A style sheet designer can combine several (partial) style sheets to reduce
redundancy:
<PRE>
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* override imported sheets */
</PRE>
<DT>
author/reader balance
<DD>
Both readers and authors can influence the presentation through style sheets.
To do so, they use the same style sheet language thus reflecting a fundamental
feature of the web: everyone can become a publisher. The UA is free to choose
the mechanism for referencing personal style sheets.
</DL>
<P>
Sometimes conflicts will arise between the style sheets that influence the
presentation. Conflict resolution is based on each style rule having a weight.
By default, the weights of the reader's rules are less than the weights of
rules in the author's documents. I.e., if there are conflicts between the
style sheets of an incoming document and the reader's personal sheets, the
author's rules will be used. Both reader and author rules override the UA's
default values.
<P>
The imported style sheets also cascade with each other, in the order they
are imported, according to the cascading rules defined below. Any rules specified
in the style sheet itself override rules in imported style sheets. That is,
imported style sheets are lower in the cascading order than rules in the
style sheet itself. Imported style sheets can themselves import and override
other style sheets, recursively.
<P>
In CSS1, all '@import' statements must occur at the start of a style sheet,
before any declarations. This makes it easy to see that rules in the style
sheet itself override rules in the imported style sheets.
<H3>
<A NAME="important">3.1 &nbsp;&nbsp; 'important'</A>
</H3>
<P>
Style sheet designers can increase the weights of their declarations:
<PRE>
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
</PRE>
<P>
In the example above, the first three declarations have increased weight,
while the last declaration has normal weight.
<P>
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.
<H3>
<A NAME="cascading-order">3.2 &nbsp;&nbsp; Cascading order</A>
</H3>
<P>
Conflicting rules are intrinsic to the CSS mechanism. To find the value for
an element/property combination, the following algorithm must be followed:
<OL>
<LI>
Find all declarations that apply to the element/property in question.
Declarations apply if the selector matches the element in question. If no
declarations apply, the inherited value is used. If there is no inherited
value (this is the case for the 'HTML' element and for properties that do
not inherit), the initial value is used.
<LI>
Sort the declarations by explicit weight: declarations marked '!important'
carry more weight than unmarked (normal) declarations.
<LI>
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.
<LI>
Sort by specificity of selector: more specific selectors will override more
general ones. To find the specificity, count the number of ID attributes
in the selector (a), the number of CLASS attributes in the selector (b),
and the number of tag names in the selector (c). Concatenating the three
numbers (in a number system with a large base) gives the specificity. Some
examples:
<PRE>
LI {...} /* a=0 b=0 c=1 -&gt; specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -&gt; specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -&gt; specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -&gt; specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -&gt; specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -&gt; specificity = 100 */
</PRE>
<P>
Pseudo-elements and pseudo-classes are counted as normal elements and classes,
respectively.
<LI>
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.
</OL>
<P>
The search for the property value can be terminated whenever one rule has
a higher weight than the other rules that apply to the same element/property
combination.
<P>
This strategy gives author's style sheets considerably higher weight than
those of the reader. It is therefore important that the reader has the ability
to turn off the influence of a certain style sheet, e.g. through a pull-down
menu.
<P>
A declaration in the 'STYLE' attribute of an element (see
<A HREF="#containment-in-html">section 1.1</A> for an example) has the same
weight as a declaration with an ID-based selector that is specified at the
end of the style sheet:
<PRE>
&lt;STYLE TYPE="text/css"&gt;
#x97z { color: blue }
&lt;/STYLE&gt;
&lt;P ID=x97z STYLE="color: red"&gt;
</PRE>
<P>
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.
<P>
The UA may choose to honor other stylistic HTML attributes, for example 'ALIGN'.
If so, these attributes are translated to the corresponding CSS rules with
specificity equal to 1. The rules are assumed to be at the start of the author
style sheet and may be overridden by subsequent style sheet rules. In a
transition phase, this policy will make it easier for stylistic attributes
to coexist with style sheets.
<H2>
<A NAME="formatting-model">4 &nbsp;&nbsp; Formatting model</A>
</H2>
<P>
CSS1 assumes a simple box-oriented formatting model where each element results
in one or more rectangular boxes. (Elements that have a 'display' value of
'none' are not formatted and will therefore not result in a box.) All boxes
have a core content area with optional surrounding padding, border and margin
areas.
<PRE>
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
</PRE>
<P>
The size of the margin, border and padding are set with the margin
(<A href="#margin-top">5.5.1</A>-<A href="#margin">5.5.5</A>), padding
(<A href="#padding-top">5.5.6</A>-<A href="#padding">5.5.10</A>), and border
(<A href="#border-top-width">5.5.11</A>-<A href="#border">5.5.22</A>) properties
respectively. The padding area uses the same background as the element itself
(set with the background properties
(<A href="#background-color">5.3.2</A>-<A href="#background">5.3.7</A>).
The color and style for the border is set with the border properties. The
margins are always transparent, so the parent element will shine through.
<P>
The size of the box is the sum of the element width (i.e. formatted text
or image) and the padding, the border and the margin areas.
<P>
From the formatter's point of view there are two main types of elements:
block-level and inline.
<H3>
<A NAME="block-level-elements">4.1 &nbsp;&nbsp; Block-level elements</A>
</H3>
<P>
Elements with a 'display' value of 'block' or 'list-item' are
<EM>block-level</EM> elements. Also, floating elements (elements with a 'float'
value other than 'none') are considered to be block-level elements.
<P>
The following example shows how margins and padding format a 'UL' element
with two children. To simplify the diagram there are no borders. Also, the
single-letter "constants" in this example are not legal CSS1 syntax, but
is a convenient way to tie the style sheet values to the figure.
<PRE>
&lt;STYLE TYPE="text/css"&gt;
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* so text is white on blue */
margin: a b c d;
padding: e f g h;
}
&lt;/STYLE&gt;
..
&lt;UL&gt;
&lt;LI&gt;1st element of list
&lt;LI&gt;2nd element of list
&lt;/UL&gt;
</PRE>
<PRE>
_______________________________________________________
| |
| A UL margin (transparent) |
| _______________________________________________ |
| D | | B |
| | E UL padding (red) | |
| | _______________________________________ | |
| | H | | F | |
| | | a LI margin (transparent, | | |
| | | so red shines through) | | |
| | | _______________________________ | | |
| | | d | | b | | |
| | | | e LI padding (blue) | | | |
| | | | | | | |
| | | | h 1st element of list f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | max(a, c) | | | &lt;- note the max
| | | _______________________________ | | |
| | | | | | | |
| | | d | e LI padding (blue) | | | |
| | | | | | | |
| | | | h 2nd element of list f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | c LI margin (transparent, | | |
| | | so red shines through) | | |
| | |_______________________________________| | |
| | | |
| | G | |
| |_______________________________________________| |
| |
| C |
|_______________________________________________________|
</PRE>
<P>
Technically, padding and margin properties are not inherited. But, as the
example shows, the placement of an element is relative to ancestors and siblings,
so these elements' padding and margin properties have an effect on their
children.
<P>
If there had been borders in the above example they would have appeared between
the padding and the margins.
<P>
The following diagram introduces some useful terminology:
<PRE>
--------------- <B>&lt;-- top</B>
top margin
---------------
top border
---------------
top padding
+-------------+ <B>&lt;-- inner top</B>
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <B>&lt;-- inner bottom</B>
<B>^</B> <B>^</B> <B>^</B> <B>^</B>
<B>left</B> <B>left inner edge</B> <B>right inner edge</B> <B>right</B>
<B>outer</B> <B>outer</B>
<B>edge</B> bottom padding <B>edge</B>
---------------
bottom border
---------------
bottom margin
--------------- <B>&lt;-- bottom</B>
</PRE>
<P>
The <EM>left outer edge</EM> is the edge of an element with its padding,
border and margin taken into account. The <EM>left inner edge</EM> is the
edge of the content only, inside any padding, border or margin. Ditto for
right. The <EM>top</EM> 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 <EM>inner top</EM> is the top of the
content, inside any padding, border or margin. The <EM>bottom</EM> 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 <EM>inner bottom</EM> is the bottom of the element, inside
any padding, border and margin.
<P>
The <EM>width</EM> of an element is the width of the content, i.e., the distance
between left inner edge and right inner edge. The <EM>height</EM> is the
height of the content, i.e., the distance from inner top to inner bottom.
<H4>
<A NAME="vertical-formatting">4.1.1 &nbsp;&nbsp; Vertical formatting</A>
</H4>
<P>
The width of the margin on non-floating block-level elements specifies the
minimum distance to the edges of surrounding boxes. Two or more adjoining
vertical margins (i.e., with no border, padding or content between them)
are collapsed to use the maximum of the margin values. In most cases, after
collapsing the vertical margins the result is visually more pleasing and
closer to what the designer expects. In the example above, the margins between
the two 'LI' elements are collapsed by using the maximum of the first LI
element's 'margin-bottom' and the second LI element's 'margin-top'. Similarly,
if the padding between the 'UL' and the first 'LI' element (the "E" constant)
had been zero, the margins of the UL and first LI elements would have been
collapsed.
<P>
In the case of negative margins, the absolute maximum of the negative adjoining
margins is deducted from the maximum of the positive adjoining margins. If
there are no positive margins, the absolute maximum of the negative adjoining
margins is deducted from zero.
<H4>
<A NAME="horizontal-formatting">4.1.2 &nbsp;&nbsp; Horizontal formatting</A>
</H4>
<P>
The horizontal position and size of a non-floating, block-level element is
determined by seven properties: 'margin-left', 'border-left', 'padding-left',
'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these
seven is always equal to the 'width' of the parent element.
<P>
By default, the 'width' of an element is 'auto'. If the element is not a
replaced element, this means that the 'width' is calculated by the UA so
that the sum of the seven properties mentioned above is equal to the parent
width. If the element is a replaced element, a value of 'auto' for 'width'
is automatically replaced by the element's intrinsic width.
<P>
Three of the seven properties can be set to 'auto': 'margin-left', 'width'
and 'margin-right'. For replaced elements, a value of 'auto' on 'width' is
replaced by the intrinsic width, so for them there can only be two 'auto'
values.
<P>
The 'width' has a non-negative UA-defined minimum value (which may vary from
element to element and even depend on other properties). If 'width' goes
below this limit, either because it was set explicitly, or because it was
'auto' and the rules below would make it too small, the value will be replaced
with the minimum value instead.
<P>
If <EM>exactly one</EM> 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.
<P>
If <EM>none</EM> of the properties are 'auto', the value of 'margin-right'
will be assigned 'auto'.
<P>
If <EM>more than one</EM> of the three is 'auto', and one of them is 'width',
than the others ('margin-left' and/or 'margin-right') will be set to zero
and 'width' will get the value needed to make the sum of the seven equal
to the parent's width.
<P>
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.
<P>
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.
<P>
Unlike vertical margins, horizontal margins are not collapsed.
<H3>
<A NAME="list-item-elements">4.1.3 &nbsp;&nbsp; List-item elements</A>
</H3>
<P>
Elements with a 'display' property value of 'list-item' are formatted as
block-level elements, but preceded by a list-item marker. The type of marker
is determined by the 'list-style' property. The marker is placed according
to the value of the <A HREF="#list-style">'list-style'</A> property:
<PRE>
&lt;STYLE TYPE="text/css"&gt;
UL { list-style: outside }
UL.compact { list-style: inside }
&lt;/STYLE&gt;
&lt;UL&gt;
&lt;LI&gt;first list item comes first
&lt;LI&gt;second list item comes second
&lt;/UL&gt;
&lt;UL CLASS=COMPACT&gt;
&lt;LI&gt;first list item comes first
&lt;LI&gt;second list item comes second
&lt;/UL&gt;
</PRE>
<P>
The above example may be formatted as:
<PRE>
* first list item
comes first
* second list item
comes second
* first list
item comes first
* second list
item comes second
</PRE>
<P>
In right-to-left text, the markers would have been on the right side of the
box.
<H3>
<A NAME="floating-elements">4.1.4 &nbsp;&nbsp; Floating elements</A>
</H3>
<P>
Using the <A HREF="#float">'float'</A> property, an element can be declared
to be outside the normal flow of elements and is then formatted as a block-level
element. For example, by setting the 'float' property of an image to 'left',
the image is moved to the left until the margin, padding or border of another
block-level element is reached. The normal flow will wrap around on the right
side. The margins, borders and padding of the element itself will be honored,
and the margins never collapse with the margins of adjacent elements.
<P>
A floating element is positioned subject to the following constraints (see
<A href="#block-level-elements">section 4.1</A> for an explanation of the
terms):
<OL>
<LI>
The left outer edge of a left-floating element may not be to the left of
the left inner edge of its parent element. Analogously for right floating
elements.
<LI>
The left outer edge of a left floating element must be to the right of the
right outer edge of every earlier (in the HTML source) left-floating element
or the top of the former must be lower than the bottom of the latter. Analogously
for right floating elements.
<LI>
The right outer edge of a left-floating element may not be to the right of
the left outer edge of any right-floating element that is to the right of
it. Analogously for right-floating elements.
<LI>
A floating element's top may not be higher than the inner top of its parent.
<LI>
A floating element's top may not be higher than the top of any earlier floating
or block-level element.
<LI>
A floating element's top may not be higher than the top of any
<EM>line-box</EM> (see section 4.4) with content that precedes the floating
element in the HTML source.
<LI>
A floating element must be placed as high as possible.
<LI>
A left-floating element must be put as far to the left as possible, a
right-floating element as far to the right as possible. A higher position
is preferred over one that is further to the left/right.
</OL>
<PRE>
&lt;STYLE TYPE="text/css"&gt;
IMG { float: left }
BODY, P, IMG { margin: 2em }
&lt;/STYLE&gt;
&lt;BODY&gt;
&lt;P&gt;
&lt;IMG SRC=img.gif&gt;
Some sample text that has no other...
&lt;/BODY&gt;
</PRE>
<P>
The above example could be formatted as:
<PRE>
________________________________________
|
| max(BODY margin, P margin)
| ______________________________
| | | Some sample text
| B | P | IMG margins that has no other
| O | | _____ purpose than to
| D | m | | | show how floating
| Y | a | | IMG | elements are moved
| | r | | | to the side of the
| m | g | |_____| parent element
| a | i | while honoring
| r | n | margins, borders
| g | | and padding. Note
| i | |how adjacent vertical margins
| n | |are collapsed between non-
| | |floating block-level elements.
</PRE>
<P>
Note that the margin of the 'P' elements enclose the floating 'IMG' element.
<P>
There are two situations when floating elements can overlap with the margin,
border and padding areas of other elements:
<UL>
<LI>
when the floating element has a negative margin: negative margins on floating
elements are honored as on other block-level elements.
<LI>
when the floating element is wider or higher than the element it is inside
</UL>
<H3>
<A NAME="inline-elements">4.2 &nbsp;&nbsp; Inline elements</A>
</H3>
<P>
Elements that are not formatted as block-level elements are <EM>inline</EM>
elements. An inline element can share line space with other elements. Consider
this example:
<PRE>
&lt;P&gt;Several &lt;EM&gt;emphasized&lt;/EM&gt; words &lt;STRONG&gt;appear&lt;/STRONG&gt;.&lt;/P&gt;
</PRE>
<P>
The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline
elements. If the 'P' element is wide enough to format the whole element on
one line, there will be two inline elements on the line:
<PRE>
Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.
</PRE>
<P>
If there is not enough room on one line an inline element will be split into
several boxes:
<PRE>
&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear here.&lt;/P&gt;
</PRE>
<P>
The above example may be formatted as:
<PRE>
Several <EM>emphasized</EM>
<EM>words</EM> appear here.
</PRE>
<P>
If the inline element has margins, borders, padding or text decorations attached,
these will have no effect where the element is broken:
<PRE>
----------
Several |<EM>emphasized</EM>
----------
-----
<EM>words</EM>| appear here.
-----
</PRE>
<P>
(The "figure" above is slightly distorted due to the use of ASCII graphics.
See <A HREF="#the-height-of-lines">section 4.4</A> for a description of how
to calculate the height of lines.
<H3>
<A NAME="replaced-elements">4.3 &nbsp;&nbsp; Replaced elements</A>
</H3>
<P>
A replaced element is an element which is replaced by content pointed to
from the element. E.g., in HTML, the 'IMG' element is replaced by the image
pointed to by the 'SRC' attribute. One can assume that replaced elements
come with their own intrinsic dimensions. If the value of the 'width' property
is 'auto', the intrinsic width is used as the width of the element. If a
value other than 'auto' is specified in the style sheet, this value is used
and the replaced element is resized accordingly (the resize method will depend
on the media type). The 'height' property is used in the same manner.
<P>
Replaced elements can be either block-level or inline.
<H3>
<A NAME="the-height-of-lines">4.4 &nbsp;&nbsp; The height of lines</A>
</H3>
<P>
All elements have a 'line-height' property that, in principle, gives the
total height of a line of text. Space is added above and below the text of
the line to arrive at that line height. For example, if the text is 12pt
high and 'line-height' is set to '14pt', an extra space of 2pt is added,
namely 1pt above and 1pt below the line. Empty elements influence these
calculations just like elements with content.
<P>
The difference between the font size and the 'line-height' is called the
<EM>leading</EM>. Half the leading is called the <EM>half-leading</EM>. After
formatting, each line will form a rectangular <EM>line-box</EM>.
<P>
If a line of text contains sections with different 'line-height' values (because
there are inline elements on the line), then each of those sections has its
own half-leading above and below. The height of the line-box is from the
top of the highest section to the bottom of the lowest one. Note that the
top and bottom do not necessarily correspond to the tallest element, since
elements can be positioned vertically with the
<A HREF="#vertical-align">'vertical-align'</A> property. To form a paragraph,
each line-box is stacked immediately below the previous line.
<P>
Note that any padding, border or margin above and below non-replaced inline
elements does not influence the height of the line. In other words: if the
'line-height' is too small for the chosen padding or border, it will overlap
with text on other lines.
<P>
Replaced elements (e.g. images) on the line can make the line-box bigger,
if the top of the replaced element (i.e., including all of its padding, border
and margin) is above the tallest text section, or if the bottom is below
the lowest.
<P>
In the normal case, when there is only one value of 'line-height' throughout
a paragraph, and no tall images, the definition above will ensure that baselines
of successive lines are exactly 'line-height' apart. This is important when
columns of text in different fonts have to be aligned, for example in a table.
<P>
Note that this doesn't preclude the text on two adjacent lines from overlapping
each other. The 'line-height' may be smaller than the height of the text,
in which case the leading will be negative. This is useful if you know that
the text will contain no descenders (e.g., because it only contains uppercase),
so the lines can be put closer together.
<H3>
<A NAME="the-canvas">4.5 &nbsp;&nbsp; The canvas</A>
</H3>
<P>
The canvas is the part of the UA's drawing surface onto which documents are
rendered. No structural element of a document corresponds to the canvas,
and this raises two issues when formatting a document:
<UL>
<LI>
from where should the dimensions of the canvas be set?
<LI>
when the document doesn't cover the whole canvas, how should this area be
rendered?
</UL>
<P>
A reasonable answer to the first question is that the initial size of the
canvas is based on the window size, but CSS1 leaves this issue for the UA
to decide. It is also reasonable to expect the UA to change the canvas size
when the window is resized, but this is also outside the scope of CSS1.
<P>
HTML extensions have set a precedent for the second question: attributes
on the 'BODY' element set the background of the whole canvas. To support
designers' expectations, CSS1 introduces a special rule to find the canvas
background:
<BLOCKQUOTE>
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.
</BLOCKQUOTE>
<P>
This rule allows:
<PRE>
&lt;HTML STYLE="background: url(http://style.com/marble.png)"&gt;
&lt;BODY STYLE="background: red"&gt;
</PRE>
<P>
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.
<P>
Until other means of addressing the canvas become available, it is recommended
that canvas properties are set on the 'BODY' element.
<H3>
<A NAME="br-elements">4.6 &nbsp;&nbsp; 'BR' elements</A>
</H3>
<P>
The current CSS1 properties and values cannot describe the behavior of the
'BR' element. In HTML, the 'BR' element specifies a line break between words.
In effect, the element is replaced by a line break. Future versions of CSS
may handle added and replaced content, but CSS1-based formatters must treat
'BR' specially.
<H2>
<A NAME="css1-properties">5 &nbsp;&nbsp; CSS1 properties</A>
</H2>
<P>
Style sheets influence the presentation of documents by assigning values
to style properties. This section lists the defined style properties, and
their corresponding list of possible values, of CSS1.
<H3>
<A NAME="notation-for-property-values">5.1 &nbsp;&nbsp; Notation for property
values</A>
</H3>
<P>
In the text below, the allowed values for each property are listed with a
syntax like the following:
<BLOCKQUOTE>
<EM>Value:</EM> N | NW | NE<BR>
<EM>Value:</EM> [ &lt;length&gt; | thick | thin ]{1,4}<BR>
<EM>Value:</EM> [&lt;family-name&gt; , ]* &lt;family-name&gt;<BR>
<EM>Value:</EM> &lt;url&gt;? &lt;color&gt; [ / &lt;color&gt; ]?<BR>
<EM>Value:</EM> &lt;url&gt; || &lt;color&gt;<BR>
</BLOCKQUOTE>
<P>
The words between "&lt;" and "&gt;" give a type of value. The most common
types are &lt;length&gt;, &lt;percentage&gt;, &lt;url&gt;, &lt;number&gt;
and &lt;color&gt;; these are described in <A HREF="#units">section 6</A>.
The more specialized types (e.g. &lt;font-family&gt; and
&lt;border-style&gt;) are described under the corresponding property.
<P>
Other words are keywords that must appear literally, without quotes. The
slash (/) and the comma (,) must also appear literally.
<P>
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 ]]".
<P>
Every type, keyword, or bracketed group may be followed by one of the following
modifiers:
<UL>
<LI>
An asterisk (*) indicates that the preceding type, word or group is repeated
zero or more times.
<LI>
A plus (+) indicates that the preceding type, word or group is repeated one
or more times.
<LI>
A question mark (?) indicates that the preceding type, word or group is optional.
<LI>
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.
</UL>
<H3>
<A NAME="font-properties">5.2 &nbsp;&nbsp; Font properties</A>
</H3>
<P>
Setting font properties will be among the most common uses of style sheets.
Unfortunately, there exists no well-defined and universally accepted taxonomy
for classifying fonts, and terms that apply to one font family may not be
appropriate for others. E.g. 'italic' is commonly used to label slanted text,
but slanted text may also be labeled as being <EM>Oblique, Slanted, Incline,
Cursive</EM> or <EM>Kursiv</EM>. Therefore it is not a simple problem to
map typical font selection properties to a specific font.
<P>
CSS1 defines the properties <A HREF="#font-family">'font-family'</A>,
<A HREF="#font-style">'font-style'</A>,
<A HREF="#font-variant">'font-variant'</A> and
<A HREF="#font-weight">'font-weight'</A>,
<A HREF="#font-size">'font-size'</A>, <A HREF="#font">'font'</A>.
<H4>
<A NAME="font-matching">5.2.1 &nbsp;&nbsp; Font matching</A>
</H4>
<P>
Because there is no accepted, universal taxonomy of font properties, matching
of properties to font faces must be done carefully. The properties are matched
in a well-defined order to insure that the results of this matching process
are as consistent as possible across UAs (assuming that the same library
of font faces is presented to each of them).
<OL>
<LI>
The User Agent makes (or accesses) a database of relevant CSS1 properties
of all the fonts of which the UA is aware. The UA may be aware of a font
because it has been installed locally or it has been previously downloaded
over the web. If there are two fonts with exactly the same properties, one
of them is ignored.
<LI>
At a given element and for each character in that element, the UA assembles
the font-properties applicable to that element. Using the complete set of
properties, the UA uses the 'font-family' property to choose a tentative
font family. The remaining properties are tested against the family according
to the matching criteria described with each property. If there are matches
for all the remaining properties, then that is the matching font face for
the given element.
<LI>
If there is no matching font face within the 'font-family' being processed
by step 2, and if there is a next alternative 'font-family' in the font set,
then repeat step 2 with the next alternative 'font-family'.
<LI>
If there is a matching font face, but it doesn't contain a glyph for the
current character, and if there is a next alternative 'font-family' in the
font sets, then repeat step 2 with the next alternative 'font-family'. See
<A HREF="#appendix-c">appendix C</A> for a description of font and character
encoding.
<LI>
If there is no font within the family selected in 2, then use a UA-dependent
default 'font-family' and repeat step 2, using the best match that can be
obtained within the default font.
</OL>
<P>
(The above algorithm can be optimized to avoid having to revisit the CSS1
properties for each character.)
<P>
The per-property matching rules from (2) above are as follows:
<OL>
<LI>
<A HREF="#font-style">'font-style'</A> is tried first. 'italic' will be satisfied
if there is either a face in the UA's font database labeled with the CSS
keyword 'italic' (preferred) or 'oblique'. Otherwise the values must be matched
exactly or font-style will fail.
<LI>
<A HREF="#font-variant">'font-variant'</A> is tried next. 'normal' matches
a font not labeled as 'small-caps'; 'small-caps' matches (1) a font labeled
as 'small-caps', (2) a font in which the small caps are synthesized, or (3)
a font where all lowercase letters are replaced by upper case letters. A
small-caps font may be synthesized by electronically scaling uppercase letters
from a normal font.
<LI>
<A HREF="#font-weight">'font-weight'</A> is matched next, it will never fail.
(See 'font-weight' below.)
<LI>
<A HREF="#font-size">'font-size'</A> must be matched within a UA-dependent
margin of tolerance. (Typically, sizes for scalable fonts are rounded to
the nearest whole pixel, while the tolerance for bitmapped fonts could be
as large as 20%.) Further computations, e.g. by 'em' values in other properties,
are based on the 'font-size' value that is used, not the one that is specified.
</OL>
<H4>
<A NAME="font-family">5.2.2 &nbsp;&nbsp; 'font-family'</A>
</H4>
<P>
<EM>Value:</EM> [[&lt;family-name&gt; | &lt;generic-family&gt;],]*
[&lt;family-name&gt; | &lt;generic-family&gt;]<BR>
<EM>Initial:</EM> UA specific<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
The value is a prioritized list of font family names and/or generic family
names. Unlike most other CSS1 properties, values are separated by a comma
to indicate that they are alternatives:
<PRE>
BODY { font-family: gill, helvetica, sans-serif }
</PRE>
<P>
There are two types of list values:
<DL>
<DT>
<STRONG>&lt;family-name&gt;</STRONG>
<DD>
The name of a font family of choice. In the last example, "gill" and "helvetica"
are font families.
<DT>
<STRONG>&lt;generic-family&gt;</STRONG>
<DD>
In the example above, the last value is a generic family name. The following
generic families are defined:
<UL>
<LI>
'serif' (e.g. Times)
<LI>
'sans-serif' (e.g. Helvetica)
<LI>
'cursive' (e.g. Zapf-Chancery)
<LI>
'fantasy' (e.g. Western)
<LI>
'monospace' (e.g. Courier)
</UL>
<P>
Style sheet designers are encouraged to offer a generic font family as a
last alternative.
</DL>
<P>
Font names containing whitespace should be quoted:
<PRE>
BODY { font-family: "new century schoolbook", serif }
&lt;BODY STYLE="font-family: 'My own font', fantasy"&gt;
</PRE>
<P>
If quoting is omitted, any whitespace characters before and after the font
name are ignored and any sequence of whitespace characters inside the font
name is converted to a single space.
<H4>
<A NAME="font-style">5.2.3 &nbsp;&nbsp; 'font-style'</A>
</H4>
<P>
<EM>Value:</EM> normal | italic | oblique<BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
The 'font-style' property selects between normal (sometimes referred to as
"roman" or "upright"), italic and oblique faces within a font family.
<P>
A value of 'normal' selects a font that is classified as 'normal' in the
UA's font database, while 'oblique' selects a font that is labeled 'oblique'.
A value of 'italic' selects a font that is labeled 'italic', or, if that
is not available, one labeled 'oblique'.
<P>
The font that is labeled 'oblique' in the UA's font database may actually
have been generated by electronically slanting a normal font.
<P>
Fonts with Oblique, Slanted or Incline in their names will typically be labeled
'oblique' in the UA's font database. Fonts with <EM>Italic, Cursive</EM>
or <EM>Kursiv</EM> in their names will typically be labeled 'italic'.
<PRE>
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
</PRE>
<P>
In the example above, emphasized text within 'H1' will appear in a normal
face.
<H4>
<A NAME="font-variant">5.2.4 &nbsp;&nbsp; 'font-variant'</A>
</H4>
<P>
<EM>Value:</EM> normal | small-caps<BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
Another type of variation within a font family is the small-caps. In a small-caps
font the lower case letters look similar to the uppercase ones, but in a
smaller size and with slightly different proportions. The 'font-variant'
property selects that font.
<P>
A value of 'normal' selects a font that is not a small-caps font, 'small-caps'
selects a small-caps font. It is acceptable (but not required) in CSS1 if
the small-caps font is a created by taking a normal font and replacing the
lower case letters by scaled uppercase characters. As a last resort, uppercase
letters will be used as replacement for a small-caps font.
<P>
The following example results in an 'H3' element in small-caps, with emphasized
words in oblique small-caps:
<PRE>
H3 { font-variant: small-caps }
EM { font-style: oblique }
</PRE>
<P>
There may be other variants in the font family as well, such as fonts with
old-style numerals, small-caps numerals, condensed or expanded letters, etc.
CSS1 has no properties that select those.
<P>
<EM>CSS1 core:</EM> insofar as this property causes text to be transformed
to uppercase, the same considerations as for
<A href="#text-transform">'text-transform'</A> apply.
<H4>
<A NAME="font-weight">5.2.5 &nbsp;&nbsp; 'font-weight'</A>
</H4>
<P>
<EM>Value:</EM> normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900<BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
The 'font-weight' property selects the weight of the font. The values '100'
to '900' form an ordered sequence, where each number indicates a weight that
is at least as dark as its predecessor. The keyword 'normal' is synonymous
with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal'
and 'bold' have been shown to be often confused with font names and a numerical
scale was therefore chosen for the 9-value list.
<PRE>
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
</PRE>
<P>
The 'bolder' and 'lighter' values select font weights that are relative to
the weight inherited from the parent:
<PRE>
STRONG { font-weight: bolder }
</PRE>
<P>
Child elements inherit the resultant weight, not the keyword value.
<P>
Fonts (the font data) typically have one or more properties whose values
are names that are descriptive of the "weight" of a font. There is no accepted,
universal meaning to these weight names. Their primary role is to distinguish
faces of differing darkness within a single font family. Usage across font
families is quite variant; for example a font that you might think of as
being bold might be described as being <EM>Regular, Roman, Book, Medium,
Semi-</EM> or <EM>DemiBold, Bold,</EM> or <EM>Black,</EM> depending on how
black the "normal" face of the font is within the design. Because there is
no standard usage of names, the weight property values in CSS1 are given
on a numerical scale in which the value '400' (or 'normal') corresponds to
the "normal" text face for that family. The weight name associated with that
face will typically be <EM>Book, Regular, Roman, Normal</EM> or sometimes
<EM>Medium</EM>.
<P>
The association of other weights within a family to the numerical weight
values is intended only to preserve the ordering of darkness within that
family. However, the following heuristics tell how the assignment is done
in typical cases:
<UL>
<LI>
If the font family already uses a numerical scale with nine values (like
e.g. <EM>OpenType</EM> does), the font weights should be mapped directly.
<LI>
If there is both a face labeled <EM>Medium</EM> and one labeled <EM>Book,
Regular, Roman</EM> or <EM>Normal,</EM> then the <EM>Medium</EM> is normally
assigned to the '500'.
<LI>
The font labeled "Bold" will often correspond to the weight value '700'.
<LI>
If there are fewer then 9 weights in the family, the default algorithm for
filling the "holes" is as follows. If '500' is unassigned, it will be assigned
the same font as '400'. If any of the values '600', '700', '800' or '900'
remains unassigned, they are assigned to the same face as the next darker
assigned keyword, if any, or the next lighter one otherwise. If any of '300',
'200' or '100' remains unassigned, it is assigned to the next lighter assigned
keyword, if any, or the next darker otherwise.
</UL>
<P>
The following two examples illustrate the process. Assume four weights in
the "Example1" family, from lightest to darkest: <EM>Regular, Medium, Bold,
Heavy.</EM> And assume six weights in the "Example2" family: <EM>Book, Medium,
Bold, Heavy, Black, ExtraBlack.</EM> Note how in the second example it has
been decided <EM>not</EM> to assign "Example2 ExtraBlack" to anything.
<PRE>
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
</PRE>
<PRE>
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
</PRE>
<P>
Since the intent of the relative keywords 'bolder' and 'lighter' is to darken
or lighten the face <EM>within the family</EM> and because a family may not
have faces aligned with all the symbolic weight values, the matching of 'bolder'
is to the next darker face available on the client within the family and
the matching of 'lighter' is to the next lighter face within the family.
To be precise, the meaning of the relative keywords 'bolder' and 'lighter'
is as follows:
<UL>
<LI>
'bolder' selects the next weight that is assigned to a font that is darker
than the inherited one. If there is no such weight, it simply results in
the next darker numerical value (and the font remains unchanged), unless
the inherited value was '900' in which case the resulting weight is also
'900'.
<LI>
'lighter' is similar, but works in the opposite direction: it selects the
next lighter keyword with a different font from the inherited one, unless
there is no such font, in which case it selects the next lighter numerical
value (and keeps the font unchanged).
</UL>
<P>
There is no guarantee that there will be a darker face for each of the
'font-weight' values; for example, some fonts may have only a normal and
a bold face, others may have eight different face weights. There is no guarantee
on how a UA will map font faces within a family to weight values. The only
guarantee is that a face of a given value will be no less dark than the faces
of lighter values.
<H4>
<A NAME="font-size">5.2.6 &nbsp;&nbsp; 'font-size'</A>
</H4>
<P>
<EM>Value:</EM> &lt;absolute-size&gt; | &lt;relative-size&gt; |
&lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> medium<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> relative to parent element's font size<BR>
<DL>
<DT>
<B>&lt;absolute-size&gt;</B>
<DD>
An &lt;absolute-size&gt; keyword is an index to a table of font sizes computed
and kept by the UA. Possible values are: [ xx-small | x-small | small | medium
| large | x-large | xx-large ]. On a computer screen a scaling factor of
1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt,
the 'large' font could be 15pt. Different media may need different scaling
factors. Also, the UA should take the quality and availability of fonts into
account when computing the table. The table may be different from one font
family to another.
<DT>
<B>&lt;relative-size&gt;</B>
<DD>
A &lt;relative-size&gt; keyword is interpreted relative to the table of font
sizes and the font size of the parent element. Possible values are: [ larger
| smaller ]. For example, if the parent element has a font size of 'medium',
a value of 'larger' will make the font size of the current element be 'large'.
If the parent element's size is not close to a table entry, the UA is free
to interpolate between table entries or round off to the closest one. The
UA may have to extrapolate table values if the numerical value goes beyond
the keywords.
</DL>
<P>
Length and percentage values should not take the font size table into account
when calculating the font size of the element.
<P>
Negative values are not allowed.
<P>
On all other properties, 'em' and 'ex' length values refer to the font size
of the current element. On the 'font-size' property, these length units refer
to the font size of the parent element.
<P>
Note that an application may reinterpret an explicit size, depending on the
context. E.g., inside a VR scene a font may get a different size because
of perspective distortion.
<P>
Examples:
<PRE>
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
</PRE>
<P>
If the suggested scaling factor of 1.5 is used, the last three declarations
are identical.
<H4>
<A NAME="font">5.2.7 &nbsp;&nbsp; 'font'</A>
</H4>
<P>
<EM>Value:</EM> [ &lt;font-style&gt; || &lt;font-variant&gt; ||
&lt;font-weight&gt; ]? &lt;font-size&gt; [ / &lt;line-height&gt; ]?
&lt;font-family&gt;<BR>
<EM>Initial:</EM> not defined for shorthand properties<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> allowed on &lt;font-size&gt; and
&lt;line-height&gt;<BR>
<P>
The 'font' property is a shorthand property for setting
<A HREF="#font-style">'font-style'</A>
<A HREF="#font-variant">'font-variant'</A>
<A HREF="#font-weight">'font-weight'</A>
<A HREF="#font-size">'font-size'</A>,
<A HREF="#line-height">'line-height'</A> and
<A HREF="#font-family">'font-family'</A> at the same place in the style sheet.
The syntax of this property is based on a traditional typographical shorthand
notation to set multiple properties related to fonts.
<P>
For a definition of allowed and initial values, see the previously defined
properties. Properties for which no values are given are set to their initial
value.
<PRE>
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
</PRE>
<P>
In the second rule, the font size percentage value ('80%') refers to the
font size of the parent element. In the third rule, the line height percentage
refers to the font size of the element itself.
<P>
In the first three rules above, the 'font-style', 'font-variant' and
'font-weight' are not explicitly mentioned, which means they are all three
set to their initial value ('normal'). The fourth rule sets the 'font-weight'
to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant'
to 'normal'.
<P>
The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120%
of the parent's font), the 'line-height' (120% times the font size) and the
'font-family' ('fantasy'). It follows that the keyword 'normal' applies to
the two remaining properties: 'font-style' and 'font-weight'.
<H3>
<A NAME="color-and-background-properties">5.3 &nbsp;&nbsp; Color and background
properties</A>
</H3>
<P>
These properties describe the color (often called <EM>foreground color</EM>)
and background of an element (i.e. the surface onto which the content is
rendered). One can set a background color and/or a background image. The
position of the image, if/how it is repeated, and whether it is fixed or
scrolled relative to the canvas can also be set.
<P>
The 'color' property inherits normally. The background properties do not
inherit, but the parent element's background will shine through by default
because of the initial 'transparent' value on 'background-color'.
<H4>
<A NAME="color">5.3.1 &nbsp;&nbsp; 'color'</A>
</H4>
<P>
<EM>Value:</EM> &lt;color&gt;<BR>
<EM>Initial:</EM> UA specific<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property describes the text color of an element (often referred to as
the <EM>foreground</EM> color). There are different ways to specify red:
<PRE>
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
</PRE>
<P>
See <A HREF="#color-units">section 6.3</A> for a description of possible
color values.
<H4>
<A NAME="background-color">5.3.2 &nbsp;&nbsp; 'background-color'</A>
</H4>
<P>
<EM>Value:</EM> &lt;color&gt; | transparent<BR>
<EM>Initial:</EM> transparent<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the background color of an element.
<PRE>
H1 { background-color: #F00 }
</PRE>
<H4>
<A NAME="background-image">5.3.3 &nbsp;&nbsp; 'background-image'</A>
</H4>
<P>
<EM>Value:</EM> &lt;url&gt; | none<BR>
<EM>Initial:</EM> none<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the background image of an element. When setting a background
image, one should also set a background color that will be used when the
image is unavailable. When the image is available, it is overlaid on top
of the background color.
<PRE>
BODY { background-image: url(marble.gif) }
P { background-image: none }
</PRE>
<H4>
<A NAME="background-repeat">5.3.4 &nbsp;&nbsp; 'background-repeat'</A>
</H4>
<P>
<EM>Value:</EM> repeat | repeat-x | repeat-y | no-repeat<BR>
<EM>Initial:</EM> repeat<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
If a background image is specified, the value of 'background-repeat' determines
how/if the image is repeated.
<P>
A value of 'repeat' means that the image is repeated both horizontally and
vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally
(vertically), to create a single band of images from one side to the other.
With a value of 'no-repeat', the image is not repeated.
<PRE>
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
</PRE>
<P>
In the example above, the image will only be repeated vertically.
<H4>
<A NAME="background-attachment">5.3.5 &nbsp;&nbsp; 'background-attachment'</A>
</H4>
<P>
<EM>Value:</EM> scroll | fixed<BR>
<EM>Initial:</EM> scroll<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
If a background image is specified, the value of 'background-attachment'
determines if it is fixed with regard to the canvas or if it scrolls along
with the content.
<PRE>
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
</PRE>
<P>
<EM>CSS1 core:</EM> UAs may treat 'fixed' as 'scroll'. However, it is recommended
they interpret 'fixed' correctly, at least on the HTML and BODY elements,
since there is no way for an author to provide an image only for those browsers
that support 'fixed'. (See <A href="#css1-conformance">section 7</A>.)
<H4>
<A NAME="background-position">5.3.6 &nbsp;&nbsp; 'background-position'</A>
</H4>
<P>
<EM>Value:</EM> [&lt;percentage&gt; | &lt;length&gt;]{1,2} | [top | center
| bottom] || [left | center | right]<BR>
<EM>Initial:</EM> 0% 0%<BR>
<EM>Applies to:</EM> block-level and replaced elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to the size of the element itself<BR>
<P>
If a background image has been specified, the value of 'background-position'
specifies its initial position.
<P>
With a value pair of '0% 0%', the upper left corner of the image is placed
in the upper left corner of the box that surrounds the content of the element
(i.e., not the box that surrounds the padding, border or margin). A value
pair of '100% 100%' places the lower right corner of the image in the lower
right corner of the element. With a value pair of '14% 84%', the point 14%
across and 84% down the image is to be placed at the point 14% across and
84% down the element.
<P>
With a value pair of '2cm 2cm', the upper left corner of the image is placed
2cm to the right and 2cm below the upper left corner of the element.
<P>
If only one percentage or length value is given, it sets the horizontal position
only, the vertical position will be 50%. If two values are given, the horizontal
position comes first. Combinations of length and percentage values are allowed,
e.g. '50% 2cm'. Negative positions are allowed.
<P>
One can also use keyword values to indicate the position of the background
image. Keywords cannot be combined with percentage values, or length values.
The possible combinations of keywords and their interpretations are as follows:
<UL>
<LI>
'top left' and 'left top' both mean the same as '0% 0%'.
<LI>
'top', 'top center' and 'center top' mean the same as '50% 0%'.
<LI>
'right top' and 'top right' mean the same as '100% 0%'.
<LI>
'left', 'left center' and 'center left' mean the same as '0% 50%'.
<LI>
'center' and 'center center' mean the same as '50% 50%'.
<LI>
'right', 'right center' and 'center right' mean the same as '100% 50%'.
<LI>
'bottom left' and 'left bottom' mean the same as '0% 100%'.
<LI>
'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
<LI>
'bottom right' and 'right bottom' mean the same as '100% 100%'.
</UL>
<P>
examples:
<PRE>
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
</PRE>
<P>
If the background image is fixed with regard to the canvas (see the
'background-attachment' property above), the image is placed relative to
the canvas instead of the element. E.g.:
<PRE>
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
</PRE>
<P>
In the example above, the image is placed in the lower right corner of the
canvas.
<H4>
<A NAME="background">5.3.7 &nbsp;&nbsp; 'background'</A>
</H4>
<P>
<EM>Value:</EM> &lt;background-color&gt; || &lt;background-image&gt; ||
&lt;background-repeat&gt; || &lt;background-attachment&gt; ||
&lt;background-position&gt;<BR>
<EM>Initial:</EM> not defined for shorthand properties<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> allowed on &lt;background-position&gt;<BR>
<P>
The 'background' property is a shorthand property for setting the individual
background properties (i.e., 'background-color', 'background-image',
'background-repeat', 'background-attachment' and 'background-position') at
the same place in the style sheet.
<P>
Possible values on the 'background' properties are the set of all possible
values on the individual properties.
<PRE>
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
</PRE>
<P>
The 'background' property always sets all the individual background properties.
In the first rule of the above example, only a value for 'background-color'
has been given and the other individual properties are set to their initial
value. In the second rule, all individual properties have been specified.
<H3>
<A NAME="text-properties">5.4 &nbsp;&nbsp; Text properties</A>
</H3>
<H4>
<A NAME="word-spacing">5.4.1 &nbsp;&nbsp; 'word-spacing'</A>
</H4>
<P>
<EM>Value:</EM> normal | &lt;length&gt; <BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
The length unit indicates an addition to the default space between words.
Values can be negative, but there may be implementation-specific limits.
The UA is free to select the exact spacing algorithm. The word spacing may
also be influenced by justification (which is a value of the 'align' property).
<PRE>
H1 { word-spacing: 0.4em }
</PRE>
<P>
Here, the word-spacing between each word in 'H1' elements would be increased
by '1em'.
<P>
<EM>CSS1 core:</EM> UAs may interpret any value of 'word-spacing' as 'normal'.
(See <A href="#css1-conformance">section 7</A>.)
<H4>
<A NAME="letter-spacing">5.4.2 &nbsp;&nbsp; 'letter-spacing'</A>
</H4>
<P>
<EM>Value:</EM> normal | &lt;length&gt; <BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
The length unit indicates an addition to the default space between characters.
Values can be negative, but there may be implementation-specific limits.
The UA is free to select the exact spacing algorithm. The letter spacing
may also be influenced by justification (which is a value of the 'align'
property).
<PRE>
BLOCKQUOTE { letter-spacing: 0.1em }
</PRE>
<P>
Here, the letter-spacing between each character in 'BLOCKQUOTE' elements
would be increased by '0.1em'.
<P>
With a value of 'normal', the UAs may change the space between letters to
justify text. This will not happen if 'letter-spacing' is explicitly set
to a &lt;length&gt; value:
<PRE>
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
</PRE>
<P>
When the resultant space between two letters is not the same as the default
space, UAs should not use ligatures.
<P>
<EM>CSS1 core:</EM> UAs may interpret any value of 'letter-spacing' as 'normal'.
(See <A href="#css1-conformance">section 7</A>.)
<H4>
<A NAME="text-decoration">5.4.3 &nbsp;&nbsp; 'text-decoration'</A>
</H4>
<P>
<EM>Value:</EM> none | [ underline || overline || line-through || blink ]<BR>
<EM>Initial:</EM> none<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no, but see clarification below<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property describes decorations that are added to the text of an element.
If the element has no text (e.g. the 'IMG' element in HTML) or is an empty
element (e.g. '&lt;EM&gt;&lt;/EM&gt;'), this property has no effect. A value
of 'blink' causes the text to blink.
<P>
The color(s) required for the text decoration should be derived from the
'color' property value.
<P>
This property is not inherited, but elements should match their parent. E.g.,
if an element is underlined, the line should span the child elements. The
color of the underlining will remain the same even if descendant elements
have different 'color' values.
<PRE>
A:link, A:visited, A:active { text-decoration: underline }
</PRE>
<P>
The example above would underline the text of all links (i.e., all 'A' elements
with a 'HREF' attribute).
<P>
UAs must recognize the keyword 'blink', but are not required to support the
blink effect.
<H4>
<A NAME="vertical-align">5.4.4 &nbsp;&nbsp; 'vertical-align'</A>
</H4>
<P>
<EM>Value:</EM> baseline | sub | super | top | text-top | middle | bottom
| text-bottom | &lt;percentage&gt; <BR>
<EM>Initial:</EM> baseline<BR>
<EM>Applies to:</EM> inline elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to the 'line-height' of the element
itself<BR>
<P>
The property affects the vertical positioning of the element. One set of
keywords is relative to the parent element:
<DL>
<DT>
'baseline'
<DD>
align the baseline of the element (or the bottom, if the element doesn't
have a baseline) with the baseline of the parent
<DT>
'middle'
<DD>
align the vertical midpoint of the element (typically an image) with the
baseline plus half the x-height of the parent
<DT>
'sub'
<DD>
subscript the element
<DT>
'super'
<DD>
superscript the element
<DT>
'text-top'
<DD>
align the top of the element with the top of the parent element's font
<DT>
'text-bottom'
<DD>
align the bottom of the element with the bottom of the parent element's font
</DL>
<P>
Another set of properties are relative to the formatted line that the element
is a part of:
<DL>
<DT>
'top'
<DD>
align the top of the element with the tallest element on the line
<DT>
'bottom'
<DD>
align the bottom of the element with the lowest element on the line
</DL>
<P>
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where
element dependencies form a loop.
<P>
Percentage values refer to the value of the 'line-height' property of the
element itself. They raise the baseline of the element (or the bottom, if
it has no baseline) the specified amount above the baseline of the parent.
Negative values are possible. E.g., a value of '-100%' will lower the element
so that the baseline of the element ends up where the baseline of the next
line should have been. This allows precise control over the vertical position
of elements (such as images that are used in place of letters) that don't
have a baseline.
<P>
It is expected that a future version of CSS will allow &lt;length&amp;t;
as a value on this property.
<H4>
<A NAME="text-transform">5.4.5 &nbsp;&nbsp; 'text-transform'</A>
</H4>
<P>
<EM>Value:</EM> capitalize | uppercase | lowercase | none<BR>
<EM>Initial:</EM> none<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<DL>
<DT>
'capitalize'
<DD>
uppercases the first character of each word
<DT>
'uppercase'
<DD>
uppercases all letters of the element
<DT>
'lowercase'
<DD>
lowercases all letters of the element
<DT>
'none'
<DD>
neutralizes inherited value.
</DL>
<P>
The actual transformation in each case is human language dependent. See
<A href="#ref4">[4]</A> for ways to find the language of an element.
<PRE>
H1 { text-transform: uppercase }
</PRE>
<P>
The example above would put 'H1' elements in uppercase text.
<P>
<EM>CSS1 core:</EM> UAs may ignore 'text-transform' (i.e., treat it as 'none')
for characters that are not from the Latin-1 repertoire and for elements
in languages for which the transformation is different from that specified
by the case-conversion tables of Unicode [8].
<H4>
<A NAME="text-align">5.4.6 &nbsp;&nbsp; 'text-align'</A>
</H4>
<P>
<EM>Value:</EM> left | right | center | justify<BR>
<EM>Initial:</EM> UA specific<BR>
<EM>Applies to:</EM> block-level elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property describes how text is aligned within the element. The actual
justification algorithm used is UA and human language dependent.
<P>
Example:
<PRE>
DIV.center { text-align: center }
</PRE>
<P>
Since 'text-align' inherits, all block-level elements inside the 'DIV' element
with 'CLASS=center' will be centered. Note that alignments are relative to
the width of the element, not the canvas. If 'justify' is not supported,
the UA will supply a replacement. Typically, this will be 'left' for western
languages.
<P>
<EM>CSS1 core:</EM> UAs may treat 'justify' as 'left' or 'right', depending
on whether the element's default writing direction is left-to-right or
right-to-left, respectively.
<H4>
<A NAME="text-indent">5.4.7 &nbsp;&nbsp; 'text-indent'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> block-level elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
The property specifies the indentation that appears before the first formatted
line. The value of 'text-indent' may be negative, but there may be
implementation-specific limits. An indentation is not inserted in the middle
of an element that was broken by another (such as 'BR' in HTML).
<P>
Example:
<PRE>
P { text-indent: 3em }
</PRE>
<H4>
<A NAME="line-height">5.4.8 &nbsp;&nbsp; 'line-height'</A>
</H4>
<P>
<EM>Value:</EM> normal | &lt;number&gt; | &lt;length&gt; |
&lt;percentage&gt;<BR>
<EM>Initial:</EM> normal<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> yes<BR>
<EM>Percentage values:</EM> relative to the font size of the element itself<BR>
<P>
The property sets the distance between two adjacent lines' baselines.
<P>
When a numerical value is specified, the line height is given by the font
size of the current element multiplied with the numerical value. This differs
from a percentage value in the way it inherits: when a numerical value is
specified, child elements will inherit the factor itself, not the resultant
value (as is the case with <A HREF="#percentage-units">percentage</A> and
other units).
<P>
Negative values are not allowed.
<P>
The three rules in the example below have the same resultant line height:
<PRE>
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
</PRE>
<P>
A value of 'normal' sets the 'line-height' to a reasonable value for the
element's font. It is suggested that UAs set the 'normal' value to be a number
in the range of 1.0 to 1.2.
<P>
See the <A HREF="#the-height-of-lines">section 4.7</A> for a description
on how 'line-height' influences the formatting of a block-level element.
<H3>
<A NAME="box-properties">5.5 &nbsp;&nbsp; Box properties</A>
</H3>
<P>
The box properties set the size, circumference and position of the boxes
that represent elements. See the <A HREF="#formatting-model">formatting model
(section 4)</A> for examples on how to use the box properties.
<P>
The margin properties 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.
<P>
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.
<P>
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.
<P>
The 'width' and 'height' properties set the size of the box, and the 'float'
and 'clear' properties can alter the position of elements.
<H4>
<A NAME="margin-top">5.5.1 &nbsp;&nbsp; 'margin-top'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt; | auto<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the top margin of an element:
<PRE>
H1 { margin-top: 2em }
</PRE>
<P>
A negative value is allowed, but there may be implementation-specific limits.
<H4>
<A NAME="margin-right">5.5.2 &nbsp;&nbsp; 'margin-right'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt; | auto<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the right margin of an element:
<PRE>
H1 { margin-right: 12.3% }
</PRE>
<P>
A negative value is allowed, but there may be implementation-specific limits.
<H4>
<A NAME="margin-bottom">5.5.3 &nbsp;&nbsp; 'margin-bottom'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt; | auto<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the bottom margin of an element:
<PRE>
H1 { margin-bottom: 3px }
</PRE>
<P>
A negative value is allowed, but there may be implementation-specific limits.
<H4>
<A NAME="margin-left">5.5.4 &nbsp;&nbsp; 'margin-left'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt; | auto<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the left margin of an element:
<PRE>
H1 { margin-left: 2em }
</PRE>
<P>
A negative value is allowed, but there may be implementation-specific limits.
<H4>
<A NAME="margin">5.5.5 &nbsp;&nbsp; 'margin'</A>
</H4>
<P>
<EM>Value:</EM> [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,4} <BR>
<EM>Initial:</EM> not defined for shorthand properties<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
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.
<P>
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.
<PRE>
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top &amp; bottom = 1em, right &amp; left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
</PRE>
<P>
The last rule of the example above is equivalent to the example below:
<PRE>
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
</PRE>
<P>
Negative margin values are allowed, but there may be implementation-specific
limits.
<H4>
<A NAME="padding-top">5.5.6 &nbsp;&nbsp; 'padding-top'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the top padding of an element.
<PRE>
BLOCKQUOTE { padding-top: 0.3em }
</PRE>
<P>
Padding values cannot be negative.
<H4>
<A NAME="padding-right">5.5.7 &nbsp;&nbsp; 'padding-right'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the right padding of an element.
<PRE>
BLOCKQUOTE { padding-right: 10px }
</PRE>
<P>
Padding values cannot be negative.
<H4>
<A NAME="padding-bottom">5.5.8 &nbsp;&nbsp; 'padding-bottom'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the bottom padding of an element.
<PRE>
BLOCKQUOTE { padding-bottom: 2em }
</PRE>
<P>
Padding values cannot be negative.
<H4>
<A NAME="padding-left">5.5.9 &nbsp;&nbsp; 'padding-left'</A>
</H4>
<P>
<EM>Value:</EM> &lt;length&gt; | &lt;percentage&gt;<BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
This property sets the left padding of an element.
<PRE>
BLOCKQUOTE { padding-left: 20% }
</PRE>
<P>
Padding values cannot be negative.
<H4>
<A NAME="padding">5.5.10 &nbsp;&nbsp; 'padding'</A>
</H4>
<P>
<EM>Value:</EM> [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} <BR>
<EM>Initial:</EM> 0<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> refer to parent element's width<BR>
<P>
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.
<P>
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.
<P>
The surface of the padding area is set with the 'background' property:
<PRE>
H1 {
background: white;
padding: 1em 2em;
}
</PRE>
<P>
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.
<P>
Padding values cannot be negative.
<H4>
<A NAME="border-top-width">5.5.11 &nbsp;&nbsp; 'border-top-width'</A>
</H4>
<P>
<EM>Value:</EM> thin | medium | thick | &lt;length&gt;<BR>
<EM>Initial:</EM> 'medium'<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the width of an element's top border. The width of the
keyword values are UA dependent, but the following holds: 'thin' &lt;= 'medium'
&lt;= 'thick'.
<P>
The keyword widths are constant throughout a document:
<PRE>
H1 { border: solid thick red }
P { border: solid thick blue }
</PRE>
<P>
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:
<PRE>
H1 { border: solid 0.5em }
</PRE>
<P>
Border widths cannot be negative.
<H4>
<A NAME="border-right-width">5.5.12 &nbsp;&nbsp; 'border-right-width'</A>
</H4>
<P>
<EM>Value:</EM> thin | medium | thick | &lt;length&gt;<BR>
<EM>Initial:</EM> 'medium'<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the width of an element's right border. Otherwise it is
equivalent to the <A HREF="#border-top-width">'border-top-width'</A>.
<H4>
<A NAME="border-bottom-width">5.5.13 &nbsp;&nbsp; 'border-bottom-width'</A>
</H4>
<P>
<EM>Value:</EM> thin | medium | thick | &lt;length&gt;<BR>
<EM>Initial:</EM> 'medium'<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the width of an element's bottom border. Otherwise it
is equivalent to the <A HREF="#border-top-width">'border-top-width'</A>.
<H4>
<A NAME="border-left-width">5.5.14 &nbsp;&nbsp; 'border-left-width'</A>
</H4>
<P>
<EM>Value:</EM> thin | medium | thick | &lt;length&gt;<BR>
<EM>Initial:</EM> 'medium'<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property sets the width of an element's left border. Otherwise it is
equivalent to the <A HREF="#border-top-width">'border-top-width'</A>.
<H4>
<A NAME="border-width">5.5.15 &nbsp;&nbsp; 'border-width'</A>
</H4>
<P>
<EM>Value:</EM> [thin | medium | thick | &lt;length&gt;]{1,4}<BR>
<EM>Initial:</EM> not defined for shorthand properties<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
This property is a shorthand property for setting 'border-width-top',
'border-width-right', 'border-width-bottom' and 'border-width-left' at the
same place in the style sheet.
<P>
There can be from one to four values, with the following interpretation:
<UL>
<LI>
one value: all four border widths are set to that value
<LI>
two values: top and bottom border widths are set to the first value, right
and left are set to the second
<LI>
three values: top is set to the first, right and left are set to the second,
bottom is set to the third
<LI>
four values: top, right, bottom and left, respectively
</UL>
<P>
In the examples below, the comments indicate the resulting widths of the
top, right, bottom and left borders:
<PRE>
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 thin */
H1 { border-width: thin thick medium none } /* thin thick medium none */
</PRE>
<P>
Border widths cannot be negative.
<H4>
<A NAME="border-color">5.5.16 &nbsp;&nbsp; 'border-color'</A>
</H4>
<P>
<EM>Value:</EM> &lt;color&gt;{1,4}<BR>
<EM>Initial:</EM> the value of the 'color' property<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
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.
<P>
If no color value is specified, the value of the 'color' property of the
element itself will take its place:
<PRE>
P {
color: black;
background: white;
border: solid;
}
</PRE>
<P>
In the above example, the border will be a solid black line.
<H4>
<A NAME="border-style">5.5.17 &nbsp;&nbsp; 'border-style'</A>
</H4>
<P>
<EM>Value:</EM> none | dotted | dashed | solid | double | groove | ridge
| inset | outset<BR>
<EM>Initial:</EM> none<BR>
<EM>Applies to:</EM> all elements<BR>
<EM>Inherited:</EM> no<BR>
<EM>Percentage values:</EM> N/A<BR>
<P>
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.
<PRE>
#xy34 { border-style: solid dotted }
</PRE>
<P>
In the above example, the horizontal borders will be 'solid' and the vertical
borders will be 'dotted'.
<P>
Since the initial value of the border styles is 'none', no borders will be
visible unless the border style is set.
<P>
The border styles mean:
<DL>
<DT>
none