This document is a modified version of a larger one that can be found at :www.w3.org/TR/REC-CSS1.
Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS1 properties, values are separated by a comma to indicate that they are alternatives:
BODY { font-family: gill, helvetica, sans-serif }
There are two types of list values:
Style sheet designers are encouraged to offer a generic font family as a last alternative.
Font names containing whitespace should be quoted:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.
Value: normal | italic | oblique
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.
A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.
The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
In the example above, emphasized text within 'H1' will appear in a normal face.
Value: normal | small-caps
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.
A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.
The following example results in an 'H3' element in small-caps, with emphasized words in oblique small-caps:
H3 { font-variant: small-caps }
EM { font-style: oblique }
There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS1 has no properties that select those.
CSS1 core: insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:
STRONG { font-weight: bolder }
Child elements inherit the resultant weight, not the keyword value.
Fonts (the font data) typically have one or more properties whose values are names that are descriptive of the "weight" of a font. There is no accepted, universal meaning to these weight names. Their primary role is to distinguish faces of differing darkness within a single font family. Usage across font families is quite variant; for example a font that you might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or DemiBold, Bold, or Black, depending on how black the "normal" face of the font is within the design. Because there is no standard usage of names, the weight property values in CSS1 are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for that family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.
The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of darkness within that family. However, the following heuristics tell how the assignment is done in typical cases:
The following two examples illustrate the process. Assume four weights in the "Example1" family, from lightest to darkest: Regular, Medium, Bold, Heavy. And assume six weights in the "Example2" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note how in the second example it has been decided not to assign "Example2 ExtraBlack" to anything.
Available faces | Assignments | Filling the holes ----------------------+---------------+------------------- "Example1 Regular" | 400 | 100, 200, 300 "Example1 Medium" | 500 | "Example1 Bold" | 700 | 600 "Example1 Heavy" | 800 | 900
Available faces | Assignments | Filling the holes ----------------------+---------------+------------------- "Example2 Book" | 400 | 100, 200, 300 "Example2 Medium" | 500 | "Example2 Bold" | 700 | 600 "Example2 Heavy" | 800 | "Example2 Black" | 900 | "Example2 ExtraBlack" | (none) |
Since the intent of the relative keywords 'bolder' and 'lighter' is to darken or lighten the face within the family and because a family may not have faces aligned with all the symbolic weight values, the matching of 'bolder' is to the next darker face available on the client within the family and the matching of 'lighter' is to the next lighter face within the family. To be precise, the meaning of the relative keywords 'bolder' and 'lighter' is as follows:
There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, others may have eight different face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent element's font size
Length and percentage values should not take the font size table into account when calculating the font size of the element.
Negative values are not allowed.
On all other properties, 'em' and 'ex' length values refer to the font size of the current element. On the 'font-size' property, these length units refer to the font size of the parent element.
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.
Examples:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
If the suggested scaling factor of 1.5 is used, the last three declarations are identical.
Value: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height>
The 'font' property is a shorthand property for setting 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.
For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.
In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.
The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.
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;
}
CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. (See section 7.)
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.
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
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 'text-align' property).
H1 { word-spacing: 1em }
Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.
CSS1 core: UAs may interpret any value of 'word-spacing' as 'normal'.
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A
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 letter-spacing between each character in 'BLOCKQUOTE' elements would be increased by '0.1em'.
With a value of 'normal', the UAs may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.
CSS1 core: UAs may interpret any value of 'letter-spacing' as 'normal'.
Value: none | [ underline || overline || line-through || blink ]
Initial: none
Applies to: all elements
Inherited: no, but see clarification below
Percentage values: N/A
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. A value of 'blink' causes the text to blink.
The color(s) required for the text decoration should be derived from the 'color' property value.
This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.
A:link, A:visited, A:active { text-decoration: underline }
The example above would underline the text of all links (i.e., all 'A' elements with a 'HREF' attribute).
UAs must recognize the keyword 'blink', but are not required to support the blink effect.
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself
The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:
Another set of properties are relative to the formatted line that the element is a part of:
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.
Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.
It is expected that a future version of CSS will allow <length> as a value on this property.
Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A
The actual transformation in each case is human language dependent.
H1 { text-transform: uppercase }
The example above would put 'H1' elements in uppercase text.
CSS1 core: UAs may ignore 'text-transform' (i.e., treat it as 'none') for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of Unicode [8].
Value: left | right | center | justify
Initial: UA specific
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
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 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.
CSS1 core: UAs may treat 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.
Value: <length> | <percentage>
Initial: 0
Applies to: block-level elements
Inherited: yes
Percentage values: refer to parent element's width
The property specifies the indentation that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).
Example:
P { text-indent: 3em }
Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself
The property sets the distance between two adjacent lines' baselines.
When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).
Negative values are not allowed.
The three rules in the example below have the same resultant line height:
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.
The box properties set the size, circumference and position of the boxes that represent elements.
The margin properties set the margin of an element. The 'margin' property sets the margin 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.
Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of the closest block-level ancestor
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.
Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
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.
Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
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.
Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
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.
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left' at the same place in the style sheet.
If four length values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
Negative margin values are allowed, but there may be implementation-specific limits.
Value: <length> | <percentage>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
This property sets the top padding of an element.
BLOCKQUOTE { padding-top: 0.3em }
Padding values cannot be negative.
Value: <length> | <percentage>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
This property sets the right padding of an element.
BLOCKQUOTE { padding-right: 10px }
Padding values cannot be negative.
Value: <length> | <percentage>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
This property sets the bottom padding of an element.
BLOCKQUOTE { padding-bottom: 2em }
Padding values cannot be negative.
Value: <length> | <percentage>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
This property sets the left padding of an element.
BLOCKQUOTE { padding-left: 20% }
Padding values cannot be negative.
Value: [ <length> | <percentage> ]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor
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.
Value: thin | medium | thick | <length>
Initial: 'medium'
Applies to: all elements
Inherited: no
Percentage values: N/A
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.
Value: thin | medium | thick | <length>
Initial: 'medium'
Applies to: all elements
Inherited: no
Percentage values: N/A
This property sets the width of an element's right border. Otherwise it is equivalent to the 'border-top-width'.
Value: thin | medium | thick | <length>
Initial: 'medium'
Applies to: all elements
Inherited: no
Percentage values: N/A
This property sets the width of an element's bottom border. Otherwise it is equivalent to the 'border-top-width'.
Value: thin | medium | thick | <length>
Initial: 'medium'
Applies to: all elements
Inherited: no
Percentage values: N/A
This property sets the width of an element's left border. Otherwise it is equivalent to the 'border-top-width'.
Value: [thin | medium | thick | <length>]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
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 } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Border widths cannot be negative.
Value: <color>{1,4}
Initial: the value of the 'color' property
Applies to: all elements
Inherited: no
Percentage values: N/A
The 'border-color' property sets the color of the four borders. 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width' above.
If no color value is specified, the value of the 'color' property of the element itself will take its place:
P {
color: black;
background: white;
border: solid;
}
In the above example, the border will be a solid black line.
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
The border styles mean:
CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' and 'outset' as 'solid'.
Value: <border-top-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an element's top border.
H1 { border-bottom: thick solid red }
The above rule will set the width, style and color of the border below the H1 element. Omitted values will be set to their initial values:
H1 { border-bottom: thick solid }
Since the color value is omitted in the example above, the border color will be the same as the 'color' value of the element itself.
Note that while the 'border-style' property accepts up to four values, this property only accepts one style value.
Value: <border-right-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an element's right border. Otherwise it is equivalent to the 'border-top'.
Value: <border-bottom-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an element's bottom border. Otherwise it is equivalent to the 'border-top'.
Value: <border-left-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an element's left border. Otherwise it is equivalent to the 'border-top'.
Value: <border-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
The 'border' property is a shorthand property for setting the same width, color and style on all four borders of an element. 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.
Value: <length> | <percentage> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to parent element's width
This property can be applied to text elements, but it is most useful with replaced elements such as images. 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.
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A
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.
CSS1 core: UAs may ignore the 'height' property (i.e., treat it as 'auto') if the element is not a replaced element.
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
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;
}
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.
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
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: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A
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.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
The last rule turns off the display of images.
The initial value of 'display' is 'block', 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 'display' and use only the UA's default values.
Value: normal | pre | nowrap
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A
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.
Value: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial: disc
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A
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. */
Value: <url> | none
Initial: none
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A
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) }
Value: inside | outside
Initial: outside
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A
The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content.
Value: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Initial: not defined for shorthand properties
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A
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.
A Garsonix web site: ©2003.