Style Sheet Reference Guide
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) |