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 | ||
| Box Properties | ||
| 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 | ||
| Classification Properties | ||