Stylesheet Reference

This page serves as a reference for custom CSS settings and classes in Fisher's stylesheet. Italicized text indicates an HTML tag and bold text indicates a CSS class. For a brief explanation of how to use the HTML class attribute, please refer to W3Schools.com.

Note that page is just a reference sheet for those that have been trained in the proper use of Fisher's advanced styles.  It does not address proper use of each of these styles.  Misuse of these styles or use without training may result in styling being removed or updated without notice.

CMS-generated page titles are displayed in h1 tags, which should not be used within page content. Custom h2, h3, h4, and h5 styles provide an assortment of options for subheadings that need to separate one section of a page from another.

The following header contains one header-icon-left and one header-icon-right class img tag. These classes are intended for use with 16x16 images (such as the RSS icons shown here), ideally nested in h3 or h2 tags.

Major Subheadings May Use h2 Tags

Paragraphs should be contained in p tags. Emphasized in-line items where bold or italics aren't sufficient should use the "highlight" class, as shown with this strong tag.

Elements can easily be indented using the indented class, as show here in a p tag.

Source code should be contained in a pre tag.

The following header contains a feature-paperclip class img tag, for use with feature items as shown below.

Displaying Featured Items Is One Use For An h3 Tag

This text and the image at left are contained in a feature-content class div. A div using the feature-content class should always follow any instance of an h3 tag containing a feature-paperclip class img, as demonstrated here. Feature text must be contained in a p tag, followed immediately by a div using the clearer class.

An h4 Tag Provides A Clear Break Between Sub-Sections

• Unordered lists are a good way to organize small chunks of simple content.
• This is an li in a ul.
• This is an li in a ul.

An h5 Tag Separates Small Sections Without An Abrupt Break

1. Ordered lists help display specific steps or items in a checklist.
2. This is an li in an ol.
3. This is an li in an ol.

A dt tag in a dl serves as a parent to one or many dd items.

This is in a dd tag in a dl.

This is in a dd tag in a dl.

This is in a dt tag in a dl.

This is in a dd tag in a dl.

Example javascript expander with plus/minus buttons

The following table is using the plain class. This class sets standard margin and padding. Table width must be specified in-line. When necessary, tables may be used to organize data or help with nested content layout.

The following table is using the plain class and the divided class. The divided class adds a border to the top of each td when used in a table.

The following table is using the summary class. This class set standard border, margin, padding, and colors. Default width of 80% can be overridden using inline style.

The RSS img tags in the th are using the table-icon-left and table-icon-right classes.

A th tag in a "summary" class table
A td tag in a summary class table.	An alternate class td tag in a summary class table.

The following table is using the summary and spaced classes. The spaced class adds a 3-pixel white border between each th and td.

The following table is using the detail class. This class sets standard width, border, margin, padding, and colors. Default width of 97% can be overridden using inline style.

The following table is using the detail and spaced classes. The spaced class adds a 3-pixel white border between each th and td.

The following table is using the grayscale class. This class sets standard width, border, margin, padding, and colors. Default width of 97% can be overridden using inline style.

The following table is using the grayscale and spaced classes. The spaced class adds a 3-pixel white border between each th and td.