CSS Reference II - Web Development - Neils Resource Web| Font Properties | |||
| Property | Valid Values | Example | Inherited? |
| font-family | [font name or type] | font-family: Verdana, Arial; | Y |
| font-style | normal | italic | font-style:italic; | Y |
| font-variant | normal | small-caps | font-variant:small-caps; | Y |
| font-weight | normal | bold | font-weight:bold; | Y |
| font-size | [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length | font-size:12pt; | Y |
| font | [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family | font: bold 12pt Arial; | Y |
| Colour and Background Properties | |||
| Property | Valid Values | Example | Inherited? |
| color | color | color: red | Y |
| background-color | color | transparent | background-color: yellow | N* |
| background-image | url | none | background-image: url(house.jpg) | N* |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | background-repeat: no-repeat | N* |
| background-attachment | scroll | fixed | background-attachment: fixed | N* |
| background-position | [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] | background-position: top center | N* |
| background | transparent | color || url || repeat || scroll || position | background: silver url(house.jpg) repeat-y | N* |
| Text Properties | |||
| Property | Valid Values | Example | Inherited? |
| letter-spacing | normal | length | letter-spacing:5pt | Y |
| text-decoration | none | underline | overline | line-through | text-decoration: underline | N |
| vertical-align | sub | super | | vertical-align:sub | N |
| text-transform | capitalize | uppercase | lowercase | none | text-transform: Uppercase | N |
| text-align | left | right | center | justify | text-align: center | N |
| text-indent | length | percentage | text-indent:25px | N |
| line-height | normal | number | length | percentage | line-height:15pt | N |
| Box Properties | |||
| Property | Valid Values | Example | Inherited? |
| margin-top | length | percentage | auto | margin-top:5px | N |
| margin-right | length | percentage | auto | margin-right:5px | N |
| margin-bottom | length | percentage | auto | margin-bottom:1em | N |
| margin-left | length | percentage | auto | margin-left:5pt | N |
| margin | length | percentage | auto {1,4} | margin: 10px 5px 10px 5px | N |
| padding-top | length | percentage | padding-top:10% | N |
| padding-right | length | percentage | padding-right:15px | N |
| padding-bottom | length | percentage | padding-bottom:1.2em | N |
| padding-left | length | percentage | padding-left:10pt; } | N |
| padding | length | percentage {1,4} | padding: 10px 10px 10px 15px | N |
| border-top-width | thin | medium | thick | length | border-top-width:thin | N |
| border-right-width | thin | medium | thick | length | border-right-width:medium | N |
| border-bottom-width | thin | medium | thick | length | border-bottom-width:thick | N |
| border-left-width | thin | medium | thick | length | border-left-width:15px | N |
| border-width | thin | medium | thick | length {1,4} | border-width: 3px 5px 3px 5px | N |
| border-top-color | color | border-top-color:navajowhite | N |
| border-right-color | color | border-right-color:whitesmoke | N |
| border-bottom-color | color | border-bottom-color:black | N |
| border-left-color | color | border-left-color:#C0C0C0 | N |
| border-color | color {1,4} | border-color: green red white blue; } | N |
| border-top-style | none | solid | double | groove | ridge | inset | outset | border-top-style:solid | N |
| border-right-style | none | solid | double | groove | ridge | inset | outset | border-right-style:double | N |
| border-bottom-style | none | solid | double | groove | ridge | inset | outset | border-bottom-style:groove | N |
| border-left-style | none | solid | double | groove | ridge | inset | outset | border-left-style:none | N |
| border-style | none | solid | double | groove | ridge | inset | outset | border-style:ridge; } | N |
| border-top | border-width | border-style | border-color | border-top: medium outset red | N |
| border-right | border-width | border-style | border-color | border-right: thick inset maroon | N |
| border-bottom | border-width | border-style | border-color | border-bottom: 10px ridge gray | N |
| border-left | border-width | border-style | border-color | border-left: 1px groove red | N |
| border | border-width | border-style | border-color | border: thin solid blue | N |
| float | none | left | right | float:none | N |
| clear | none | left | right | both | clear:left | N |
| Classification Properties | |||
| Property | Valid Values | Example | Inherited? |
| display | none | block | inline | list-item | display:none | N |
| list-style-type | disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | list-style-type:upper-alpha | Y |
| list-style-image | url | none | list-style-image:url(icFile.gif) | Y |
| list-style-position | inside | outside | list-style-position:inside | Y |
| list-style | keyword || position || url | list-style: square outside url(icFolder.gif) | Y |
| Positioning Properties | ||||
| Property | Valid Values | Example | Applies to | Inherited? |
| clip | shape | auto | clip:rect(0px 200px 200px 0px) | all elements | N |
| height | length | auto | height:200px | DIV, SPAN and replaced elements | N |
| left | length | percentage | auto | left:0px | absolutely and relatively positioned elements | N |
| overflow | visible | hidden | scroll | auto | overflow:scroll | all elements | N |
| position | absolute| relative | static | position:absolute | all elements | N |
| top | length | percentage | auto | top:0px | absolutely and relatively positioned elements | N |
| visibility | visible | hidden | inherit | visibility:visible | all elements | N |
| width | length | percentage | auto | width:80% | DIV, SPAN and replaced elements | N |
| z-index | auto | integer | z-index:-1 | absolutely and relatively positioned elements | N |
| Printing Properties | |||
| Property | Valid Values | Example | Inherited? |
| page-break-before | auto | always || left | right | page-break-before:always | N |
| page-break-after | auto | always || left | right | page-break-before:auto | N |
| Pseudo Classes | |||
| Property | Valid Values | Example | Inherited? |
| cursor | auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | { cursor:hand; } | Y |
| active, hover, link, visited | n/a | a:hover { color:red; } | Y |
| first-letter, first-line | any font manipulating declaration | p:first-letter{ float:left;color:blue } |
N |
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Updated05/03/2008 - >CSS - Cascading Style Sheets Reference - Neils Resource Web
