I made this table to help me remember cascading style sheet tags. I created this table using the book Web Design in a Nutshell by Jennifer Niederst (1999, O'Reilly & Associates). The organization of the table is similar to that of the book; however, the book provides more depth.
In the table, the rows alternate color with different tags to make it slightly easier to read. Shorthand tags such as background: or border: have a different background color than the rest of the table. In general, variables such as length are italicized; these variable must be replaced with a value (for example: 3em or 50px. Non-italicized values should be used as written.
The header links point to different pages. If you would like, you can see find the entire table here (it is rather long though).
| Tag | Value | Description |
|---|---|---|
| Type-Related Properties | ||
| font-family: | Specifies the desired font as a list with first choice, second choice, etc. | |
| "family name" | ||
| generic family name | Possible values: serif, sans-serif, monospace, cursive, and fantasy. | |
| font-style: | normal, italic, oblique | Allows one to choose the font style. |
| font-variant: | normal, Small-caps | Allows one to choose various font properties (there may be more variants supported in the future). |
| font-weight | normal, normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 | Specifies the "boldness" of the text. |
| font-size: | Specifies the size of the font used. | |
| absolute size | xx-small, x-small, small, medium, large, x-large, and xx-large | |
| relative size | larger and smaller | |
| length size | In units of em, ex, px, pt, pc, mm, cm, and in | |
| percentage size | Specifies a percent value of inherited size | |
| font: | A shorthand property for specifying font-specific styles. Must be in
following order (although some may be omitted): {font: weight style variant size/line-height font-names/s} | |
| color: | Provides the color of the text | |
| color name, RGB color value | Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. | |
| line-height: | normal, number, length, percentage | Sets the distance between the baselines of adjacent lines of text. For example, you could make an HTML page double-spaced by using BODY { line-height: 2em } |
| word-spacing: | normal, length | Specifies the amount of space placed between words in the text (i.e. the width of a "space"). |
| letter-spacing: | normal, length | Specifies the amount of space between characters |
| text-decoration: | none, underline, overline, line-through, blink | Applies "decoration" or effects to text. |
| vertical-align: | Affects the vertical alignment of an element. | |
| baseline | (Default) Aligns the baseline of the element with its parent element. | |
| bottom | Aligns the element's bottom with the lowest element on the line. | |
| middle | CSS1 Specification: "Aligns the vertical midpoint of the element with the baseline plus half the x-height of the parent." | |
| sub, sup | Makes it a subscript or superscript respectively. | |
| text-bottom, text-top | Aligns the bottom [top] with the bottom [top] of the parent element's font. | |
| top | Aligns the top of the element with the tallest element on the line. | |
| text-transform: | none, capitalize (capitalizes the first letter in each word), LOWERcase, Uppercase | Specifies the capitalization of the text. For example, in HTML I wrote "LOWERcase" and "Uppercase" in the previous cell. |
| text-align: | center, justify, left, right | Specifies the horizontal alignment of contained text elements |
| text-indent: | length, percentage | Specifies the first line indent. The book reports that negative values can be used for a hanging indent, but it isn't well supported. |
| Box Properties | ||
| Background Properties | ||
| Classification Properties | ||