Grouping allows the author to assign a single style declaration to multple elements.

H1, H2, H3, H5 {color: purple;}

Inherited values are passed from parent to child.

Class selectors may be used to define types of data. A class selector is a string preceded by a period, and is called using the STYLE= attribute. The period does not appear in the value of STYLE.

.example {color: brown;}
     <P class="example">This is an example.</P>

ID selectors may be used to define types of data. An ID selector is a string preceded by a hash mark (#), and is called using the ID= attribute. The hash mark does not appear in the value of ID.

#i5 {color: brown;}
     <P ID="i5">This is text with an ID of 'i5'.</P>

These are used when styles should be applied to a given element under specific circumstances. Given in the form parent child, where the style is applied to the child element when parent is its parent.

H1 EM {color: red;}
     <H1>This is <EM>red</EM>.</H1>
     <P>This is <EM>not</EM>.</P>

Allows the author to leave comments in the style sheet. The format is identical to that used in most variants of C/C++.

/* This is a comment. */

Pseudo-Classes and Pseudo-Elements

Applies to hyperlinks, but not named anchors.

Applied to the first displayed line of text in the given element. This persists even if the window is resized and the text reformatted. Should be applied to block-level elements only.

P:first-line {color: red;}
     <P>The first line of this paragraph is red.  blah blah blah...</P>

Applied to the first letter in the given element. Can be used to generate drop-cap effects, among others. Should be applied to block-level elements only.

P:first-letter {color: purple;}
     <P>The capital 'T' at the beginning of this paragraph is purple.</P>

The Cascade

Style declaration is declared important. Important declarations override all others, regardless of origin or specificity.

H1 {color: maroon ! important;}

The way in which rules are combined and chosen; see the CSS1 specification for a detailed explanation.

Font Properties

Used to declare a specific font to be used (alternatives may be listed), or a generic font family, or both (names are case sensitive).

P {font-family: Helvetica,sans-serif;}

Selects between normal, italics, and oblique.

EM {font-style: oblique;}

Currently has two values: small-caps and normal. Likely to acquire more values in the future.

H3 {font-variant: small-caps;}

Sets the weight of a font, making it heavier or lighter.

B {font-weight: 700;}

Sets the size of the font. This can be defined in absolute size, relative size, or percentage.

H2 {font-size: 200%;}
H3 {font-size: 36pt;}

Shorthand property for the other font properties. The order of values is important, and is as follows: font {font-style font-variant font-weight font-size/line-height font-family;}. Any of these values may be omitted.

P {font: bold 12pt/14pt Helvetica,sans-serif;}

Color and Background Properties

Sets the color of a given element. For text, this sets the text color; for other elements, such as HR, it sets the foreground color.

STRONG {color: teal;}

Sets the background color of an element. This background extends out to the edge of the element's border.

H4 {background-color: white;}

Sets an image to be the background pattern. In conjunction with the other background properties, may tile or repeat in one direction only.

BODY {background-image: url(bg41.gif);}

Sets the repeat style for a background image.

BODY {background-repeat: no-repeat;}

Defines whether or not the background image scrolls with the element. Generally applied to BODY only, as it makes little sense with most other elements.

BODY {background-attachment: scroll;}

BODY {background-attachment: fixed;}

Sets the starting position of the background color or image. If a color, the color fill continues from the set position. If an image, the first image is placed at the set position, and repeating is determined by background-repeat.

BODY {background-position: top center;}

Shorthand property for the other background properties. The values can be written in any order.

BODY {background: white url(bg41.gif) fixed center;}

Text Properties

Sets the amount of white space between words, which are defined as strings of characters surrounded by white space.

P {word-spacing: 0.5em;}

Sets the amount of white space between letters, which are defined as any displayed character .

P {letter-spacing: 0.5em;}

Sets certain effects to the text, such as underline and blink. Combinations of the values are legal.

U {text-decoration: underline;}
.old {text-decoration: line-through;}

Sets the vertical alignment of an element's baseline with respect to its parent element's line-height. May only be applied to inline elements; negative values are permitted.

SUP {vertical-align: super;}
.ftnote {vertical-align: 50%;}

Changes the case of the letters in the element, regardless of the original text.

H1 {text-transform: uppercase;}
.title {text-transform: capitalize;}

Sets the horizontal alignment of the text in an element. May only be applied to block-level elements.

P {text-align: justify;}
H4 {text-align: center;}

Sets the indentation of the first line in an element. Most often used to create a tab effect for paragraphs. Only applies to block-level elements; negative values are permitted.

P {text-indent: 5em;}
H2 {text-indent: -25px;}

Sets the vertical distance between baselines in an element. Negative values are not permitted.

P {line-height: 18pt;}
H2 {line-height: 200%;}

Box Properties

Sets the size of the top margin of an element. Negative values are permitted, but exercise caution.

UL {margin-top: 0.5in;}

Sets the size of the right margin of an element. Negative values are permitted, but exercise caution.

IMG {margin-right: 30px;}

Sets the size of the bottom margin of an element. Negative values are permitted, but exercise caution.

UL {margin-bottom: 0.5in;}

Sets the size of the left margin of an element. Negative values are permitted, but exercise caution.

P {margin-left: 3em;}

Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution.

H1 {margin: 2ex;}

Sets the size of the top padding of an element, which will inherit the element's background. Negative values are not permitted.

UL {padding-top: 5mm;}

Sets the size of the right padding of an element, which will inherit the element's background. Negative values are not permitted.

IMG {padding-right: 30px;}

Sets the size of the bottom padding of an element, which will inherit the element's background. Negative values are not permitted.

UL {padding-bottom: 0.5in;}

Sets the size of the left padding of an element, which will inherit the element's background. Negative values are not permitted.

P {padding-left: 3em;}

Sets the size of the overall padding of an element, which will inherit the element's background. Negative values are not permitted.

H1 {padding: 2ex;}

Sets the width of the top border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

UL {border-top-width: 0.5in;}

Sets the width of the right border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

IMG {border-right-width: 30px;}

Sets the width of the bottom border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

UL {border-bottom-width: 0.5in;}

Sets the width of the left border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

P {border-left-width: 3ex;}

Sets the width of the overall border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

H1 {border-width: 2ex;}

Sets the color of the foreground of the overall border of an element (see border-style), which will inherit the element's background.

H1 {border-color: purple; border-style: solid;}

Sets the style of the overall border of an element, using the color set by border-color.

H1 {border-style: solid; border-color: purple;}

Shorthand property which defines the width, color, and style of the top border of an element.

UL {border-top: 0.5in solid black;}

Shorthand property which defines the width, color, and style of the right border of an element.

IMG {border-right: 30pc dotted blue;}

Shorthand property which defines the width, color, and style of the bottom border of an element.

UL {border-bottom: 0.5in grooved green;}

Shorthand property which defines the width, color, and style of the left border of an element.

P {border-left: 3em solid gray;}

Shorthand property which defines the width, color, and style of the overall border of an element.

H1 {border: 2px dashed tan;}

Used to set the width of an element. Most oftern applied to images, but can be used on any block-level or replaced element. Negative values are not permitted.

TABLE {width: 80%;}

Used to set the height of an element. Most oftern applied to images, but can be used on any block-level or replaced element, within limits. Negative values are not permitted.

IMG.icon {height: 50px;}

Sets the float for an element. Generally applied to images in order to allow text to flow around them, but any element may be floated.

IMG {float: left;}

Defines which floating elements (if any) are allowed to exist to either side of the element.

H1 {clear: both;}

Classification Properties

Used to classify elements into broad categories, although there may be limits. The most popular value is probably none.

.hide {display: none;}

Defines how whitespace within the element is treated.

TD {white-space: nowrap;}
TT {white-space: pre;}

Used to declare the type of 'bullet' or numbering system to be used in an unordered or ordered list. Applies to elements with a display value of list-item.

UL {list-style-type: square;}
OL {list-style-type: lower-roman;}

Used to declare an image to be used as the 'bullet' in an unordered or ordered list. Applies to elements with a display value of list-item.

UL {list-style-image: url(bullet3.gif);}

Used to declare the position of the 'bullet' or number in an unordered or ordered list with respect to the content of the list item. Applies to elements with a display value of list-item.

LI {list-style-position: outer;}

Shorthand property condensing all other list-style properties. Applies to all elements with a display value of list-item.

UL {list-style: square url(bullet3.gif) outer;}

Positioning Properties

Units

Used by various properties to define size in absolute terms; i.e., distances which will be consistent regardless of their context.

width: 50px;
margin-left: 2em;

Used by various properties to define size in relative terms; i.e., distances which will be calculated with regard to their context.

width: 80%;

Used by various properties to define colors.

color: #FF00FF;
color: rgb(100%,0%,100%);

Used by various properties to define the location of images. Partial URLs are extraplolated relative to the style sheet, not the HTML document.

url('earthelectron.jpg')
url('http://www.computersmiths.com/images/earth.jpg')