CSS1 Property Summary
The following is a brief overview of all the CSS1 properties that can be applied to elements.
-
• background-This is a shorthand property for all the other background properties. The values can be written in any order:
BODY {background: white url(bg41.gif) fixed center;} -
• background-attachment-This property specifies whether or not the background image is to scroll with the element. It is generally only applied to the root element (or the BODY element in an HTML document) as it makes little sense with most other elements. Allowed values are scroll and fixed.
BODY {background-attachment: scroll;} -
• background-color-This property sets the background color of an element. This background color extends out to the edge of the element's border.
H4 {background-color: white;} -
• background-image-This property sets an image to be the background pattern. In conjunction with the other background properties, the image may be tiled or might repeat in one direction only.
BODY {background-image: url(../grafix/steel1.gif);} -
• background-position-This property sets the starting position of the background color or image. If the property value is a color, the color fill continues from the set position. If the property value is an image, the first image is placed at the set position and its frequency of repetition is determined by background-repeat. Possible values are top, center, bottom for the vertical position and left, center, right for the horizontal position, a length or a percentage.
BODY {background-position: top center;} -
• background-repeat-This property specifies how a background image is to be repeated. Allowed values are repeat, repeat-x, repeat-y, and no-repeat.
BODY {background-repeat: no-repeat;}
-
• border-This is a shorthand property that defines the width (see border-width), color (see border-color), and style (see border-style) of the border on all sides of an element.
H1 {border: 2px dashed tan;} -
• border-bottom-This is a shorthand property that defines the width, the color, and the style of the bottom border of an element.
UL {border-bottom: 0.5in grooved green;} -
• border-bottom-width-This property sets the width of the bottom border of an element. The border inherits the element's background but it may have a foreground of its own (see border-style). Negative values are not allowed. Allowed values are thin, medium, thick, or a length.
UL {border-bottom-width: 1in;} -
• border-color-This property sets the foreground color of the border on all sides of an element (see border-style). The border inherits the element's background.
H1 {border-color: blue; border-style: solid;} -
• border-left-This is a shorthand property that defines the width, the color, and the style of the left border of an element.
P {border-left: 3em solid gray;} -
• border-left-width-This property sets the width of the left border of an element. The border inherits the element's background, but it may have a foreground of its own (see border-style). Negative values are not allowed. Allowed values are thin, medium, thick, or a length.
P {border-left-width: 3em;} -
• border-right-This is a shorthand property that defines the width, the color, and the style of the right border of an element.
IMG {border-right: 30px dotted blue;} -
• border-right-width-This property sets the width of the right border of an element. The border inherits the element's background, but it may have a foreground of its own (see border-style). Negative values aren't allowed. Allowed values are thin, medium, thick, or a length.
IMG {border-right-width: .5in;} -
• border-style-This property sets the style of the border on all sides of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. The color is set by border-color.
H1 {border-style: solid; border-color: red;} -
• border-top-This is a shorthand property that defines the width, the color, and the style of the top border of an element.
UL {border-top: 0.5in solid black;} -
• border-top-width-This property sets the width of the top border of an element. The border inherits the element's background, but it may have a foreground of its own (see border-style). Negative values are not allowed. Allowed values are thin, medium, thick, or a length.
UL {border-top-width: 0.5in;} -
• border-width-This property sets the width of the border on all sides of an element. The border inherits the element's background, but it may have a foreground of its own (see border-style). Negative values are not allowed. Allowed values are thin, medium, thick, or a length.
H1 {border-width: 2ex;} -
• clear-This property specifies which floating elements (if any) can be positioned on each side of the element (see also float). Possible values are left, right, both, and none.
H1 {clear: both;} -
• color-This property sets the color of a given element. For text, this sets the text color; for other elements, such as a horizontal line (HR), it sets the foreground color.
STRONG {color: red;} -
• display-This property classifies elements into broad categories. The most common value is none, but is useful when it's set to list-item (see the 'list-style-' properties). Allowed values are block, inline, list-item, and none.
.hide {display: none;} -
• first-letter-This pseudo-element applies to the first letter in an element. This property can be used to generate such things as drop cap effects and should only be applied to block-level elements.
P:first-letter {color: red;} <P>The letter 'T' at the beginning of this element is red.</P> -
• first-line-This is a pseudo-element that applies to the first displayed line of text in an element. If you resize the window and the first line is wrapped onto a second line, the line's properties will stay as you set them. This property should only be applied to block-level elements.
P:first-line {color: red;} <P>The first line of this element will be red. The second and other lines will be unaffected.</P> -
• float-This property sets the float characteristics for an element (see also clear). This property is often applied to images to allow text to flow around them, but it can be specified for any element. Possible values are left, right, and none.
IMG {float: left;} -
• font-This is a shorthand property for all the other font properties. The order of the values is important, and must be as follows:
font {font-style font-variant font-weight font-size/line-height font-family;}
Any of these properties can be omitted. As well as naming a specific font, you can specify a generic family, which is either serif (Times), sans-serif (Arial or Helvetica), cursive (Zapf-Chancery), fantasy (Western), or monospace (Courier).P {font: bold 12pt/14pt Helvetica,sans-serif;} -
• font-family-This property declares a specific font to be used, or a generic font family, or both. To cover systems where a font may not be present, you can specify more than one font in order of priority from left to right.
P {font-family: Arial,Helvetica,sans-serif;}
-
• font-size-This property sets the size of the font. The size can be an absolute size (xx-small, x-small, small, medium, large, x-large, or xx-large), a relative size (larger or smaller), a length, or a percentage.
H2 {font-size: 200%;} H3 {font-size: 36pt;} -
• font-style-This property selects the character style. Possible values are italic, oblique, and normal.
EM {font-style: italic;} -
• font-variant-In CSS1 this property has two values: small-caps and normal.
H3 {font-variant: small-caps;} -
• font-weight-This property sets the weight of a font, making it heavier or lighter. Possible values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900. The names are relative; the numerical values are absolute, but because not all fonts have nine weights, the closest weight may be chosen.
B {font-weight: 500;} -
• height-This property sets the height of an element. This is generally applied to images, but can be used on any block-level or replaced element. Negative values are not allowed. The height can be a length, a percentage, or the keyword auto (which is the default).
IMG.icon {height: 50px;} -
• important-This property declares that a style specification is important. Important specifications override any other declarations, regardless of their origin or specificity.
H1 {color: red ! important;} -
• letter-spacing-This property sets the amount of whitespace between letters (any displayed characters). Possible values are normal or a length.
P {letter-spacing: 0.5em;} -
• line-height-This property sets the vertical distance between baselines in an element. Negative values are not permitted. Possible values are normal, a number (which is multiplied by the font's number size, see font-size), a length, or a percentage.
P {line-height: 18pt;} H2 {line-height: 200%;} -
• list-style-This is a shorthand property for all the other list-style properties. The values apply to all elements with a display value of list-item (see display).
UL {list-style: square url(sqbullet.gif) outer;} -
• list-style-image-This property specifies an image to be used as the bullet in an unordered or ordered list. The value applies to elements with a display value of list-item.
UL {list-style-image: url(bullet3.gif);} -
• list-style-position-This property specifies the position of the bullet or number in an unordered or ordered list with respect to the content of the list item. The value applies to elements with a display value of list-item. Possible values are inside or outside, with outside being the default. If the value inside is used, the lines wrap under the marker instead of being indented.
LI {list-style-position: outside;} -
• list-style-type-This property specifies the type of bullet or numbering system to be used in an unordered or ordered list. The value applies to elements with a display value of list-item. Possible values are disc, circle, square, decimal (1,2,3), lower-roman (i,ii,iii) upper-roman (I,II,III), lower-alpha (a,b,c), upper-alpha (A,B,C), and none.
UL {list-style-type: square;} OL {list-style-type: lower-roman;} -
• margin-This property sets the size of the overall margin around an element. Negative values are allowed, but the contents of the element may then be obscured.
H1 {margin: 2ex;} -
• margin-bottom-This property sets the size of the margin below an element. Negative values are allowed, but the contents of the element may then be obscured.
UL {margin-bottom: 0.5in;} -
• margin-left-This property sets the size of the margin on the left of an element. Negative values are permitted, but be careful not to position the element beyond the edge of the window.
P {margin-left: 3em;} -
• margin-right-This property sets the size of the margin on the right of an element. Negative values are permitted, but be careful not to position the element beyond the edge of the window.
IMG {margin-right: 30px;} -
• margin-top-This property sets the size of the margin above an element. Negative values are allowed, but the contents of the element may then be obscured.
UL {margin-top: 0.5in;} -
• padding-This property sets the size of the padding on all sides of an element. The padding inherits the element's background. Negative values are not allowed.
H1 {padding: 2ex;} -
• padding-bottom-This property sets the size of the padding below an element. The padding inherits the element's background. Negative values are not allowed.
UL {padding-bottom: 0.5in;} -
• padding-left-This property sets the size of the padding on the left of an element. The padding inherits the element's background. Negative values are not allowed.
P {padding-left: 3em;} -
• padding-right-This property sets the size of the padding on the right of an element. The padding inherits the element's background. Negative values are not allowed.
IMG {padding-right: 30px;} -
• padding-top-This property sets the size of the padding below an element. The padding inherits the element's background. Negative values are not allowed.
UL {padding-top: 0.5in;} -
• text-align-This property sets the horizontal alignment of the text in an element. Possible values are left, right, center, and justify. The property can only be applied to block-level elements.
P {text-align: justify;} H4 {text-align: center;}
-
• text-decoration-This property sets certain effects for the text, such as underline and blink. Possible values are none, underline, overline, line-through, and blink. You can combine values.
STRONG {text-decoration: underline;} .old {text-decoration: line-through;} -
• text-indent-This property sets the indentation of the first line in an element. The property only applies to block-level elements. Negative values are allowed.
P {text-indent: 5em;} H2 {text-indent: -25px;} -
• text-transform-This property changes the case of the letters in an element, regardless of how the original text was typed. Possible values are none, capitalize, uppercase, and lowercase.
H1 {text-transform: lowercase;} .title {text-transform: capitalize;} -
• vertical-align-This property sets the vertical alignment of an element's baseline with respect to its parent element's line-height. This property can only be applied to inline elements (such as table cells). Negative values are allowed. Possible values are baseline, sub, super, top, text-top, middle, bottom, text-bottom, or a percentage.
SUP {vertical-align: super;} .fnote {vertical-align: 50%;} -
• white-space-This property defines how whitespace (spaces, tabs, and so on) within an element is to be treated. Possible values are normal (collapse multiple spaces into one), pre (don't collapse multiple spaces), nowrap (don't allow line wrapping without a <BR> tag).
DL {white-space: nowrap;} DD {white-space: pre;} -
• width-This property sets the width of an element. The property is normally only applied to images, but it can be used on any block-level or replaced element. Negative values are not allowed. The width can be a length, a percentage, or the keyword auto (which is the default).
TABLE {width: 80%;} -
• word-spacing-This property sets the amount of whitespace between words (strings of characters surrounded by whitespace). Possible values are normal or a length.
P {word-spacing: 0.5em;}