CSS Properties

Properties are listed in alphabetical order below. Each property has examples of possible values beneath it. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer. The properties are followed by some common values that properties may contain. CSS3 properties are not listed below but there are links at the bottom to other CSS3 references.

background:

#ffffff
transparent
url(images/pattern.gif)
fixed        /* background doesn't move when page scrolls */
repeat
repeat-x     /* tile an image horizontal only */
repeat-y     /* tile an image vertical only */
no-repeat
top
left
center
right
bottom
2px 1px      /* exact positioning, from left top */

Example:
#footer {
background:transparent url(images/footer.gif) repeat-x bottom;
}

background-attachment:

fixed

background-color:

#ffcc00
transparent


background-image:

url(images/something.gif)

background-position:

top
left
center
right
bottom
2px 1px


background-repeat:

repeat
repeat-x
repeat-y
no-repeat


border:

1px
none
solid
dashed
dotted 
double     /* needs at least 3px to see effect */  
ridge      /* regular 3d border needs at least 4px to see effect */
groove     /* kind of strange, needs at least 4px to see effect */ 
inset      /* like a recessed bevel */
outset     /* like a button bevel */ 
#000000

Example:
div {
border:2px solid #ffffff;
}

Browser Differences:

• borders are drawn INSIDE the container in IE, Opera 7.
• borders are drawn OUTSIDE the container in Firefox, Safari. (part of the annoying “box model” conflict)

border-collapse:

collapse


border-top:

(set the border on one side)

border-right:

(set the border on one side)

border-bottom:

(set the border on one side)

border-left:

(set the border on one side)

bottom:

4px     /* positions object 4px from the bottom of its container */
50%

clear:

none
left
right
both

Clears a “floated” element. See also: float:

clip:

rect(top left bottom right)

color:

#000000        /* #RRGGBB, each digit is 
                  0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
                  
rgb(0,0,0)     /* (R,G,B), each digit is 0 to 255, 
                  does NOT work everywhere */
                  
aqua           /* #00ffff */
black          /* #000000 */
blue           /* #0000ff */
fuchsia        /* #ff00ff */
gray           /* #808080 */
green          /* #008000 */
lime           /* #00ff00 */
maroon         /* #800000 */
navy           /* #000080 */
olive          /* #808000 */
purple         /* #800080 */
red            /* #ff0000 */
silver         /* #c0c0c0 */
orange         /* #ffa500 */
teal           /* #008080 */
white          /* #ffffff */
yellow         /* #ffff00 */

cursor:

auto 
crosshair 
default 
pointer        /* The cursor that indicates a link on rollover */
move
N-resize       /* N can be replaced with S, E, W, NE, NW, SE, SW  */
text           /* Usually rendered as an I-bar */ 
wait           /* Usually rendered as a watch or hourglass */ 
help

display:

none           /* Makes the element disappear */
block
inline

float:

none
left
right


font-family:

verdana,helvetica,sans-serif   /* easiest to read at small sizes and on all computers */
arial,helvetica,sans-serif
times,times new roman,serif
courier new,courier,monospace
cursive                        /* unpredictable */
fantasy                        /* unpredictable */

Rules:

• A font only works for people who have that font installed on their computer.
• Take into consideration both Windows and Macintosh users.
• Always include a generic font at the end of the font list.

font-size:

10px           /* very small */
11px           /* small to normal depending on font */
12px           /* normal */
16px           /* titles */
40px           /* really big */

0.5em          /* relative to parent element */
larger         /* relative to parent element */
smaller        /* relative to parent element */

xx-small       /* like HTML H6 */
x-small 
small          /* like HTML H5 */
medium         /* like HTML H4 */
large          /* like HTML H3 */
x-large        /* like HTML H2 */
xx-large       /* like HTML H1 */

font-style:

normal
italic
oblique        /* same as italic */

font-variant:

normal
small-caps


font-weight:

normal
bold


height:

200px
90%


left:

4px
50%


(Positions an element from the left-hand edge of its container.)

letter-spacing:

normal
5px

(Called “kerning” in Typography.)

line-height:

normal
130%           /* percentage of the font-size, 130 gives a nice look */
10px           /* scrunch 11px font lines together */

(Called “Ledding” in Typography.)

list-style:

none
disc
circle
square
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
url(images/bullet.gif)

Note: If you want a custom bullet image, it works better this way:
ul {margin:0; padding:0; list-style:none;}
li {
margin:0 0 6px 0; padding:0 0 0 16px; /* left padding for bullet image */
background:transparent url(images/bullet.gif) no-repeat;
}

margin:

0              /* to turn all margins off, no unit is necessary */
4px            /* use a single value for the same margin on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left margins 
                  (clockwise from top) */
auto           /* set right AND left to auto, element is centered */

Margins add transparent space OUTSIDE the background and border.

Examples:
  img {margin:2px 0 2px 0;}
div (margin: 4px auto 10px auto;}    /* div will be horizontally centered */


margin-top:

(set the margin on one side)

margin-right:

(set the margin on one side)

margin-bottom:

(set the margin on one side)

margin-left:

(set the margin on one side)

min-height:

Not supported in IE so its fairly useless

min-width:

Not supported in IE so its fairly useless

overflow:

visible
hidden
scroll
auto

padding:

0              /* to turn all padding off, no unit is necessary */
4px            /* use a single unit for even padding on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left padding 
                  (clockwise from top) */

(Padding adds space INSIDE the background and border.)

padding-top:

(set the padding on one side)

padding-right:

(set the padding on one side)

padding-bottom:

(set the padding on one side)

padding-left:

(set the padding on one side)

position:

static        /* where it would "normally" be in the html flow */
absolute      /* position inside the parent element */
relative      /* position relative to where it would "normally" be */
fixed         /* do not scroll the element as the page scrolls */

right:

4px
50%

(Positions an element from the right-hand edge of its container.)

text-align:

left 
right 
center 
justify        /* makes even left and right margins, 
                  like a newspaper column */

text-decoration:

none
underline
overline
line-through

text-transform:

capitalize
lowercase
uppercase


top:

4px
50%


(Positions an element from the top edge of its container.)

vertical-align:

baseline 
middle 
sub            /* do not use, messes up line spacing, see below */
super          /* do not use, messes up line spacing, see below */
text-top 
text-bottom

(Making superscripts and subscripts without messing up the line spacing:)

CSS
  .sups {position:relative; top:-4px;}
.subs {position:relative; top:4px;}

HTML
  Here's a superscript<span class="sups">1</span>.


visibility:

hidden        /* the element will still influence other 
                      elements on the page */ 
visible

(To remove the element completely, use display:none; instead.)

white-space:

normal
nowrap        /* do not wrap a line until a line break, 
                 somewhat buggy in some browsers */ 
pre           /* like using <pre> in HTML, requires 
                 "strict" mode for IE 6 */

width:

200px
90%


z-index:

5             /* a DIV with a z-index of 5 will be "above" 
                 those with 4 or lower */

Z-index only applies to other objects in the same container.

Printable Version with extra CSS3 rules