Aperçu des spécifications CSS
source : www.webreview.com (01/04/99) Eric Meyer

Basic Concepts

1.1Containment in HTML  
1.2Grouping

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

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

Inherited values are passed from parent to child.

1.4Class as selector

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>
1.5ID as selector

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>
1.6Contextual selectors

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>
1.7Comments

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

2.1anchor

Applies to hyperlinks, but not named anchors.

2.3first-line

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>
2.4first-letter

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

3.1important

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

H1 {color: maroon ! important;}
3.2Cascading Order

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

Font Properties

5.2.2font-family

Used to declare a specific font to be used, or a generic font family, or both.

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

Selects between italics, oblique, and normal.

EM {font-style: oblique;}
5.2.4font-variant

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

H3 {font-variant: small-caps;}
5.2.5font-weight

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

B {font-weight: 700;}
5.2.6font-size

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;}
5.2.7font

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

5.3.1color

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

STRONG {color: teal;}
5.3.2background-color

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

H4 {background-color: white;}
5.3.3background-image

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);}
5.3.4background-repeat

Sets the repeat style for a background image.

BODY {background-repeat: no-repeat;}
5.3.5background-attachment

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;}
5.3.6background-position

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;}
5.3.7background

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

5.4.1word-spacing

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

P {word-spacing: 0.5em;}
5.4.2letter-spacing

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

P {letter-spacing: 0.5em;}
5.4.3text-decoration

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;}
5.4.4vertical-align

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

SUP {vertical-align: super;}
.fnote {vertical-align: 50%;}
5.4.5text-transform

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

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

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;}
5.4.7text-indent

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;}
5.4.8line-height

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

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

Box Properties

5.5.01margin-top

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

UL {margin-top: 0.5in;}
5.5.02margin-right

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

IMG {margin-right: 30px;}
5.5.03margin-bottom

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

UL {margin-bottom: 0.5in;}
5.5.04margin-left

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

P {margin-left: 3em;}
5.5.05margin

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

H1 {margin: 2ex;}
5.5.06padding-top

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: 0.5in;}
5.5.07padding-right

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;}
5.5.08padding-bottom

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;}
5.5.09padding-left

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;}
5.5.10padding

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;}
5.5.11border-top-width

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;}
5.5.12border-right-width

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;}
5.5.13border-bottom-width

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;}
5.5.14border-left-width

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: 3em;}
5.5.15border-width

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;}
5.5.16border-color

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;}
5.5.17border-style

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

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

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

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

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

IMG {border-right: 30px dotted blue;}
5.5.20border-bottom

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

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

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

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

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

H1 {border: 2px dashed tan;}
5.5.23width

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%;}
5.5.24height

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;}
5.5.25float

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;}
5.5.26clear

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

H1 {clear: both;}

Classification Properties

5.6.1display

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

.hide {display: none;}
5.6.2white-space

Defines how whitespace within the element is treated.

TD {white-space: nowrap;}
TT {white-space: pre;}
5.6.3list-style-type

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;}
5.6.4list-style-image

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);}
5.6.5list-style-position

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;}
5.6.6list-style

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;}

Units

6.1Length 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;
6.2Percentage Units

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

width: 80%;
6.3Color Units

Used by various properties to define colors.

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

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

url(picture.gif)
url(http://www.pix.org/lib1/pic278.gif)