I made this table to help me remember the many cascading style sheet tags. If you would like more information, I would recommend the Web Developer's Group (WDG) CSS Guide or the World Wide Web Consortium's (W3C) CSS Specifications. 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.
| 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 (To top of table) | ||
| margin-top:, margin-bottom:, margin-right:, margin-left: | length, percentage, auto | Specifies the margins of the element (box). Possible units: px, pt, pc, em, ex, in, mm, cm. |
| margin: | Shorthand for specifying an element's margins. (Think
clockwise...) With 4 values: { margin: top right bottom left } With 3 values: { margin: top sides bottom } With 2 values: { margin: vertical_margins horizontal_margins } With 1 value: applies the same margin to each side of the element | |
| Example:
{ margin: 5px 7pc 0.5em auto }
Example Number 1 | ||
| padding-top:, padding-bottom:, padding-right:, padding-left: | length, percentage | Specifies the padding between an elements contents and its border. |
| padding: | Shorthand for specifying the padding on all sides of the element. Values are the same as for "margin:" | |
| Example:
{ padding: 5px 7pc 0.5em auto }
Example Number 2 | ||
| border-top-width:, border-bottom-width:, border-left-width:, border-right-width: | thin, medium, thick, length | Specifies the thickness of the border on each side of the element. Thin, medium, thick are not related to the parent's font size. |
| border-width: | Shorthand for specifying the border on all sides of the element. Values are the same as for "margin:" | |
| Example:
{ border-width: 2px thin 0.5em thick }
Example Number 3 | ||
| border-color: | color name, RGB value | Specifies the color of the border. With more than one specified value, the colors are set in a clockwise fashion (see "margin:"). |
| Example:
{ border-color: red lime teal blue }
Example Number 4 | ||
| border-style: | none, dotted, dashed, solid, double, groove, ridge, inset, outset | Sets the style of the border. With more than one specified value, the styles are set in a clockwise fashion (see "margin:"). |
| Example:
{ border-style: ridge outset double groove }
Example Number 5 | ||
| border-top:, border-bottom:, border-left:, border-right: | A shortcut for specifying border properties. Must be in the following order: { border-width border-style border-color } | |
| border: | Specifies the border properties for all sides at once in the following order: { border-width border-style border-color } | |
| width: | length, percentage, auto | Sets the width of the element. One can change the size of a textbox or resize an image with this tag. |
| height: | length, percentage, auto | Sets the height of the element. |
| float: | left, right, none | Allows text to wrap around images. |
| clear: | none, left, fight, both | This "stops" text from wrapping around other elements. It specifies the sides along which a floating element is not allowed. |
| Background Properties (To top of table) | ||
| background-color: | transparent, color name, RGB color | Sets the element's background color. The WDG recommends that the element's background-image also be set (to none if necessary). |
| background-image: | url(image-url), none | Sets a background image for the element. The specified image will be overlaid over the background color. |
| background-repeat: | This tag specifies the tiling properties of the background image. | |
| repeat | Tiles the background in both X- and Y-directions. | |
| repeat-x | Tiles the background horizontally. | |
| repeat-y | Tiles the background vertically. | |
| no-repeat | The background does not tile. | |
| background-attachment: | scroll, fixed | Determines whether the background scrolls with the document (default) or remains stationary as the user scrolls (like a "watermark"). |
| background-position: | percentage percentage, length length, top/center/bottom left/center/right | The background position is described by paired values: vertical position and horizontal position. The origins of the element and image are considered to be their upper left corners. |
| background: | Allows one to specify all background properties with one tag in the following order: background-color background-image background-repeat background-attachment background-position. | |
| Classification Properties (To top of table) | ||
| display: | Specifies how and if an element is to be displayed | |
| block | Opens a new box that is positioned relative to adjacent boxes. | |
| inline | Opens a new box that is on the same line as previous content. | |
| list-item | Is the same as block but a list-item marker or bullet is added. | |
| none | Hides the element and closes up the space it would have occupied. | |
| white-space: | Specifies how white space (i.e. spaces and tabs) in the source code is treated. | |
| normal | Treats text as normal HTML with multiple spaces and line breaks being ignored | |
| pre | Treats text as written, much like the <PRE> HTML tag, except not necessarily in the monospace font. | |
| nowrap | Prevents text from wrapping. | |
| list-style-type: | Specifies the appearance of list-items. | |
| disc, circle, square | Example:
| |
| decimal, lower-roman, upper-roman, lower-alpha, upper-alpha | Example:
| |
| none | Removes bullets/numbering from list-items. | |
| list-style-image: | url(image-url), none | Specifies an image or bullet to be used for list-items. |
| list-style-position: | Specifies whether a multi-line list item should have a hanging indent or not. | |
| inside | Subsequent lines of a list item wrap all the way to the left under the list item marker or bullet. | |
| outside | Subsequent lines of a list item start under the initial word on the first line; hanging indent. | |
| list-style: | A shorthand attribute for specifying list-style formatting in the following order: list-style-type list-style-image list-style-position. | |