Font | Color and Background | Text | Box | Lists | Scrollbars | Positioning | Pseudo

Font Properties- Apply to p, table, tr, td, H, ul, dl, ol, a, span, div, form elements. Remember you can also create classes of these tags(ie. p.intro) and specific id numbers of these elements(ie. p#thisone).
Property Valid Values Example
font-family [font name or type] font-family: Verdana, Arial;
font-style normal | italic font-style:italic;
font-variant normal | small-caps font-variant:small-caps;
font-weight normal | bold font-weight:bold;
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length font-size:12pt;
font(applies all properties in one) [ font-style || font-variant || font-weight ] font-size font-family font: bold 12pt Arial;
Color and Background Properties- Apply to body element as well as p, table, tr, td, H, ul, dl, ol, a, span, div, form elements. Remember you can also create classes of these tags(ie. p.intro) and specific id numbers of these elements(ie. p#thisone).
Property Valid Values Example
color colorname | r,g,b | #rrggbb color: red
background-color colorname | #rrggbb background-color: #ffffcc
background-image url(imagename) background-image: url(rholl.jpg)
background-repeat repeat | repeat-x | repeat-y | no-repeat background-repeat: no-repeat
background-attachment scroll | fixed background-attachment: fixed
background-position [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ](useful to position one background image in a fixed position). see example background-position: top center
background transparent | color || url || repeat || scroll || position background: silver url(rholl.jpg) repeat-y
Text Properties- Apply to p, table, tr, td, H, ul, dl, ol, a, span, div, form elements. Remember you can also create classes of these tags(ie. p.intro) and specific id numbers of these elements(ie. p#thisone).
Property Valid Values Example
letter-spacing normal | length letter-spacing:5pt
word-spacing normal | length word-spacing:10pt
text-decoration none | underline | overline | line-through text-decoration:underline
vertical-align sub | super | top | bottom | middle | text-top | text-bottom vertical-align:sub
text-transform capitalize | uppercase | lowercase | none text-transform:lowercase
text-align left | right | center | justify text-align:center
text-indent length | percentage text-indent:25px
line-height normal | number | length | percentage line-height:15pt
Box Properties- Applied to the whole body. Or apply to span and div elements. Span and div are sectioning tags. Boxes work much like tables in HTML but have more flexibility. Remember you can also create classes of these tags(ie. span.dude) and specific id numbers of these elements(ie. div#thisone).
Property Valid Values Example
margin-top length | percentage | auto margin-top:5px
margin-right length | percentage | auto margin-right:5px
margin-bottom length | percentage | auto margin-bottom:1em
margin-left length | percentage | auto margin-left:5pt
margin length | percentage | auto {1,4} margin: 10px 5px 10px 5px
padding-top length | percentage padding-top:10%
padding-right length | percentage padding-right:15px
padding-bottom length | percentage padding-bottom:1.2em
padding-left length | percentage padding-left:10pt;
padding length | percentage {1,4} padding: 10px 10px 10px 15px
border-top-width thin | medium | thick | length border-top-width:thin
border-right-width thin | medium | thick | length border-right-width:medium
border-bottom-width thin | medium | thick | length border-bottom-width:thick
border-left-width thin | medium | thick | length border-left-width:15px
border-width thin | medium | thick | length {1,4} border-width: 3px 5px 3px 5px
border-top-color color border-top-color:navajowhite
border-right-color color border-right-color:whitesmoke
border-bottom-color color border-bottom-color:black
border-left-color color border-left-color:#C0C0C0
border-color color {1,4} border-color: green red white blue;
border-top-style none | solid | double | groove | ridge | inset | outset border-top-style:solid
border-right-style none | solid | double | groove | ridge | inset | outset border-right-style:double
border-bottom-style none | solid | double | groove | ridge | inset | outset border-bottom-style:groove
border-left-style none | solid | double | groove | ridge | inset | outset border-left-style:none
border-style none | solid | double | groove | ridge | inset | outset border-style:ridge;
border-top border-style | border-width | border-color border-top: medium outset red
border-right border-style | border-width | border-color border-right: thick inset maroon
border-bottom border-style | border-width | border-color border-bottom: 10px ridge gray
border-left border-style | border-width | border-color border-left: 1px groove red
border border-style | border-width | border-color border: solid thin blue
float none | left | right float:none
clear none | left | right | both clear:left
Lists Properties- Applied to ul, ol, or dl. Remember you can also create classes of these tags(ie. ul.fred) and specific id numbers of these elements(ie. ol#thisone).
Property Valid Values Example
list-style-type disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none list-style-type:upper-alpha
list-style-image url | none list-style-image:url(icFile.gif)
list-style-position inside | outside list-style-position:inside
list-style keyword || position || url list-style: square outside url(icFolder.gif)
Scrollbar Properties- Applied to the whole body. Or apply to frameset elements. Note: Not supported by W3C
Property Valid Values Example
scrollbar-face-color colorname | #rrggbb | r,g,b scrollbar-face-color:red
scrollbar-shadow-color colorname | #rrggbb | r,g,b scrollbar-shadow-color:#ff44cc
scrollbar-highlight-color colorname | #rrggbb | r,g,b scrollbar-highlight-color:55,124,255
scrollbar-3dlight-color colorname | #rrggbb | r,g,b scrollbar-3dlight-color:#000000
scrollbar-track-color colorname | #rrggbb | r,g,b scrollbar-track-color:green
scrollbar-arrow-color colorname | #rrggbb | r,g,b scrollbar-arrow-color:255,255,255
Positioning Properties- Applied to various elements(see below).
Property Valid Values Example Applies to
clip shape | auto clip:rect(0px 200px 200px 0px) all elements
height length | auto height:200px DIV, SPAN and replaced elements
left length | percentage | auto left:0px absolutely and relatively positioned elements
overflow visible | hidden | scroll | auto overflow:scroll all elements
position absolute | relative | static position:absolute all elements
top length | percentage | auto top:0px absolutely and relatively positioned elements
visibility visible | hidden | inherit visibility:visible all elements
width length | percentage | auto width:80% DIV, SPAN and replaced elements
z-index auto | integer z-index:-1 absolutely and relatively positioned elements
Pseudo Properties- Applied to various elements(see below).
Property Valid Values Example Applies to
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; } body and frame elements
a:active, a:hover, a:link, a:visited colorname a:hover { color:red; } a
filter Alpha | Blur | Chroma | DropShadow | FlipH | FlipV | Glow | Grayscale | Invert | Light | Mask | Shadow | Wave | XRay img { filter: blur(strength=50) flipv() } . img
Index Basic Tags Links Design Layout Tables Image File Types Using Images Image Editing Lists Frames