Overview of the CSS Specification

Author: Tripp W Black

Created: 03/23/2001 at 12:43 AM

 

Category:
General Web Tips
Style Sheets (CSS)

WebReview.com
By Eric A. Meyer

Basic Concepts
1.1Containment in HTML
1.2GroupingGrouping allows the author to assign a single style declaration to multple elements.
H1, H2, H3, H5 {color: purple;}
1.3InheritanceInherited values are passed from parent to child.
1.4Class as selectorClass 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 selectorID 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 selectorsThese 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.7CommentsAllows 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.1anchorApplies to hyperlinks, but not named anchors. Styles can be applied to named anchors using the selector A without any pseudo-classes.
2.3first-lineApplied 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-letterApplied 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.1importantStyle declaration is declared important. Important declarations override all others.
H1 {color: maroon ! important;}
3.2Cascading OrderThe way in which rules are combined and chosen; see the CSS1 specification for a detailed explanation.
Font Properties
5.2.2font-familyUsed to declare a specific font to be used, or a generic font family, or both.
P {font-family: Helvetica,sans-serif;}
5.2.3font-styleSelects between italics, oblique, and normal.
EM {font-style: oblique;}
5.2.4font-variantCurrently has two values: small-caps and normal. Likely to acquire more values in the future.
H3 {font-variant: small-caps;}
5.2.5font-weightSets the weight of a font, making it heavier or lighter.
B {font-weight: 700;}
5.2.6font-sizeSets 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.7fontShorthand 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.1colorSets 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-colorSets 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-imageSets 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-repeatSets the repeat style for a background image.
BODY {background-repeat: no-repeat;}
5.3.5background-attachmentDefines 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-positionSets 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.7backgroundShorthand 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-spacingSets 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-spacingSets the amount of white space between letters, which are defined as any displayed character.
P {letter-spacing: 0.5em;}
5.4.3text-decorationSets 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-alignSets 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-transformChanges the case of the letters in the element, regardless of the original text.
H1 {text-transform: uppercase;}
.title {text-transform: capitalize;}
5.4.6text-alignSets 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-indentSets 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-heightSets 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-topSets the size of the top margin of an element. Negative values are permitted, but exercise caution.
UL {margin-top: 0.5in;}
5.5.02margin-rightSets the size of the right margin of an element. Negative values are permitted, but exercise caution.
IMG {margin-right: 30px;}
5.5.03margin-bottomSets the size of the bottom margin of an element. Negative values are permitted, but exercise caution.
UL {margin-bottom: 0.5in;}
5.5.04margin-leftSets the size of the left margin of an element. Negative values are permitted, but exercise caution.
P {margin-left: 3em;}
5.5.05marginSets the size of the overall margin of an element. Negative values are permitted, but exercise caution.
H1 {margin: 2ex;}
5.5.06padding-topSets 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-rightSets 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-bottomSets 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-leftSets 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.10paddingSets 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-widthSets 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-widthSets 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-widthSets 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-widthSets 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-widthSets 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-colorSets 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-styleSets 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-topShorthand 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-rightShorthand property which defines the width, color, and style of the right border of an element.
IMG {border-right: 30px dotted blue;}
5.5.20border-bottomShorthand 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-leftShorthand property which defines the width, color, and style of the left border of an element.
P {border-left: 3em solid gray;}
5.5.22borderShorthand property which defines the width, color, and style of the overall border of an element.
H1 {border: 2px dashed tan;}
5.5.23widthUsed 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.24heightUsed 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.25floatSets 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.26clearDefines which floating elements (if any) are allowed to exist to either side of the element.
H1 {clear: both;}
Classification Properties
5.6.1displayUsed to classify elements into broad categories, although there may be limits. The most popular value is probably none.
.hide {display: none;}
5.6.2white-spaceDefines how whitespace within the element is treated.
TD {white-space: nowrap;}
TT {white-space: pre;}
5.6.3list-style-typeUsed 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-imageUsed 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-positionUsed 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-styleShorthand 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 UnitsUsed 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 UnitsUsed 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 UnitsUsed by various properties to define colors.
color: #FF00FF;
color: rgb(100%,0%,100%);
6.4URLsUsed 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)


previous page