CSS Properties
This page provides a quick reference for the CSS properties, for complete details refer to the Web Design Group's web page CSS section.
Application of these properties are based on the element type as described earlier in the "Element Categories" section.
Box Properties
| Name | Description | Possible Values | Element Types | Example | inherited |
| border | Sets border width, style and color. | See border width, style, and color | All | {border: medium solid green} | No |
| border-bottom | Set the bottom border width style, and color. | See border width, style, and color | All | {border-bottom: medium solid green} | No |
| border-bottom-width | Set the bottom border width | thin, medium, thick, or length value | All | {border-bottom-width: thin} | No |
| border-color | Set the border color | A color value, color, #RRGGBB | All | {border: #0000ff} | No |
| border-left | Set the left border width style, and color. | See border width, style, and color | All | {border-left: medium solid green} | No |
| border-left-width | Set the left border width | thin, medium, thick, or length value | All | {border-left-width: thin} | No |
| border-right | Set the right border width style, and color. | See border width, style, and color | All | {border-right: medium solid green} | No |
| border-right-width | Set the right border width | thin, medium, thick, or length value | All | {border-right-width: thin} | No |
| border-style | Sets border style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | All | {border: dashed} | No |
| border-top | Set the top border width style, and color. | See border width, style, and color | All | {border-top: medium solid green} | No |
| border-top-width | Set the top border width | thin, medium, thick, or length value | All | {border-top-width: thin} | No |
| border-width | Sets Border width. | thin, medium, thick, or length value | All | {border-width: 8} | No |
| clear | Determines where floating elements are allowed. | none, left, right, both | All | {clear: left} | No |
| float | Specifies how text is wrapped and where it is aligned. | none, left, right | All | {float: left} | No |
| height | Height of element | auto or a height value | Block elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT | {height: 200} | No |
| margin | Set element margin width. A single value sets all margins, two values set top and bottom, four values set top, right, bottom, and left margins. | auto, length value, or percent value | All | {margin: 4em 2em 4em 2em} | No |
| margin-bottom | Set element bottom margin | length value, or percent value | All | {margin-bottom: 4em} | No |
| margin-left | Set element left margin | length value, or percent value | All | {margin-left: 4em} | No |
| margin-right | Set element right margin | length value, or percent value | All | {margin-right: 4em} | No |
| margin-top | Set element top margin | length value, or percent value | All | {margin-top: 4em} | No |
| padding | Space between border and content. A single value sets all sides, two values set top/bottom and left/right, three values set top, right/left, and bottom, and four values set top, right, bottom, and left. | length value, or percent value | All | {padding: 4em} | No |
| padding-bottom | Space between bottom border and content. | length value, or percent value | All | {padding-bottom: 4em} | No |
| padding-left | Space between left border and content. | length value, or percent value | All | {padding-left: 4em} | No |
| padding-right | Space between right border and content. | length value, or percent value | All | {padding-right: 4em} | No |
| padding-top | Space between top border and content. | length value, or percent value | All | {padding-top: 4em} | No |
| width | Width of element | auto or a height value in length or percentage | Block elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT | {width: 40em} | No |
Background and Color Properties
| Name | Description | Possible Values | Element Types | Example | inherited |
| background | Set background color, repeat, image, attachment, or position. | See background-color, background-image, background-attachment, background-repeat, background-position | All | {background: #8080ff} | No |
| background-attachment | Determines if the background image is fixed or scroll. | scroll, fixed | All | {background-attachment: scroll} | No |
| background-color | Sets the background color. | Named or value color | All | {background-color: #8080ff} | No |
| background-image | Sets the background image. | url | All | {background-image: url('../../../../gifs/flowers.gif')} | No |
| background-position | Sets the background image initial position. | top, center, bottom, left, center, right, or percent values | Block and IMG, INPUT, TEXTAREA, SELECT, and OBJECT | {background-position: left top} | No |
| background-repeat | Sets how the background image is repeated. | repeat, repeat-x, repeat-y, no-repeat | All | {background-repeat: no-repeat} | No |
| color | Sets element color. | Named or value color | All | {color: green} | Yes |
Classification Properties
| Name | Description | Possible Values | Element Types | Example | inherited |
| display | Sets the type of element. | block, inline, list-item, none | All | {display: list-item} | No |
| list-style | Sets list style type and/or position. | See list-style-type and list-style-position | List-item | {list-style: circle} | Yes |
| list-style-image | Sets image to be used as the list item marker. | url | List-item | {list-style-image: url(this.gif)} | Yes |
| list-style-type | Sets list style type. | circle, disc, decimal, lower-alpha, lower-roman, none, square, upper-alpha, upper-roman | List-item | {list-style-type: square} | Yes |
| list-style-position | Sets where the marker is place relative to the text and its wrapping position. | inside, outside | List-item | {list-style: circle} | Yes |
| whitespace | Sets treatment of spaces inside the element. | normal, pre, nowrap | Block | {whitespace: pre} | Yes |
Font Properties
| Name | Description | Possible Values | Element Types | Example | inherited |
| font | Used to define font properties | See font-family, font-size, font-style, font-variant, and font-weight. | All | {font: 20pt} | Yes |
| font-family | Used to define font family to use | family name | All | {font-family: ariel roman} | Yes |
| font-size | Used to define font size to use | xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length value, or percent value | All | {font-size: 18pt} | Yes |
| font-style | Used to define font style to use | normal, italic, oblique | All | {font-style: italic} | Yes |
| font-variant | Used to determine whether to use normal or small caps | normal, small-caps | All | {font-variant: small-caps} | Yes |
| font-weight | Sets font weight. | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 | All | {font-weight: 600} | Yes |
Text Properties
| Name | Description | Possible Values | Element Types | Example | inherited |
| letter-spacing | Sets the space between characters. | normal or length value | All | {letter-spacing: 0.2em} | Yes |
| line-height | Sets the height of lines. | normal, a number, a percent of the element font size, | All | {line-height: 2} | Yes |
| text-align | Sets the alignment of text. | left, right, center, justify | Block | {text-align: center} | Yes |
| text-decoration | Sets the special decoration attributes of text. | none, overline, underline, line-through, blink | All | {text-decoration: blink} | No |
| text-indent | Sets the element's first line amount of indentation. | length or percentage value | Block | {text-indent: 5%} | Yes |
| text-transform | Transforms text to one of the set values. | none, capitalize, uppercase, lowercase | All | {text-transform: uppercase} | Yes |
| vertical-align | Sets vertical position. | baseline, sub. super, top, middle, bottom, text-top, text-bottom, or percent value | Inline | {vertical-align: sub} | No |
| word-spacing | Sets extra space between words. | normal or length value | All | {word-spacing: 0.2em} | Yes |
No comments:
Post a Comment