CSS Cookbook/Reference

CSS Properties

There are many more properties; these are the ones useful in styling an etext for on-screen display. (Here is a complete and nicely formatted CSS cheat sheet in PDF)

CSS properties in alpha order—for looking up an unknown usage.

Property	Explanation and use	Example	Note
background-color:color	Set color fill of content and padding. Useful colors: black, white, gray, silver, #888, #EEE.	thead { background-color: #EEE;}
border: width style color border-top: width style color border-right: width style color border-bottom: width style color border-left: width style color	Style all or one side of the border. Width of thin or a length. Style of none turns border off; others are solid, dotted, dashed, ridge. Border fills outer part of padding; widen padding to inset contents, widen margin to set off border.	h2 {border-left: 3px solid gray;} ins.correction {border-bottom: thin dotted gray;}
border-collapse:	Of table only, when collapse, borders of adjacent table cells are combined so cells are divided by single lines. When separate the usual double line borders appear.	.footnotes table { border-collapse:collapse; }
border-spacing:distance	Of table and only when border-collapse: separate or not given, space between borders of adjacent cells (default is about 3px).	table.fat { border-spacing:6px; }
bottom: distance	Set the distance from the container's bottom edge to the element's bottom edge. Negative distance pushes the element over the container margin. See position:absolute and position:relative.		1
caption-side:	For <table> only, sets the caption to appear on top or bottom.	table.info { caption-side: top; }	2
clear: both;	Push this element down the page to avoid overlap by floating elements.	h2 { clear: both; }
color:color	Set color of text.	.code { color: purple; } .linenum { color: white; background-color: #888; }
empty-cells:	For a <table>, set to show to make empty cells display. Default is hide empty cells.	table { empty-cells: show; }	2
float: side	Anchors the element to that margin, allowing text to flow past it. Normally used for images but can be useful for text, like sidenotes.	img { float:left; }
font-size: size	Change relative size of the font to smaller or larger, or use pct value like 110% or 90%.	p.caption { font-size: smaller; }
font-style: style	Set italic or normal.	p.citation { font-style: italic; }
font-weight: weight	Set bold or normal.	h3 { font-weight: normal; }
left:distance	Set the distance from the container's left edge to the element's left edge. Negative distance pushes the element over the container margin. See position:absolute and position:relative.	span.linenum {position: absolute; left: -5em;}	1
letter-spacing	Insert space between letters. Use to emulate loose spacing of antique headings.	h1 { letter-spacing: 3px; }
line-height: distance	Set the distance between baselines of consecutive lines in a paragraph. Browser defaults unpredictable but typically 1.2em.	p { line-height: 1.3em; } li { line-height: 1.2em; }
list-style-position:	Set list item markers as exdented (outside) or run-in to item text. Caution: some browsers implement inside by shifting the bullet or number right to the text margin; others shift the text margin out to line up with the bullet.	ul.inside { list-style-position: inside; }
list-style-type:	Set kind of marker for list items. Use none for no bullet/number; disc for bullet; or decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.	li.off { list-style-type: none; } ol.AL { list-style-type: lower-alpha; }
margin:top right bottom left margin-bottom: length margin-left: length margin-right: length margin-top: length	Set clear space outside the border area. For margin values mnemonic TRouBLe. To center: set left & right to auto.	p {margin-top: 0.66em;} .center {margin-left: auto; margin-right:auto;}
max-width: width	Set the maximum width of an element.	body { max-width: 40em; }	3
padding: top right bottom left padding-bottom:length padding-left:length padding-right:length padding-top:length	Set distance from outer edge of content to outer edge of border; space is filled by background-color. For padding use mnemonic TRouBLe.	img { border: 1px solid black; padding: 6px; }
position: absolute	Removes element from the text flow, closing-up where it would be; renders it based on its left/right and top/bottom values (q.v.)	span.tocright { position:absolute; right: 0; }	3
position: relative	Leave space for element in the text flow but allow it to shift relative to its container based on left/right and top/bottom values (q.v.). For simple baseline shift, see vertical-align. Sets this element's margins as container for child with position: absolute (except in IE6, see width).	ul.TOC { position: relative; }	3
right: distance	Set the distance from the container's right edge to the element's right edge. Negative distance pushes the element over the container margin. See position:absolute and position:relative.	span.tocright { position:absolute; right: 0; }	1
text-align:	Set alignment to left, center, right, or justify.	body > p { text-align: justify; } h3 { text-align: center; }
text-decoration:	Display element's text with underline, overline, or line-through; or remove default decoration with none.	.FNAnchor a { text-decoration: none; }	1
text-indent: distance	Set first-line indent (positive) or outdent (negative) as a distance in em or px units or percentage of the current line-width. Use 0 for no indent.	body > p { text-indent: 1em; } h1+p, h2+p { text-indent: 0; }
top: distance	Set the distance from the container's top edge to the element's top edge. Negative distance pushes the element over the container margin. See position:absolute and position:relative.
vertical-align: distance	Raise (positive) or lower (negative) baseline of element's text relative to surrounding text. Use sub for default subscript, super for default superscript alignment.	span.fnref {vertical-align: 25%;}
width: distance	Set width of a block element to a length in em or px or percentage of the parent element's width. Turns on magic "hasLayout" property in IE6, making absolute positioning work.	hr.major { width: 75%; }

Compatibility Notes

1. Incomplete or nonstandard support in some releases of Internet Explorer; some uses work; test carefully.
2. Incomplete or nonstandard support in all browsers; some uses work; test carefully.
3. No support or buggy support in all Internet Explorer; ok in other browsers.