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.
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
The size of the margin, border and padding are set with the margin (5.5.1-5.5.5), padding (5.5.6-5.5.10), and border (5.5.11-5.5.22) properties respectively. The padding area uses the same background as the element itself (set with the background properties (5.3.2-5.3.7). The color and style for the border is set with the border properties. The margins are always transparent, so the parent element will shine through.
The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas.
From the formatter's point of view there are two main types of elements: block-level and inline.
Each element has a natural location in a page's flow. Moving the element with respect to this original location is called reletive positioning. The surrounding elements are not affected at all.
<STYLE
>
IMG { position: relative; top: 0; left: 0 } sample
IMG.off { position: relative; top:40; left: 30 }
</STYLE>
</HEAD>
<BODY>
<IMG
src="imageone.jpg">
<IMG src="imagetwo.jpg" CLASS=off>
The first image is in it's natural positioning on the left of the page. The second image (CLASS=off) is offest 40 pixels up (the base lines will not match)and 30 pixels to the right which will cause a big space between the images.
The elements in your web page flow in the order in which they appear. If the IMG tag comes before the P tag the image appears before the paragraph. This is called the normal flow. You can change the order of the flow by positioning elements absolutely.
<STYLE
>
IMG { position: absolute; left: 0; left: 0 } sample
</STYLE>
Elements that are positioned absolutely can overlap. To avoid this sure to specify an offset.
Once you set relative and absolute positioning you can select which element will be on top.
<STYLE
>
IMG { position: absolute; left: 0; left: 0 } sample
</STYLE>
</HEAD>
<BODY>
<IMG src="imageone.jpg"
STYLE="z-index:1>
<IMG src="imageone.jpg" STYLE="z-index:2>
This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).
An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, 'LI' will typically have this value.
An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.
A value of 'none' turns off the display of the element, including children elements and the surrounding box.
You can specify how elements should be displayed without using the tag. Display:none is useful for hiding elements that belong to one of several versions contained in the same HTML document.
<STYLE
>
IMG { display:none}
IMG { display:block}
IMG { display:inline}
IMG { display:list-item}
</STYLE>
</HEAD>
<BODY>
Elements with a 'display' value of 'block' or 'list-item' are block-level elements. Also, floating elements (elements with a 'float' value other than 'none') are considered to be block-level elements.
The following example shows how margins and padding format a 'UL' element with two children. To simplify the diagram there are no borders. Also, the single-letter "constants" in this example are not legal CSS syntax, but is a convenient way to tie the style sheet values to the figure.
<STYLE TYPE="text/css">
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;
}
</STYLE>
..
<UL>
<LI>1st element of list
<LI>2nd element of list
</UL>
_______________________________________________________ | | | A UL margin (transparent) | | _______________________________________________ | | D | | B | | | E UL padding (red) | | | | _______________________________________ | | | | H | | F | | | | | a LI margin (transparent, | | | | | | so red shines through) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI padding (blue) | | | | | | | | | | | | | | | | h 1st element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- note the max | | | _______________________________ | | | | | | | | | | | | | | d | e LI padding (blue) | | | | | | | | | | | | | | | | h 2nd element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI margin (transparent, | | | | | | so red shines through) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Technically, padding and margin properties are not inherited. But, as the example shows, the placement of an element is relative to ancestors and siblings, so these elements' padding and margin properties have an effect on their children.
If there had been borders in the above example they would have appeared between the padding and the margins.
The following diagram introduces some useful terminology:
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
The left outer edge is the edge of an element with its padding, border and margin taken into account. The left inner edge is the edge of the content only, inside any padding, border or margin. Ditto for right. The top is the top of the object including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements. The inner top is the top of the content, inside any padding, border or margin. The bottom is the bottom of the element, outside any padding border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements. The inner bottom is the bottom of the element, inside any padding, border and margin.
The width of an element is the width of the content, i.e., the distance between left inner edge and right inner edge. The height is the height of the content, i.e., the distance from inner top to inner bottom.
If you have elements such as images on your page that you woyuld like to align in the same way use the vertical-align property to set the tag, or class of the tag.
<STYLE>
IMG { position: relative; top: 0; left: 0;vertical-align:top } sample
IMG { position: relative; top: 0; left: 0;vertical-align:bottom }
IMG { position: relative; top: 0; left: 0;vertical-align:baseline }
sample
IMG { position: relative; top: 0; left: 0;vertical-align:middle }
sample
IMG { position: relative; top: 0; left: 0;vertical-align:sub}
IMG { position: relative; top: 0; left: 0;vertical-align:super }
IMG { position: relative; top: 0; left: 0;vertical-align:text-top
}
IMG { position: relative; top: 0; left: 0;vertical-align:text-bottom
}
</STYLE>
</HEAD>
<BODY>
Using the 'float' property, an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element. For example, by setting the 'float' property of an image to 'left', the image is moved to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. The margins, borders and padding of the element itself will be honored, and the margins never collapse with the margins of adjacent elements.
A floating element is positioned subject to the following constraints (see section 4.1 for an explanation of the terms):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
There are two situations when floating elements can overlap with the margin, border and padding areas of other elements:
Elements that are not formatted as block-level elements are inline elements. An inline element can share line space with other elements. Consider this example:
<P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>
The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline elements. If the 'P' element is wide enough to format the whole element on one line, there will be two inline elements on the line:
Several emphasized words appear.
If there is not enough room on one line an inline element will be split into several boxes:
<P>Several <EM>emphasized words</EM> appear here.</P>
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.
Replaced elements can be either block-level or inline.
The canvas is the part of the UA's drawing surface onto which documents are rendered. No structural element of a document corresponds to the canvas, and this raises two issues when formatting a document:
A reasonable answer to the first question is that the initial size of the canvas is based on the window size, but CSS 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 CSS.
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, CSS introduces a special rule to find the canvas background:
If the 'background' value of the 'HTML' element is different from 'transparent' then use it, else use the 'background' value of the 'BODY' element. If the resulting value is 'transparent', the rendering is undefined.
This rule allows:
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
In the example above, the canvas will be covered with "marble". The background of the 'BODY' element (which may or may not fully cover the canvas) will be red.
Until other means of addressing the canvas become available, it is recommended that canvas properties are set on the 'BODY' 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.
To specify a page break
after a given tag:
<STYLE >
H1 {page-break-after:always }
</STYLE>
To specify g break after
a given tag:
<STYLE >
H1 {page-break-before:always }
</STYLE>
These properties describe the color (often called foreground color) 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.
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'.
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
This property describes the text color of an element (often referred to as the foreground color). There are different ways to specify red:
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
See section 6.3 for a description of possible color values.
Value: <color>
| transparent
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A
This property sets the background color of an element.
H1 { background-color: #F00 }
Value: <url>
| none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
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.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Value: repeat
| repeat-x | repeat-y | no-repeat
Initial: repeat
Applies to: all elements
Inherited: no
Percentage values: N/A
If a background image is specified, the value of 'background-repeat' determines how/if the image is repeated.
A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
In the example above, the image will only be repeated vertically.
Value: scroll
| fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A
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.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Value: [<percentage>
| <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to the size of the element itself
If a background image has been specified, the value of 'background-position' specifies its initial position.
With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.
With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the element.
If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.
One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:
examples:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
If the background image is fixed with regard to the canvas (see the 'background-attachment' property above), the image is placed relative to the canvas instead of the element. E.g.:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
In the example above, the image is placed in the lower right corner of the canvas.
Value: <background-color>
|| <background-image> || <background-repeat> || <background-attachment>
|| <background-position>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: allowed on <background-position>
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.
Possible values on the 'background' properties are the set of all possible values on the individual properties.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
The 'background' property always sets all the individual 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.
The box properties set the size, circumference and position of the boxes that represent elements. See the formatting model (section 4) for examples on how to use the box properties.
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.
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.
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.
The 'width' and 'height' properties set the size of the box, and the 'float' and 'clear' properties can alter the position of elements.
This property sets the top margin of an element:
H1 { margin-top: 2em }
A negative value is allowed, but there may be implementation-specific limits.
This property sets the right margin of an element:
H1 { margin-right: 12.3% }
A negative value is allowed, but there may be implementation-specific limits.
This property sets the bottom margin of an element:
H1 { margin-bottom: 3px }
A negative value is allowed, but there may be implementation-specific limits.
This property sets the left margin of an element:
H1 { margin-left: 2em }
A negative value is allowed, but there may be implementation-specific limits.
The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right' 'margin-bottom' and 'margin-left' at the same place in the style sheet.
If four length values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
BODY { margin: 2em } all margins set to 2em
BODY { margin: 1em
2em } top & bottom = 1em, right & left = 2em
BODY { margin: 1em
2em 3em 2em} top=1em, right=2em, bottom=3em, left=2em
The last rule of the example above is equivalent to the example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
Negative margin values are allowed, but there may be implementation-specific limits.
This property sets the top padding of an element.
BLOCKQUOTE { padding-top: 0.3em }
Padding values cannot be negative.
This property sets the right padding of an element.
BLOCKQUOTE { padding-right: 10px }
Padding values cannot be negative.
This property sets the bottom padding of an element.
BLOCKQUOTE { padding-bottom: 2em }
Padding values cannot be negative.
This property sets the left padding of an element.
BLOCKQUOTE { padding-left: 20% }
Padding values cannot be negative.
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right' 'padding-bottom' and 'padding-left' at the same place in the style sheet.
If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The surface of the padding area is set with the 'background' property:
H1 {
background: white;
padding: 1em 2em;
}
The example above sets a '1em' padding vertically ('padding-top' and 'padding-bottom') and a '2em' padding horizontally ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.
Padding values cannot be negative.
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' <= 'medium' <= 'thick'.
The keyword widths are constant throughout a document:
H1 { border: solid thick red }
P { border: solid thick blue }
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To achieve relative widths, the 'em' unit can be used:
H1 { border: solid 0.5em }
Border widths cannot be negative.
This property sets the width of an element's right border. Otherwise it is equivalent to the 'border-top-width'.
This property sets the width of an element's bottom border. Otherwise it is equivalent to the 'border-top-width'.
This property sets the width of an element's left border. Otherwise it is equivalent to the 'border-top-width'.
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.
There can be from one to four values, with the following interpretation:
In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:
H1 { border-width: thin }
H1 { border-width: thin thick }
H1 { border-width: thin thick medium }
H1 { border-width: thin thick medium none }
Border widths cannot be negative.
The 'border-color' property sets the color of the four borders. 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width' above.
If no color value is specified, the value of the 'color' property of the element itself will take its place:
P { color: black;
background: white;
border: solid;} sample
In the above example, the border will be a solid black line.
Value:
none | dotted | dashed | solid | double | groove | ridge | inset | outset
The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
The border styles mean:
This is a shorthand property for setting the width, style and color of an element's top border.
H1 { border-top: thick solid double red }
The above rule will set the width, style and color of the border below the H1 element. Omitted values will be set to their initial values:
H1 { border-top: thick solid }
Since the color value is omitted in the example above, the border color will be the same as the 'color' value of the element itself.
Note that while the 'border-style' property accepts up to four values, this property only accepts one style value.
This is a shorthand property for setting the width, style and color of an element's right border. Otherwise it is equivalent to the 'border-top'.
This is a shorthand property for setting the width, style and color of an element's bottom border. Otherwise it is equivalent to the 'border-top'.
This is a shorthand property for setting the width, style and color of an element's left border. Otherwise it is equivalent to the 'border-top'.
Value: <border-width>
|| <border-style> || <color>
Percentage values: N/A
The 'border' property is a shorthand property for setting the same width, color and style on all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.
Note that while the 'border-width' property accepts up to four length values, this property only accepts one.
Applies to:
block-level and replaced elements
This property can be applied to text elements, but it is most useful with replaced elements such as images. The width is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image is preserved if the 'height' property is 'auto'.
Example:
IMG.icon { width: 100px }
If the 'width' and 'height' of a replaced element are both 'auto', these properties will be set to the intrinsic dimensions of the element.
Negative values are not allowed.
See the formatting model (section 4) for a description of the relationship between this property and the margin and padding.
Applies to: block-level
and replaced elements
This property can
be applied to text, but it is most useful with replaced elements such as images.
The height is to be enforced by scaling the image if necessary. When scaling,
the aspect ratio of the image is preserved if the 'width' property is 'auto'.
Example:
IMG.icon { height: 100px }
If the 'width' and 'height' of a replaced element are both 'auto', these properties will be set to the intrinsic dimensions of the element.
If applied to a textual element, the height can be enforced with e.g. a scrollbar.
Negative values are not allowed.
With the value 'none', the element will be displayed where it appears in the text. With a value of 'left' ('right') the element will be moved to the left ('right') and the text will wrap on the right (left) side of the element. With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).
IMG.icon {
float: left;
margin-left: 0;
} sample
The above example will place all IMG elements with 'CLASS=icon' along the left side of the parent element.
This property is most often used with inline images, but also applies to text elements.
This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With 'clear' set to 'left', an element will be moved below any floating element on the left side. With 'clear' set to 'none', floating elements are allowed on all sides. Example:
H1 { clear: left }
These properties classify elements into categories more than they set specific visual parameters.
The list-style properties describe how list items (i.e. elements with a 'display' value of 'list-item') are formatted. The list-style properties can be set on any element, and it will inherit normally down the tree. However, they will only be have effect on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.
Value: normal
| pre | nowrap
This property declares how whitespace inside the element is handled: the 'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the 'PRE' element in HTML) or as 'nowrap' (where wrapping is done only through BR elements):
PRE { white-space: pre }
P { white-space: normal }
The initial value of 'white-space' is 'normal', but a UA will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification.
CSS1 core: UAs may ignore the 'white-space' property in author's and reader's style sheets, and use the UA's default values instead. (See section 7.)
Value: disc
| circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
| none
This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.
OL { list-style-type: decimal } 1 2 3 4 5 etc.
OL { list-style-type: lower-alpha } a b c d e etc.
OL { list-style-type: lower-roman } i ii iii iv v etc.
Applies to: elements with 'display' value 'list-item'
This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.
UL { list-style-image: url(http://png.com/ellipse.png) }
'list-style-position'
Applies to: elements with 'display' value 'list-item'
The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content.
'list-style'
Applies to: elements with 'display' value 'list-item'
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Setting 'list-style' directly on 'LI' elements can have unexpected results. Consider:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all 'LI' elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
In the above example, inheritance will transfer the 'list-style' values from 'OL' and 'UL' elements to 'LI' elements.
A URL value can be combined with any other value:
UL { list-style: url(http://png.com/ellipse.png) disc }
In the example above, the 'disc' will be used when the image is unavailable.
The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional.
Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be clipped to the nearest value that can be supported.
There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.
These relative units are supported:
H1 { margin: 0.5em } ems, the height of the element's font
H1 { margin: 1ex } x-height, ~ the height of the letter 'x'
P { font-size: 12px } pixels, relative to canvas
The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.
Child elements inherit the computed value, not the relative value:
BODY {
font-size: 12pt;
text-indent: 3em;
}
H1 { font-size: 15pt }
In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.
Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported:
H1 { margin: 0.5in } inches, 1in = 2.54cm
H2 { line-height: 3cm } centimeters
H3 { word-spacing: 4mm } millimeters
H4 { font-size: 12pt } points, 1pt = 1/72 in
H4 { font-size: 1pc } picas, 1pc = 12pt
In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.
The format of a percentage value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by '%'.
Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage value refer to. Most often this is the font size of the element itself:
P { line-height: 120% } 120% of the element's 'font-size'
In all inherited CSS1 properties, if the value is specified as a percentage, child elements inherit the resultant value, not the percentage value.
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications. These examples all specify the same color:
EM { color: #f00 } #rgb
EM { color: #ff0000 } #rrggbb
EM { color: rgb(255,0,0) } integer range 0 - 255
EM { color: rgb(100%, 0%, 0%) } float range 0.0% - 100.0%
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.
Values outside the numerical ranges should be clipped. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) } integer range 0 - 255
EM { color: rgb(300,0,0) } clipped to 255
EM { color: rgb(110%, 0%, 0%) } clipped to 100%
RGB colors are specified in the sRGB color space. UAs may vary in the fidelity with which they represent these colors, but use of sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards .
UAs may limit their efforts in displaying colors to performing a gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified viewing conditions. UAs adjust the colors given in CSS such that, in combination with an output device's "natural" display gamma, an effective display gamma of 2.2 is produced.
A Uniform Resource Locator (URL) is identified with a functional notation:
BODY { background: url(http://www.bg.com/pinkish.gif) }
The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced.
Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:
BODY { background: url(yellow) }