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 | ||
| Background Properties | ||
| 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 | ||
| 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. | |