Overview of the CSS Specification

By Eric A. Meyer

Published under a Creative Commons license.

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 CLASS= attribute. The period does not appear in the value of CLASS. Classes may not begin with a number under CSS1.
.example {color: brown;}
     <P class="example">This is an example.</P>
1.5ID as selector ID selectors may be used to define unique elements within the document. 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. IDs may not begin with a number under CSS1.
#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. Styles can be applied to named anchors using the selector A without any pseudo-classes.
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.
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)