For documentation on specific classes, see stylesheet.css.

General Guidelines 

All class names should be lower case, start with "labkey-" and use dashes as separators (except for GWT, yui, and ext).  They should all be included in stylesheet.css. 

In general, check the stylesheet for classes that already exist for the purpose you need.  There is an index in the stylesheet that can help you search for classes you might want to use.  For example, if you need a button bar, use "labkey-button-bar" so that someone can change the look and feel of button bars on a site-wide basis. 

All colors should be contained in the stylesheet. 

Default cellspacing is 2px and default cellpadding is 1px.  This should be fine for most cases.  If you would like to set the cellspacing to something else, the CSS equivalent is "border-spacing."  However, IE doesn't support it, so use this for 0 border-spacing:
      border-spacing: 0px; *border-collapse: collapse;*border-spacing: expression(cellSpacing=0);

And this for n border-spacing:
      border-collapse: separate; border-spacing: n px; *border-spacing: expression(cellSpacing = n );

Only use inline styles if the case of interest is a particular exception to the defaults or the classes that already exist.  If the item is different from current classes, make sure that there is a reason for this difference.  If the item is indeed different and the reason is specific to this particular occurence, use inline styles.  If the item is fundamentally different and/or it is used multiple times, consider creating a class.

Data Region Basics

• Use "labkey-data-region".
• For a header line, use <th>'s for the top row
• Use "labkey-col-header-filter" for filter headers
• There are classes for row and column headers and totals (such as "labkey-row-header")
• Borders
  • Use "labkey-show-borders" (in the table class tag)
    • This will produce a strong border on all <th>'s, headers, and totals while producing a soft border on the table body cells
    • "<col>"'s give left and right borders, "<tr>"'s give top and bottom borders (for the table body cells)
    • If there are borders and you are using totals on the bottom or right, you need to add the class "labkey-has-col-totals" and/or "labkey-has-row-totals", respectively, to the <table> class for  correct borders in all 3 browsers.
• Alternating rows
  • Assign the normal rows as <tr class="labkey-row"> and the alternate rows as <tr class="labkey-alternate-row">