This is a collection of CSS classes that I have found myself using repeatedly over the years, some more than others. A lot of them mimic basic CSS properties, but I’ve found that using them as class names provide better hooks for scripting.

body {color:#333; background-color:#fff;}

/* ALIGNMENT */
.alignleft {text-align:left;}
.aligncenter {text-align:center; margin-left:auto; margin-right:auto;}
.alignright {text-align:right;}
.aligntop {vertical-align:text-top;}
.alignmiddle {vertical-align:middle;}
.alignbottom {vertical-align:text-bottom;}

/* FLOATS & CLEARS */
.floatleft {float:left; text-align:left;}
.floatright {float:right; text-align:right;}
.floatnone {float:none;}
.clear {clear:both;}
.clearfloat {clear:both; font-size:1px; line-height:0;}
.clearleft {clear:left;}
.clearright {clear:right}

/* POSITIONING */
.static {position:static;}
.relative {position:relative;}
.absolute {position:absolute;}
.fixed {position:fixed;}
.left {left:0; right:auto; margin-right:auto}
.center {left:0; margin-left:auto; margin-right:auto;}
.right {left:auto; right:0; margin-left:auto;}
.top {top:0; bottom:auto; margin-bottom:auto;}
.middle {top:0; margin-top:auto; margin-bottom:auto;}
.bottom {top:auto; bottom:0; margin-top:auto;}

/* DISPLAY */
.hidden, .metadata, .print {display:none;}
.block {display:block;}
.inline {display:inline;}
.invisible {visibility:hidden;}
.visible {visibility:visible;}

/* TEXT HANDLING */
.nolist {list-style:none;}
.nowrap {white-space:nowrap;}
.first {margin-top:0;}
.last {margin-bottom:0;}
.space {margin-left:0.5em;}
.indent {text-indent:2em;} 
.small {font-size:83%;}
.big {font-size:117%;}
.dark {color:#000;}
.light {color:#666;}
.notice {color:#000; background-color:#ccc; border:solid 1px #000; 
	padding:.05em .25em .13em .25em}
.error {color:#f00;}
.warning {color:#000; background-color:#ff0; border:solid 1px #000; 
	padding:.05em .25em .13em .25em}
.highlight {background-color:#ff0; padding:.05em .25em .13em .25em}
.required {color:#f00;}
.selected {text-decoration:underline;}
.active {border-top:solid 1px #000; border-bottom:solid 1px #000;}
.thumb {}
.icon {text-indent:20px;}
.even {background-color:#ccc;}
.odd {background-color:#fff;}
.outline {border:solid 1px #000;}

/* LINKS */
a.external:link {color:#90c}
a.internal:link {color:#00c}
a.email:link {color:#0c0}
a:link {color:#00c}
a:visited {color:#66c}
a:hover {color:#c00}
a:active, a:focus {color:#000}

a.button {color:#000; background-color:#ccc; border:outset 3px #999; 
	padding:.05em .25em .13em .25em}


/* DESIGN PATTERNS */
.hanging {text-indent:-4em; margin-left:4em; margin-top:0;}
.dropcap {float:left; position:relative; margin:0 0 0 0; font-size:400%; 
	line-height:normal; font-weight:bold;}
.hanging .dropcap {float:none; top:0; left:0;} 
.marginleft {position:relative; margin-left:25%; width:70%; margin-right:auto;}
.marginleft .margin { position:absolute; left:-24%; width:20%; margin-top:0; 
	font-weight:bold; }
.marginright {position:relative; margin-right:25%; width:70%; margin-left:auto;}
.marginright .margin { position:absolute; right:-24%; width:20%; margin-top:0; 
	font-weight:bold; }
.calloutleft {float:left; position:relative; width:25%; margin:1em; 
	padding:.5em; top:0}
.calloutright {float:right; position:relative; width:25%; margin:1em; 
	padding:.5em; top:0}

/* PRINT STYLE */
@media print {
	.print {display:block;}
	.screen {display:none;}
}