Property Chart
This table details a few common CSS properties and their syntax. There are, of course, many more that are not covered here. To read about properties which are not covered here, explore the W3C CSS Property List.
Text
| Element: syntax | Description | Example | Other Possible Values |
|---|---|---|---|
| font-size: size | Sets the size of the text | font-size: 20px; | 200%, 2em, absolute-size, relative-size, etc. See More Here: Font Size Properties |
| font-family: family | Sets the prioritized list of font family names and/or generic family names | font-family: Arial, Times; | Helvetica, sans-serif, fantasy, Courier, etc. |
| font-weight: weight | Selects the weight of the font | font-weight: bold; | normal, lighter, inherit, etc. |
| font-style: style | Selects between normal, italic and oblique faces within a font family | font-style: italic; | normal, oblique, inherit |
| text-decoration: decoration | Describes decorations that are added to the text of an element using the element’s color | text-decoration: underline; | none, overline, blink, etc. |
| text-align: alignment | Sets the alignment of the element’s text | text-align: center; | right, left, justify, inherit |
| color: color | Sets the font color | color: #FF00FF; | #rrggbb (any combination), transparent, inherit |
Lists
For use specifically with ul, ol, and li elements.
| Element: syntax | Description | Example | Other Possible Values |
|---|---|---|---|
| list-style: style | Changes the default way a list displays | list-style: url(“images/list.gif”) inside; | outside, etc. |
| list-style-type: type | Changes the default type of listed item | list-style-type: disc; | circle, square, lower-roman, decimal, etc. |
| list-style-image: image | Changes the default image to use as a marker | list-style-image: url(bullet.gif); | any url, none, inherit |
Frequently Used Styling Elements
| Element: syntax | Description | Example | Other Possible Values |
|---|---|---|---|
| background-color: color | Specifies the background color of the element | background-color: #0000FF; | #rrggbb (any combination), transparent, inherit |
| margin: amount | A shorthand property for setting ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ at the same place in the style sheet | margin: 10px 20px; | See more here: Margin Properties |
| padding: amount | A shorthand property for setting ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’ at the same place in the style sheet | padding: 30px 60px; | See more here: Padding Properties |
| clear: side | Indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box | clear: both; | none, left, right, inherit |
| float: side | Specifies whether a box should float to the left, right, or not at all | float: left; | right, none, inherit |
| width: size | specifies the content width of boxes | width: 100em; | 100%, auto, inherit |
| height: size | Specifies the content height of boxes | height: 200%; | 200em, auto, inherit |
| max-width: size | specifies the maximum content width of boxes | width: 250px; | 100%, auto, inherit |
| max-height: size | Specifies the maximum content height of boxes | height: 300px; | 200em, auto, inherit |
| border: amount | A shorthand property for setting the same width, color, and style for all four borders of a box | border: 1px solid #000000; | See more here: Border Properties |
| border-collapse: style | Specifies if a table’s borders are expanded or collapsed. | border-collapse: collapse; | separate |