CSS Property & Value Cheat Sheet
This table gives you a lot of the CSS properties and values in (hopefully) an easy-to-use format.
Universal Values | ||
[color] | green #00ff00 #0f0 rgb(0, 255, 0) rgb(0%, 100%, 0%) |
These values are to be used below where you see [color], [length], or [style].
For color, one should be familiar with hexadecimal values (explained at the bottom of this page). If you don't know those, then type out the color's name, in keeping with the accepted color names listed here. For length, some special explanation is needed. When defining text size, for example, "em" is a multiple of the existing font size; "ex" is the size of the letter "x" in the existing font; "px" is the size in pixels; ""pt" is point size; "pc" is in picas; "cm" is in centimeters; "mm" is millimeters; "in" is inches; and "%" is percent of the existing font size. |
[length] | normal 12pt 2em 2ex 2pc 12px 10mm 1cm 1in 110% |
|
[style] | none dotted dashed solid double groove ridge inset outset |
|
Text Styles | ||
color | [color] | changes the text color |
font-weight | normal bold lighter bolder 100 ~ 900 |
changes the weight (boldness) of the text. For numbers, only multiples of 100 may be used; 400 is "normal" |
font-family | serif sans-serif cursive fantasy monospace |
changes the font style; since specific fonts are not always common to all computers, this property designates families, which almost every computer will have at least one font representing the family. |
font-size | [length] xx-small x-small ßsmall medium large x-large xx-large |
changes the size of the font |
font-variant | normal small-caps |
allows you to use Small Caps text |
font-style | normal italic oblique |
allows for italics |
text-decoration | none underline overline line-through blink |
allows for lines or blinking |
text-transform | capitalize uppercase lowercase |
allows for various capitalization styles |
Text Layout | ||
letter-spacing | [length] |
spaces letters closer or further apart (also called "kerning") |
word-spacing | [length] |
spaces words closer or further apart |
line-height | 1.2 [length] |
changes line spacing |
vertical-align | baseline middle sub super text-top text-bottom top bottom 20% |
positions text above or below the rest of the text in a line |
text-indent | 30 10% [length] |
creates an indent for the first line of a paragraph |
text-align | left center right justify |
aligns paragraphs of text |
direction | rtl ltr |
sets the text direction |
list-style-type | none disc circle square decimal decimal-leading-zero upper-roman lower-roman upper-alpha lower-alpha upper-greek lower-greek upper-latin lower-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
sets the type of ordered list "bullet" or "number" point; used with the "ol" command |
list-style-image | none url(address) |
uses an image as a bullet point in bullet lists |
Background | ||
background-color | [color] | sets a background color |
background-image | url(address) | sets a background image |
background-attachment | scroll fixed |
allows for you to fix the background image so it does not scroll with the page content |
background-repeat | repeat repeat-x repeat-y no-repeat |
usually background images repeat (or "tile"); this allows the images to repeat only vertically, horizontally, or not at all |
background-position | 10% 10% 20px 20px top left center right bottom top left top center etc. |
sets the position of the background image |
background | see above values for backgrounds | allows multiple values from the other background settings |
Border | ||
note: if applied to the table command, these apply to all cell walls, inner and outer; if applied to the td command, these apply to only the inner walls of any cell; if applied to the tr command, only colors will apply, to the inner walls of all cells in the row. These can be applied elsewhere, however, e.g. to text directly. | ||
border-width | thin medium thick [length] |
sets the style of the border; "length" goes by the same length values used above; if only one width is given, it applies to the whole cell, but if more than one is given, widths apply to different sides--2 widths = top/bottom, left/right; 3 widths = top, left/right, bottom; 4 widths = top, left, bottom, right |
border-top-width | " | |
border-right-width | " | |
border-bottom-width | " | |
border-left-width | " | |
border-color | [color] |
sets the border color; if only one color is given, it applies to the whole cell, but if more than one is given, colors apply to different sides--2 colors = top/bottom, left/right; 3 colors = top, left/right, bottom; 4 colors = top, left, bottom, right |
border-style | [style] | sets the border style; if only one style is given, it applies to the whole cell, but if more than one is given, styles apply to different sides--2 styles = top/bottom, left/right; 3 styles = top, left/right, bottom; 4 styles = top, left, bottom, right |
border | width: thin medium thick [color] [length] [style] |
a catchall property for all borders in a particular cell; many attributes can be added to this separated by spaces (e.g., "thin red solid") |
border-top | " | |
border-right | " | |
border-bottom | " | |
border-left | " | |
border-collapse | collapse separate |
using the value "collapse" eliminates the extra border line around tables, and makes them simple (as in word processing apps) |
border-spacing | [length] | if there is only one value, then it increases the spacing between cells in a table; if there are two values, then the first designates horizontal spacing, and the second indicates vertical spacing |
Margins | ||
note: margins cannot always be applied in all circumstances | ||
margin | 20% auto [length] |
sets the margin (the space between the outside of an element and the next element); sometimes can be applied to plaint text |
margin-top | " | |
margin-right | " | |
margin-bottom | " | |
margin-left | " | |
Padding | ||
note: margins cannot always be applied in all circumstances | ||
padding | 20% auto [length] |
sets the padding (the space between the outer and inner walls of a table); sometimes can be applied to plaint text |
padding-top | " | |
padding-right | " | |
padding-bottom | " | |
padding-left | " | |
Page Layout | ||
these properties let you position and size elements freely within a web page | ||
position | static relative absolute fixed |
this defines how the position of an object is determined, and is followed by more specific positioning properties. "static" means normal positioning; "relative" moves the position relative to the static position; "absolute" moves the position relative to the 'parent' element, for example the body, but allows the element to scroll up and down; "fixed" is like "absolute," but the item does not scroll up and down |
top | auto 20% [length] |
|
left | " | |
bottom | " | |
right | " | |
width | auto 20% [length] |
sets the width of an element; properties min-width and max-width also available, but I could not make them work |
height | auto 20% [length] |
sets the height of an element; properties min-height and max-height also available, but I could not make them work |
z-index | 2 auto |
when elements overlap each other, the element with the higher number is on top of the other(s) |
visibility | visible hidden inherit |
makes an object visible or invisible; useful with hover or javascript commands |
overflow | visible hidden scroll auto |
when contents become too big to fit inside an element, this property decides how to handle the situation; "visible" increases the size of the element; "hidden" clips the content which is greater than the element area; "scroll" adds scroll bars always (even with no overflow); "auto" adds scroll bars when the content becomes too big |
Cool Stuff | ||
cursor | auto crosshair default poiner move *-resize text wait help |
changes the shape of the cursor when it is over the element; the "*" in "*-resize" must be replaces with a compass direction, e.g. n, s, e, w, ne, nw, se, sw to produce an arrow pointing in that direction |