By Eric A. Meyer
Basic Concepts
|
| 1.1 | Containment in HTML |
| 1.2 | Grouping |
Grouping allows the author to assign a single style declaration to multple elements.
H1, H2, H3, H5 {color: purple;} |
| 1.3 | Inheritance |
Inherited values are passed from parent to child. |
| 1.4 | Class 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.5 | ID 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.6 | Contextual 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.7 | Comments |
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.1 | anchor |
Applies to hyperlinks, but not named anchors. Styles can be applied to named anchors using the selector A without any pseudo-classes. |
| 2.3 | first-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.4 | first-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.1 | important |
Style declaration is declared important. Important declarations override all others.
H1 {color: maroon ! important;} |
| 3.2 | Cascading Order |
The way in which rules are combined and chosen; see the CSS1 specification for a detailed explanation. |
Font Properties
|
| 5.2.2 | font-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.3 | font-style |
Selects between italics, oblique, and normal.
EM {font-style: oblique;} |
| 5.2.4 | font-variant |
Currently has two values: small-caps and normal. Likely to acquire more values in the future.
H3 {font-variant: small-caps;} |
| 5.2.5 | font-weight |
Sets the weight of a font, making it heavier or lighter.
B {font-weight: 700;} |
| 5.2.6 | font-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.7 | font |
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.1 | color |
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.2 | background-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.3 | background-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.4 | background-repeat |
Sets the repeat style for a background image.
BODY {background-repeat: no-repeat;} |
| 5.3.5 | background-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.6 | background-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.7 | background |
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.1 | word-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.2 | letter-spacing |
Sets the amount of white space between letters, which are defined as any displayed character.
P {letter-spacing: 0.5em;} |
| 5.4.3 | text-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.4 | vertical-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.5 | text-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.6 | text-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.7 | text-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.8 | line-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.01 | margin-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.02 | margin-right |
Sets the size of the right margin of an element. Negative values are permitted, but exercise caution.
IMG {margin-right: 30px;} |
| 5.5.03 | margin-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.04 | margin-left |
Sets the size of the left margin of an element. Negative values are permitted, but exercise caution.
P {margin-left: 3em;} |
| 5.5.05 | margin |
Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution.
H1 {margin: 2ex;} |
| 5.5.06 | padding-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.07 | padding-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.08 | padding-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.09 | padding-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.10 | padding |
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.11 | border-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.12 | border-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.13 | border-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.14 | border-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.15 | border-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.16 | border-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.17 | border-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.18 | border-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.19 | border-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.20 | border-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.21 | border-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.22 | border |
Shorthand property which defines the width, color, and style of the overall border of an element.
H1 {border: 2px dashed tan;} |
| 5.5.23 | width |
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.24 | height |
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.25 | float |
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.26 | clear |
Defines which floating elements (if any) are allowed to exist to either side of the element.
H1 {clear: both;} |
Classification Properties
|
| 5.6.1 | display |
Used to classify elements into broad categories, although there may be limits. The most popular value is probably none.
.hide {display: none;} |
| 5.6.2 | white-space |
Defines how whitespace within the element is treated.
TD {white-space: nowrap;}
TT {white-space: pre;} |
| 5.6.3 | list-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.4 | list-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.5 | list-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.6 | list-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.1 | Length 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.2 | Percentage 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.3 | Color Units |
Used by various properties to define colors.
color: #FF00FF;
color: rgb(100%,0%,100%); |
| 6.4 | URLs |
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) |
