WD-css1-960220
WD-css1-960220This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C technical reports can be found at http://www.w3.org/pub/WWW/TR. Since working drafts are subject to frequent change, you are advised to reference the latter URL, rather than the URL for this working draft.
This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.
Comments to this draft can be sent to the www-style@w3.org mailing list, or directly to the authors. For background material, see the resource page on web style sheets [1]. We encourage browser vendors to start implementing CSS1.
Designing simple style sheets is easy. One only needs to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say:
H1 { color: blue }
The example 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 only tries to
influence 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 of the fundamental features of CSS is that style sheets
are combined) it will determine the final presentation of the document.
The selector is the link between the HTML document and the style, and all HTML tags are possible selectors. HTML tags are defined in the HTML specification [2], and the CSS1 specification defines a syntax for how to address them.
The 'color' property is one of around 40 properties that determine the presentation of an HTML document. The list of properties and their possible values is defined in this specification.
In order for the style sheets to influence the presentation, the user agent (UA, often a "web browser" or "web client") must be aware of their existence. Another W3C working draft, HTML3 and Style Sheets [4], describes how to link HTML with style sheets:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import "http://style.com/basic"
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
The example shows four ways to link style to 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 one loses the corresponding
advantages of traditional style sheets.
The 'LINK' element references alternative style sheets that the reader can select, while imported style sheets are automatically merged with the rest of the style sheet.
H1, H2, H3 { font-family: helvetica }
Similarly, declarations can be grouped:
H1 {
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-weight: bold;
font-style: normal
}
In addition, some properties have their own grouping syntax:
H1 { font: 12pt/14pt helvetica bold }
which is equivalent to the previous example.
<H1>The headline <EM>is</EM> important!</H1>If no color has been assigned to 'EM', the emphasized "is" will inherit the color of the parent element, i.e. it will also appear in blue. Other style properties are likewise inherited, e.g. 'font-family' and 'font-size'.
Inheritance starts at the oldest ancestor, i.e. the top-level element. In HTML, this is the 'HTML' element which is followed by the 'BODY' element. In order to set a "default" style property, one can use 'BODY' as selector:
BODY {
color: black;
background: "texture.gif" white;
}
This will work even if the author has omitted the 'BODY' tag (which is legal) since the parser will infer the missing tag. The example above sets the text color to be black and the background to be an image. The background will be white if the image is not available. (See the description of the 'background' property for more on this.)
Some style properties are not inherited from the parent to the child. Most often it is intuitive why this is not the case. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.
Often, the value of a property is a percentage that refers to another property:
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
Children elements of 'P' will inherit the computed value of 'line-height' (i.e. 12pt), not the percentage.
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.punk { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=punk>Way too green</H1>
</BODY>
</HTML>
The normal inheritance rules apply to classed elements; they inherit values from their ancestors in the document structure.
One can address all elements of the same class by omitting the tag name in the selector:
.punk { color: green } /* all elements with CLASS green */
Only one class can be specified per selector. 'P.punk.rap' is therefore
an invalid selector in CSS1.
#z098y { letter-spacing: 0.3em }
<P ID=z098y>Wide text</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:
H1 { color: blue }
EM { color: red }
When this style sheet is in effect, all emphasized sections,
within or outside 'H1' will turn red. Probably, one only wanted
'EM' elements within 'H1' to turn red and this can be specified with:
H1 EM { color: red }
The selector is now a search pattern on the stack of open elements,
and this type of selector is referred to as a "context-sensitive
selector". Context-sensitive selectors consist of several simple
selectors separated by white space (all selectors described up to now
have been simple selectors). Only elements that match the last simple
selector (in this case the 'EM' element) are addressed, and only so if
the search pattern matches. Context-sensitive selectors in CSS1 look
for ancestor relationships, but other relationships
(e.g. parent-child) may be introduced in later revisions. In the
example above, the search pattern matches if 'EM' is a descendant of
'H1', i.e. if 'EM' is inside an 'H1' element.
UL UL LI { font-size: small }
UL UL UL LI { font-size: x-small }
Here, the first selector matches 'LI' elements with at least two 'UL'
ancestors. The second selector matches a subset of the first,
i.e. 'LI' elements with at least three 'UL' ancestors. The conflict is
resolved by the second selector being more specific due to the longer
search pattern. See the cascading order
(section 3.2) for more on this.
Context-sensitive selectors can look for tags, classes or ids:
P.reddish .punk { color: red }
#x78y CODE { background: blue }
This first selector matches all elements with class 'punk' that have an ancestor of element 'P' with class 'reddish'. The second selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. Several context-sensitive selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Which is equivalent to:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Textual comments in CSS style sheets are similar to those in the C programming language:
EM { color: red } /* red, really red!! */
Comments cannot be nested.
Pseudo-classes and pseudo-elements 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, but UAs may choose to implement them differently.
Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: orange } /* active links */
All 'A' elements with an 'HREF' attribute will be put into 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.
The formatting of an anchor pseudo-class is exactly as if the class was inserted manually:
A { color: blue }
A.link { color: red }
<A CLASS=link HREF="http://www.foo.com">foo</A>
I.e., both rules in the style sheet above will apply to the 'A'
element, but the latter will win due to its higher specificity. See
the cascading order (section 3.2) for
more on this.
Pseudo-classes can be used in context-sensitive selectors:
A:link IMG {
border-style: single;
border-color: blue;
}
P { color: black; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
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
black. The fictional tag sequence is: "<P>
<P:first-line> <P:first-letter>
... </P:first-letter> ... <P:/first-line> </P>".
Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-element', but are overridden if the same property is set on 'first-letter'.
The 'first-line' pseudo-element is used to apply special styles to the first line as formatted on the canvas:
<STYLE TYPE="text/css">
P:first-line { font-style: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
On an text-based UA, this could be formatted as:
THE FIRST LINE OF AN article in Newsweek.
(In the above example, the UA chose to replace small-caps text with capital letters since small-caps fonts were not available. Note that this specification does not describe how UAs should render documents when the necessary resources, e.g. colors and fonts, are not available.)
The fictional tag sequence in the above example is: "<P> <P:first-line> The first line of an </P:first-line> article in Newsweek.</P>". The 'first-line' end tag is inserted at the end of the first line as formatted on the canvas.
The 'first-line' pseudo-element is considered an inline element, and the corresponding properties apply. E.g., 'margin-left' does not apply, so one cannot set the text indent of a paragraph through the 'first-line' pseudo-element. Also, 'first-line' pseudo-elements can only be attached to block-level elements.
The 'first-letter' pseudo-element is used for "initial caps" and "drop caps" which are common typographic effects. Properties that apply to inline elements also apply to 'first-letter' and the formatting should be accordingly. There is one exception: if 'first-letter' has a negative 'vertical-align' value, the content of the pseudo-element should be "dropped" into the block:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt }
P:first-letter { font-size: 200%; vertical-align: -100% }
SPAN { text-transform: uppercase }
</STYLE
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
(The 'SPAN' element is being proposed as a new character-level element for HTML3)
If an text-based UA supports the 'first-letter' pseudo-element (we do not expect them to), the above could be formatted as:
___ | HE FIRST few words |of an article in the Economist..
The fictional tag sequence is: "<P> <SPAN> <P:first-letter> T </P:first-letter> he first </SPAN> few words of an article in the Economist. </P>". Note that the 'first-letter' pseudo-element is inserted next to the content. The other pseudo-elements are always inserted right after the element they are attached to.
The UA defines what characters are inside the 'first-letter' element, e.g. if preceding punctuation is to be included, or what characters are to be defined as letters.
The 'first-letter' pseudo-element is to be considered an inline element. It can only be attached to a block-level element.
In a context-sensitive selector, pseudo-elements are only allowed in the last simple selector:
BODY P:first-letter { color: purple }
Pseudo-elements can be combined with classes in selectors:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
The above example would make the first letter of all 'P' elements with 'CLASS=initial' red.
Consider this example:
BODY:first-letter { color: red }
P:first-letter { font-size: 200% }
<BODY><P>some text ...
There are several possible fictional tag sequences:
@import "http://www.style.org/punk"
@import "http://www.style.org/funk"
H1 { color: red } /* override imported sheets */
Sometimes conflicts will arise between the style sheets that influence the presentation. Conflict resolution is based on each style declaration having a weight. By default, the weights of the reader's declarations are less than the weights of declarations 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 declarations will be used.
Style sheet designers can increase the weights of their declarations:
H1 { color: red ! important }
P { font-size: 12pt ! legal "IATA regulations" }
The '! legal ...' construct is used if there are legal reasons behind
the declaration, and the trailing string is a short textual reference to the
corresponding statutes. 'Important' and 'legal' declarations have the
same weight.
An important (or legal) reader declaration will override an author declaration with normal weight. An important (or legal) author declaration will override an important (or legal) reader declaration.
The reference to the statutes should be displayed to the reader as a warning when the UA is not able to honor a legal declaration. The reader should acknowledge the warning with an action, e.g. a mouse click. Situations where the warning should be displayed include:
Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following rules should be followed in the order given:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.
This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, e.g. through a pull-down menu.
A 'STYLE' attribute on an element (see section 1.1 for an example) should be considered as if an ID attribute had been specified at the end of the style sheet.
The UA may choose to honor other stylistic attributes (e.g. 'ALIGN') as if a 'STYLE' attribute had been used. When in conflict with other stylistic attributes, the 'STYLE' attribute should win.
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
The background of the content and padding area is controlled with the
'background' property. The color and style
of the border is controlled with the 'border-color' and 'border-style' properties. If the border
needs a background, the 'background' property is used. Margins are
transparent, so the parent element will shine through.
The following example shows how margins and padding format a 'UL' element with two children. To simplify the diagram there are no borders.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D; /* let's pretend we have constants in CSS1 */
padding: E F G H; /* " */
}
LI {
color: white;
background: blue; /* so text is white on blue */
margin: a b c d; /* let's pretend we have constants in CSS1 */
padding: e f g h; /* " */
}
</STYLE>
..
<UL>
<LI>1st element of list
<LI>2nd element of list
</UL>
_______________________________________________________ | | | A UL margin (transparent) | | _______________________________________________ | | D | | B | | | E UL padding (red) | | | | _______________________________________ | | | | H | | F | | | | | a LI margin (transparent, | | | | | | so red shines through) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI padding (blue) | | | | | | | | | | | | | | | | h 1st element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- note the max | | | | | | | | | _______________________________ | | | | | | | | | | | | | | d | e LI padding (blue) | | | | | | | | | | | | | | | | h 2nd element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI margin (transparent, | | | | | | so red shines through) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Technically, padding and margin properties are not inherited. But, as the example shows, the placement of an element is relative to ancestors and siblings.
If 'border-width' had been set (the default value is '0'), the border would have appeared between the padding and the margins.
The width of the margins specify the minimum distance to the edges of surrounding boxes. In the example above, the margins between the two 'LI' elements are collapsed by taking the maximum of the two. Similarly, if the padding between the 'UL' and the first 'LI' element is zero (the "E" constant), the top elements' top margins should be collapsed. All adjacent vertical margins should be collapsed the same way.
Elements with a 'display' property value of 'list-item' are preceded by a label. The type of label is determined by the 'list-style' property. The label is not considered to be a part of the content, and will be placed outside the content. The rendering of the label should be based on the font and color properties of the element it belongs to.
Horizontally, boxes inherit the width of the parent element. Vertically, boxes by default are packed to attach to the box above (with margins overlapping). Note that the box above doesn't necessarily contain the preceding HTML element, and some interesting effects can be achieved if sequential boxes don't end up on top of each other. In this way, "sideheads" and simple multiple-column layouts can be supported:
_______________________________________________
| |
| (BODY margins, border & padding) |
| ______________ _____________________ |
| | | | | |
| | (H1 box) | | (P box) | |
| | | | | |
| | Headline... | | While.the.paragraph | |
| | comes.here. | | starts.here.and.... | |
| |______________| | continues.below.the | |
| | box.to.the.left.... | |
| ______________ |_____________________| |
| | | | | |
| | (H2 box) | | (P box) | |
| | | | | |
| | Don't.move. | | The.2nd.paragraph.. | |
| | this.one.up | | behaves.like.the... | |
| |______________| | first.one,.it.moves | |
| | up................. | |
| |_____________________| |
|_______________________________________________|
^ ^ ^ ^
0% 35% 50% 100%
The above could be realized through:
H1, H2 {
margin-left: 0%;
margin-right: 65% /* (100% minus 35%) */
pack: loose;
}
P {
margin-left: 50%;
margin-right: 0%
pack: tight;
}
For the headline elements, the 'pack' property is set to 'loose' to avoid having them move up next to preceding elements.
The percentage values are relative to the width of the parent element.
The first issue is harder to resolve and has caused the authors of this specification much pain. There are two ideas: either the unfilled area is filled with the default background resource of the window system, or the background is "stolen" from a structural element. Stylistic HTML "extensions" have taken the latter path: attributes on the 'BODY' element set the background of the whole canvas. To support designers' expectations, CSS1 introduces a special rule to find the canvas background:
If the 'background' value of the 'HTML' element is different from 'transparent' then use it, else use the 'background' value of the 'BODY' element. If the resulting value is 'transparent', the rendering is undefined.
This rule allows:
<HTML STYLE="background: 'http://style.com/marble.png' white"> <BODY STYLE="background: red">In the example above, the 'BODY' element will have a red background while the canvas will be covered with "marble". The exact layout of the background image is determined by the corresponding 'bg-style' and 'bg-position' properties.
Until other means of addressing the canvas become available, we recommend setting canvas properties on the 'BODY' element.
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.
The list of CSS1 properties has been kept to a minimum, while making sure commonly used styles can be expressed. Depending on the formatting model and the presentation medium, some properties can prove hard to incorporate into existing UA implementations. According to the conformance rules, UAs should make efforts to format documents according to the style sheets, but full support for all properties cannot be expected. E.g., an text-based browser is not able to fully honor accurate margins, but should approximate.
In the text below, the allowed values for each property are listed with a syntax like the following:
Value: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: <uri>? <color> [ / <color> ]? Value: <uri> || <color>
The words between < and > give a type of value. The possible types are length, percentage, uri, number, color, family-name and generic-family. Other words are keywords, that must appear literally. The slash (/) is also considered a keyword.
Several things juxtaposed mean that all of them must occur, in the given order. A bar (|) separates alternatives: one of them must occur. A double bar (A || B) means that either A or B or both must occur, in any order. Brackets ([]) are for grouping. Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar/ Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e ]]".
Every type, keyword, or bracketed group may be followed by one of the following modifiers:
A font is assumed to come with a certain encoding, i.e., a table that maps characters to glyphs. CSS1 assumes that a suitable table exists; it has no provisions for changing that table. A "character" in this respect is an abstract notion, it is not the number or bit-pattern that is found in the document, nor is it the glyph that appears on the screen. It is something in between. In many documents the byte with number 65 will represent the character "A", which will then, subject to the character-to-glyph mapping, be represented as some "A"-like shape. In non-western languages the relation between bytes and the characters they represent is much more complex. So, CSS deals with characters, and whether a particular implementation represents an "A" internally by the number 65 or something completely different is of no concern here. The character-to-glyph table for each font has one entry for each possible character in an HTML document. Each entry is either empty, meaning that the font doesn't have a glyph for that character, or it points to a glyph.
Many fonts will only have glyphs for a few hundred characters. For example, fonts for western languages usually have some 200 glyphs. The fact that most encoding tables will be quite sparse has important consequences:
<EM STYLE="font-family: Symbol">abcd</EM>
The example above has no effect whatsoever, since the four characters 'abcd' have no glyphs in the 'Symbol' font. Older browsers that work with 8-bit characters internally often fail to check the font encoding. Typically, the above fragment will show four Greek letters. Authors should not rely on this behavior.
If the value is a number, it is interpreted relative to the parent element's font size. A scaling factor of 1.5 is suggested for a value of 1, but this could vary depending on the presentation medium and the fonts available. E.g, if 'font-size' is set to '-1', the font size should be the parent element's font size multiplied with (1/1.5).
A keyword value is an index to an absolute table kept by the UA. A scaling factor of 1.5 is suggested between adjacent indexes, e.g. if the 'medium' font is 10pt, the 'large' font could be 15pt.
Units that normally refer to the font size of the current element ('em' and 'ex'), refer to the font size of the parent element if used on 'font-size' itself.
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 { font-size: 12pt; } /* absolute size: be careful! */
BLOCKQUOTE { font-size: -1 }
EM { font-size: +1 } /* the '+' is optional */
EM { font-size: 150% }
EM { font-size: 1.5em }
If the suggested scaling factor of 1.5 is used, the latter three
rules are identical.
The value is a prioritized list of font family names and/or generic family names. List items are separated by white space. If the font family name contains white space, it should be quoted with single or double quotes.
In level 1, the following generic families are defined:
Style sheet writers are encouraged to offer a generic font family at the end of the list:
BODY { font-family: univers helvetica sans-serif }
BODY { font-family: 'new century schoolbook' serif }
BODY { font-family: "Bill's own font" fantasy }
Ideally, the style sheet designer should specify only one font, and the
font manager should return the best alternative (perhaps by taking
visual similarity, visual quality and performance into account).
Unfortunately, current rendering environments do not offer this level
of service, and it is beyond the style sheet mechanism to do
so. Therefore, a prioritized list of alternative families can be
supplied. This practice poses one problem: the UA must be able to
determine if a font selection has been successful or not to know how
far it should proceed in the list. One example: if the style sheet
asks for 'univers' and the window system is smart enough to suggest
'helvetica' (which looks almost identical) as a replacement, is this a
success or failure? This specification leaves the answer undefined for
now.
If the value is a number, it is interpreted relative to the parent element's weight. A value of '1' suggests two jumps in the table corresponding to the keywords.
P { font-weight: medium }
B { font-weight: +1 } /* the '+' is optional */
In the example above, 'B' elements will be two table position
"bolder" than their parent. If they are children of an 'P' element,
the resulting value is 'bold'. Non-integer font weights are allowed.
If the desired font weight is not available, the UA selects an approximation strategy.
Legal combinations of the values are:
If the preferred font style cannot be accomplished, the UA should make best efforts to find acceptable substitutions. Often, an 'oblique' font can be substituted by an 'italic' font. If 'small-caps' are not available, capital letters of a smaller font size can be used to render small characters if the resolution of the output medium is appropriate for this.
H1, H2, H3 { font-style: small-caps italic }
H1 EM { font-style: italic }
In the example above, emphasized text within 'H1' will appear in normal
lower-case italic.
The property refers to the distance between two adjacent lines' baselines.
If there is more than one element on a formatted line, the maximum 'line-height' will apply. One should therefore be careful when setting 'line-height' on inline elements.
Negative values are not allowed.
P { line-height: 1.2em; font-size: 10pt }
P { line-height: 120%; font-size: 10pt }
The two rules in the above example are identical.
This is a traditional typographic shorthand notation to set 'font-size', 'line-height', 'font-family', 'font-style', and 'font-weight'. Setting the 'font' property is equivalent to including separate declarations at the same point in the style sheet. Properties left out of a 'font' specification are set to their initial value. To avoid ambiguity, only one font family value is allowed.
P { font: 12pt/14pt sans-serif bold }
P { font: 80% sans-serif }
P { font: 80%/110% "new century schoolbook" bold italic }
In the two latter rules, the font size percentage value ('80%')
refer to the font size of the parent element. In the last rule, the
line height percentage refers to the font size of the element itself
(which is 80% of the parent element's font size).
This property describes the text color of an element, i.e. the "foreground" color. There are different ways to specify red:
EM { color: red } /* natural language / CNS */
EM { color: #F00 } /* #RGB */
EM { color: #FF0000 } /* #RRGGBB */
EM { color: rgb 1.0 0.0 0.0 } /* float range: 0.0 - 1.0 */
See section 6.3 for a description of possible color values.
'background' describes the background of an element which can be one of the below:
BODY { background: red } /* one color */
H1 { background: blue / red } /* blend two colors */
BODY { background: "chess.png" black / white } /* img + color combo */
P { background: transparent }
This property does not inherit, but the parent element's background will shine through by default due to the initial transparent value.
If an image is found through the URI, it will be overlaid on top of any color specified. The color (or color combination) is used:
If two colors have been specified in the 'background' property, this property is used to blend them. The two colors are referred to as "bg1" and "bg2". 'bg-blend-direction' specifies the direction where "bg2" is the background color at the edge or corner of the element. "bg1" is the background color at the opposite edge or corner.
The values are shorthands for north, north-west, west etc where 'N' is the top of the canvas, 'NW' is the upper left corner etc.
If 'bg-style' has a value of 'fixed', the colors will be blended over the canvas, not the element:
BODY { background: blue / green; bg-style: fixed; }
The initial value of 'bg-blend-direction is 'S', so the example above would be 'blue' at the top, smoothly blending to 'green' at the bottom.
BODY { bg-blend-direction: NW; background: blue / green; bg-style: scroll }
In the example above, the direction is set to 'NW' which give 'blue' in the top-left corner of the body element smoothly blending to 'green' in the bottom right corner. Since 'bg-style' is 'scroll' the colors will be blended over the 'BODY' element, not the canvas.
If only one background color is specified, 'bg-blend-direction' is ignored.
This property describes how the background image should be laid out. By default, the background image is repeated both in the x and y direction, and the image is scrolled along with the other content. A 'fixed' background is fixed with regard to the canvas.
If the formatted document is smaller than the canvas, the background of the first encountered element with a 'bg-style' value of 'fixed' will be used to fill the
The values fall into two groups: repeat values and scroll values. Only one value from each group can be specified. If a value from one of the groups is missing in a declaration, the initial value will be assigned. The two declarations in the example below are equivalent:
BODY { bg-style: repeat-x }
BODY { bg-style: repeat-x scroll }
The property describes the initial position of a background image specified with the 'background' property. If only one value is given, it sets both the horizontal and vertical offset of the background image. If two values are given, the horizontal position comes first.
With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the element. 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.
If the background image is fixed with regard to the canvas (a possible value of 'bg-style'), the images are placed relative to the canvas instead of the element. E.g.:
BODY {
background: "logo.png";
bg-style: fixed;
bg-position: 100% 100%;
}
In the example above, the image is placed in the lower right corner of the canvas.
The keyword values are defined as follows:
left = 0% center = 50% right = 100% top = 0% middle = 50% bottom = 100%
The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).
H1 { word-spacing: 1em }
Here, the word-spacing between each word in 'H1' elements would be
increased with '1em'.
The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).
BLOCKQUOTE { letter-spacing: 0.1em }
Here, the word-spacing between each character in 'BLOCKQUOTE' elements would be
increased with '0.1em'.
This property describes decorations that are added to the text of an element. If the element has no text (e.g. the IMG element in HTML) or is an empty element (e.g. "<EM></EM>"), this property has no effect.
Formatters should treat unknown values as 'box', which should be rendered as a simple rectangle around the element. If the element is 'inline' and spans several lines, the UA is free to render several boxes, possibly with omitted edges.
If more than one color is required, e.g. for the 'box', the other colors should be based on the text color.
This property is not inherited, but children elements should match their ancestor. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.
A:link, A:visited, A:active { text-decoration: underline }
The example above would underline the text of all active links.
The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.
Percentage values refer to the 'line-height' of the element itself. E.g., a value of '-100%' will lower the element to where the baseline of the next line should have been.
The 'first-letter' pseudo-element has a special interpretation of a negative value on 'vertical-align': the letter is "dropped" into the element.
Example:
SPAN.subscript { vertical-align: sub }
H1 { text-transform: uppercase }
The example above would put 'H1' elements in uppercase text.
This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.
Example:
DIV.center { text-align: center }
Since this property inherit, 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.
The property specifies indent that appears before the first formatted line. 'text-indent' may be negative. An indent is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).
Example:
P { text-indent: 3em }
The property describes how much space to insert between the border and the content (e.g. text or image). The order is top, right, bottom, left. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The color of the padding area is controlled with the 'background' property.
Example:
H1 { padding: 10% 20% }
Padding values cannot be negative. See the formatting model (section 4) for more on these properties.
For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The 'margin' property is shorthand for setting 'margin-top', 'margin-right' 'margin-bottom' and 'margin-left' at the same place in the style sheet. These properties allow only one value. The last rule of the example above is equivalent to the example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
The margins express the minimal distance between the borders of two adjacent elements. See the formatting model (section 4) for an example.
When margin properties are applied to replaced elements (e.g. IMG), they express the minimal distance from the replaced element to any of the content of the parent element.
Negative margin values will enable interesting visual effects such as overlapping text. However, they will also complicate the formatting model, and we would like to gain more implementation experience before standardizing one way or the other.
This property indicates if an element is inline (e.g. 'EM' in HTML), block-level (e.g. 'H1' in HTML), or a block-level list item (e.g. 'LI' in HTML). For HTML documents, the initial value will be taken from the HTML specification.
A value of 'none' turns the display of the element, including children elements and the surrounding box, off.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
The last rule turns the display of images off.
Note that HTML defines what elements are block-level (called "Block Structuring Elements" in [2]) and inline (called "Phrase Markup" in [2]), and this may be hardcoded into some UA implementations.
This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the 'height' property is 'auto'.
Example:
IMG.icon { width: 100px }
See the formatting model (section 4) for a description of the relationship between this property and the margin and padding.
This property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the 'width' property is 'auto'.
Example:
IMG.icon { height: 100px }
If applied to a textual element, the height can be enforced with
e.g. a scrollbar.
This property is most often used with inline images.
With the value 'none', the element will be displayed where it appears in the text. With a value of 'left' ('right') the margin properties will decide the horizontal positioning of the image and the text will float on the right (left) side of the image. With a a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).
IMG.icon {
float: left;
margin-left: 0;
}
The above example will place all IMG elements with 'CLASS=icon' along
the left side of the parent element.
This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. Example:
H1 { clear: left }
If 'pack' is set to 'tight', element boxes will move up vertically until they hit another element. With a value of 'loose', the element will not move up next to any element with the same value in the 'float' property. See the formatting model (section 4) for an example that uses this property.
The four keywords apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The 'thin-thick' ('thick-thin') keyword requests a frame with the outer (inner) frame 'thin' and the inner (outer) frame 'thick'. The space between the two has the background color of the cell.
A border-style of 'none' requests no visible frame around the element, and the frame will not take up any space.
Example:
A:link IMG { border-style: double }
The four widths 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.
H1 { border-width: medium }
P { border-width: medium }
The keyword widths are constant throughout a document. In the example
above, 'H1' and 'P' elements will have the same border width
regardless of font size.
This attribute describes the color of the border surrounding an element. As in the 'background' property, both an image and a color can be specified:
H1 { border-color: "http://www.pat.com/concrete.png" gray }
The color is used:
This property can be set on any element, and it will inherit normally down the tree. However, the 'list-style' will only be displayed on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.
UL { list-style: disc }
UL UL { list-style: circle }
LI.square { list-style: square }
OL { list-style: decimal } /* 1 2 3 4 5 etc. */
OL { list-style: lower-roman } /* a b c d e etc. */
A URI value can be combined with any other value:
UL { list-style: "http://png.com/ellipse.png" disc }
In the example above, the 'disc' will be used when the image is unavailable.
The property suggests a magnification factor for all spatial properties. E.g., by setting the magnification of the top-level element to '2.0', all length units (e.g. margins, font sizes, images) will be scaled accordingly.
Percentage values that refer to other spatial units are not scaled.
One use of this property is to link it to a "zoom" button of the UA. Zooming in would then be a local modification of the personal style sheet:
BODY { magnification: 2.0 }
Declares how white space inside the element should be handled: the 'normal' way (where white space is collapsed) or as the 'PRE' element in HTML. This property may be hardcoded into UA implementations, and style sheet designers should be careful changing the initial values:
PRE { white-space: pre } /* initial value */
Child elements inherit the computed value, not the relative value:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }
In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.
The list of relative units include:
H1 { margin: 0.5em } /* ems, the height of the element's font */
H1 { margin: 1ex } /* x-height, ~ the height of the letter 'x' */
P { font-size: 12px } /* pixels, relative to canvas */
Pixel units, as used in the last rule, are relative to the resolution
of the canvas. Since this is an unknown parameter for the style sheet
designer, its use is discouraged.
Absolute length units have the same problem as the pixel unit: they are only useful when the physical properties of the output medium is known. The list of absolute units include:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
Percentage units are relative to a length unit, most often the 'font-size' of the element itself: P { line-height: 120% } /* 120% of the element's 'font-size' */
Child elements inherit the computed value, not the percentage value.
A color is a either a color name or a numerical RGB specification. The list of color names include the CNS [7] subset: black, white, red, green, blue, yellow, brown, gray, orange, purple. Also, a small subset of the CNS syntax is allowed, namely the 'light' and 'dark' modifiers.
H1 { color: light red } /* i.e. pink */
H2 { color: dark blue }
The RGB color model is being used in numerical color specifications. There are different ways to specify red:
EM { color: red } /* natural language */
EM { color: #F00 } /* #RGB */
EM { color: #FF0000 } /* #RRGGBB */
EM { color: rgb 1.0 0.0 0.0 } /* float range: 0.0 - 1.0 */
To have room for other color models in the future, the 'rgb' keyword
is required in the latter notation.
To ensure similar colors on different devices, numerical color values are in linear light and will require appropriate gamma correction.
A Uniform Resource Identifier (URI) should be enclosed in quotes:
BODY { background: "http://www.bg.com/pinkish.gif" }
Partial URIs are interpreted relative to the source of the style
sheet, not relative to the document:
BODY { background: "yellow" }
The quotes in the above example indicate that the value is a URI, not the name of a color.
In many cases, writing style sheets for HTML tables, as specified in The HTML3 table model [6], is like writing style sheets for other HTML elements. Most of the normal CSS addressing scheme and style properties can be reused:
TABLE { font: 12pt helvetica } /* set the font for table content */
TFOOT { background: yellow } /* set the background for the footer cells */
TH { font-weight: bold } /* set the font-weight for the head cells */
The margin
properties do not apply inside tables. Padding properties do apply
and, if necessary, the padding is expanded to fill the cell.
The formatting of tables becomes more complicated when row and column elements are introduced. While elements normally have one distinct parent element, table cells are perceived as children of both row and column elements. Technically, this is not the case: 'TD' and 'TH' elements are children of 'TR' in the parse tree. However, from a usability point of view, one must be able to set style properties on 'COL' and 'COLGROUP' elements as well. Instead of trying to resolve multiple inheritance, which would complicate the inheritance model, CSS1 uses context-sensitive selectors to select one line of ancestry:
COL.first TD { font-weight: bold } /* note the 'TD' */
The above example sets the font weight of 'TD' elements in a 'COL' with 'CLASS=first'. Note that the above rule does not rely on the inheritance mechanism in CSS, but addresses 'TD' elements directly. 'TD' elements will have two lines of ancestry and both can be used in context-sensitive selectors.
To emphasize a certain row, the 'TR' element is used in the context-sensitive selector:
TR.hilite TD { font-weight: light } /* note the 'TD' */
The normal cascading order is used to resolve conflicts between rules. In the two previous examples, the specificity is the same so the conflicting 'font-weight' value will be resolved by the order in which the rules were specified.
Also, the normal inheritance rules are still in function, and values set on 'TR' elements will be inherited by its children. However, in the two previous examples, inherited values are overridden by the context-sensitive selectors if there are conflicts. 'COL' and 'COLGROUP' are empty elements and no cell elements inherit from them.
For most table renderers, adjacent table cells share their common border. This leads to conflicts when several elements try to influence the borders. E.g., the borders of a 'TD' element in the lower right corner of a table may be influenced by properties set on 'TABLE', 'COL', 'COLGROUP', 'TR', 'TFOOT' and 'TBODY' elements. We suggest a strategy based on the width of the border. The cell that assigns the thickest 'border-width' to a cell border wins, and the corresponding 'border-style' and 'border-color' will be used to render the border. If two elements set the same border width, the cascading rules for reader/author and important/legal take effect. If one still cannot resolve the conflict, sort by order specified. Note that the popular Netscape browser differentiates the external table border from cell borders, and gives each cell its own border. Adjacent cells don't share a common border, unlike most other implementations.
Priority should be given to the thickest 'border-width' value even if the border is not visible:
TABLE { border-width: 100em; border-style: none }
TABLE { border-width: 0.1em; border-style: single }
In the example above, the first rule would win due to the extravagant
border width.
Cell border styles distinguish internal and external borders. This allows authors to specify a thick rule for the external border of a table and thinner rules for the internal cell borders. The HTML table model provides simple control over which borders are rendered using a pair of attributes for the TABLE element: FRAME specifies the external borders, while RULES specifies the internal borders. CSS1 gives you further control over the border style, width and color using the properties: 'border-style', 'border-width' and 'border-color', and the corresponding 'border-style-internal', 'border-width-internal' and 'border-color-internal'. It is irrelevant if the border width was set by the internal or external property: the thickest border wins.
Consider the following simple table:
<TABLE> <TR><TD>foo<TD>bar </TABLE>Which would be formatted as:
(a) (b)
________________________
| | |
(c)| foo (d) bar |(e)
|___________|____________|
(f) (g)
Here, (a), (c), (d) and (f) are external borders of the first 'TD' element, while (b), (d), (e) and (g) are external borders of the second 'TD' element. The 'TABLE' element has both external and internal borders: (a), (b), (d), (e), (f) and (g) are external, while (d) is internal.
* : 0 or more + : 1 or more ? : 0 or 1 | : separates alternatives [] : groupingThe productions are:
stylesheet
: import* rule*
;
import
: IMPORT_SYM url /* E.g., @import "fun.css" */
;
url
: STRING
;
unary_operator
: '-' | '+'
;
/*
* The only operators in level 1 are slash, space and comma.
* An expression `a b c, d e f' stands for a list
* [[a,b,c],[d,e,f]]. Note that `a,b,c' is the list
* [a,b,c], *not* [[a],[b],[c]].
*/
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
rule
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ ':' pseudo_element ]?
;
/*
* A simple_selector is something like H1, PRE.FOO,
* .FOO, etc., or it is an ID: #p004
*
* DOT_WO_WS is a `.' without preceding whitespace.
* DOT_W_WS is a `.' with preceding whitespace.
*/
simple_selector
: element_name [ DOT_WO_WS class ]?
| DOT_W_WS class
| id_selector
;
element_name
: IDENT
;
class
: IDENT
;
pseudo_element
: IDENT
;
id_selector
: '#' IDENT
;
declaration
: property ':' expr prio?
| /* empty */ /* Prevents syntax errors... */
;
prio
: LEGAL_SYM STRING /* !legal "with a reason" */
| IMPORTANT_SYM /* !important" */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS | LINES | IDENT ]
;
The following is the input to a lex/flex scanner:
%{
#include "constants.h"
/*
The constants include definitions similar to the following:
#define INCH (25.4 * MM)
#define CM (10 * MM)
#define MM 1
#define PICA (12 * INCH/72 * MM)
#define POINT (INCH/72 * MM)
*/
%}
%a 3000
%o 4000
urlchar [a-zA-Z0-9:/_%~!@#$?*+{};.,|=`'-]
d [0-9]
notnm [^-a-zA-Z0-9]
nmchar [-a-zA-Z0-9]|\\\.
nmstrt [a-zA-Z]
w [ \t\n]*
num {d}+|{d}*\.{d}+
h [0-9a-fA-F]
ident {nmstrt}{nmchar}*
%x COMMENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(INITIAL);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import return IMPORT_SYM;
@class return CLASS_SYM;
@define return DEFINE_SYM;
"!"{w}legal {return LEGAL_SYM;}
"!"{w}important {return IMPORTANT_SYM;}
{ident} {yylval.sym = str2Symbol(yytext); return IDENT;}
\"[^"\n]*\" |
\'[^'\n]*\' {yylval.str = noquotes(yytext); return STRING;}
{num} {yylval.num = atof(yytext); return NUMBER;}
{num}{w}"%" {yylval.num = atof(yytext); return PERCENTAGE;}
{num}{w}pt/{notnm} {yylval.num = atof(yytext) * POINT; return LENGTH;}
{num}{w}mm/{notnm} {yylval.num = atof(yytext); return LENGTH;}
{num}{w}cm/{notnm} {yylval.num = atof(yytext) * CM; return LENGTH;}
{num}{w}pc/{notnm} {yylval.num = atof(yytext) * PICA; return LENGTH;}
{num}{w}inch/{notnm} {yylval.num = atof(yytext) * INCH; return LENGTH;}
{num}{w}px/{notnm} {yylval.num = atof(yytext) * pixelwd; return LENGTH;}
{num}{w}em/{notnm} {yylval.num = atof(yytext); return EMS;}
{num}{w}ex/{notnm} {yylval.num = atof(yytext); return EXS;}
":" return ':';
^"."|[ \t]+"." return DOT_W_WS;
"." return DOT_WO_WS;
"/" return '/';
"+" return '+';
"-" return '-';
"{" return '{';
"}" return '}';
";" return ';';
"," return ',';
"#" return '#';
[ \t]+ {/* ignore whitespace */}
\n {/* ignore whitespace */}
. {yyerror("Illegal character");}
The goal of CSS1 has been to create a simple style sheet mechanism for HTML documents. The current specification is a balance between the simplicity needed to realize style sheets on the web, and pressure from authors for richer visual control. CSS1 offers:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>;with the style sheet:
H1 { font-style: small-caps }
<H1>Headline</H1>
[1] The W3C resource page on web style sheets (http://www.w3.org/pub/WWW/Style)
[2] RFC 1866: Hypertext Markup Language - 2.0, (ftp://ds.internic.net/rfc/rfc1866.txt). The specification is also available in hypertext form (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)
[3] ISO 8879. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML), 1986.
[4] HTML3 and Style Sheets (http://www.w3.org/pub/WWW/TR/WD-style.html)
[5] HyperText Markup Language Specification Version 3.0 (http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html) The draft has now expired
[6] The HTML3 table model (http://www.w3.org/pub/WWW/TR/WD-tables-960123.html)
[7] T Berk, L Brownston, A Kaufman: A New Color-Naming System for Graphics Languages, IEE CG&A, May 1982
[8] DSSSL (http://occam.sjf.novell.com:8080/dsssl/dsssl96) is a transformation and style language from the SGML community. Bert Bos has written some notes on Translating CSS to DSSSL (http://www.w3.org/pub/WWW/Style/css/css2dsssl.html)
During the short life of HTML, there have been several style sheet proposals to which this proposal is indebted. Especially the proposals from Robert Raisch, Joe English and Pei Wei were influential.
Through "www-style@w3.org" and other electronic media, these people have contributed: Kevin Hughes, William Perry, Benjamin Sittler, Tony Jebson, Paul Prescod, Evan Kirshenbaum, Scott Bigham, Glenn Adams, Scott Preece, Greg Watkins, Jon Smirl, Chris Lilley, Mandira Virmani, Jenny Raggett and Michael Seaton.
Also, thanks to Tim Berners-Lee, Vincent Quint, Cécile Roisin, Irène Vatton, Phill Hallam-Baker, Yves Lafon, Yves Bertot, Colas Nahaboo, Philippe Kaplan, Gilles Kahn, Terry Allen, Daniel Connolly, Steven Pemberton, Roy Fielding, Henrik Nielsen, James Clark, David Siegel, Thomas Reardon, Chris Wilson, Lydja Williams, Robert Cailliau and Stephen Zilles for constructive discussions.
A special thanks goes to Dave Raggett for his encouragement, suggestions and work on HTML3.
The following style sheet is written according to the suggested rendering in the HTML 2.0 specification. Some styles, e.g. colors, have been added for completeness.
BODY {
margin: 1em;
font-family: serif;
background: white;
color: black;
border-bolor: black; /* used by the HR element */
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large; align: center }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bold }
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 0 }
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 5em }
HR { border-style: single none none none }
A:link { color: red } /* unvisited link */
A:visited { color: dark-red } /* visited links */
A:active { color: orange } /* active links */
/* setting the anchor border around IMG elements
requires context-sensitive selectors */
A:link IMG {
border-color: red;
border-style: single;
border-width: 2px
}
A:visited IMG {
border-color: red;
border-style: single;
border-width: 2px
}
A:active IMG {
border-color: red;
border-style: single;
border-width: 2px
}