Fisher College of Business logo

Stylesheet Reference

Bullet Example Expander

This is an example of a "expander" containing additional content. Expandable blocks of content may be added to pages containing information that's best organized into several logical categories.

Example Tab 1Example Tab 2

This is an example of a "tab" containing additional content. Tabs may be used for pages with different content for several audiences, or with lengthy information that's best organized into several logical categories.

This is an example of a second "tab" containing additional content. Tabs may be used for pages with different content for several audiences, or with lengthy information that's best organized into several logical categories.

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.

H1 (Page Title)

 

H2 (Major Header)

 

H3

 

H4

 

H5

 

H6

 

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.

RSSMajor Subheadings May Use h2 TagsRSS

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.

Links to download files that are to be called out can use the download-link class on the link to the file.  If the end of the URL includes a recognized file type, then an image will be automatically added to the link.  Current recognized types are doc, docx, ppt, pptx, xls, xlsx, pdf, htm and html.

For so-called "pretty" URLs where the file type may not be included, the type of the download can also be manually specified using the doc, ppt, xls, pdf and web classes, as shown below. 

download-link to a word doc / docx

download-link to a ppt / pptx

download-link to an xls / xlsx

download-link to a pdf

download-link to an htm / html file

download-link with a doc class

download-link with a ppt class

download-link with an xls class

download-link with a pdf class

download-link with a web class

 

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 Tagpaperclip

Fisher campus sample

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.
This is in a summary class div tag, for calling out important content. Widths other than 100% can be set using inline style.
This is in a summary-alt class div tag, for calling out important content. Widths other than 100% can be set using inline style.
This is in a detail class div tag, for calling out important content. Widths other than 100% can be set using inline style.
This is in a detail-alt class div tag, for calling out important content. Widths other than 100% can be set using inline style.
This is in a grayscale class div tag, for calling out important content. Widths other than 100% can be set using inline style.
This is in a grayscale-alt class div tag, for calling out important content. Widths other than 100% can be set using inline style.

 

 

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.

A th in a "plain" table.
A td in a plain class table. A td in a plain class table.
A td in a plain class table. A td in a plain class table.

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.

A th in a "plain" and "divided" table.
A td in a plain and divided class table. A td in a plain and divided class table.
A td in a plain and divided class table. A td in a plain and divided class 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.

RSSA th tag in a "summary" class tableRSS
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.

A th tag in a "summary" and "spaced" class table
A td tag in a summary and spaced class table.




An alternate class td tag in a summary and spaced class table.

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.

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

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

A th tag in a "detail" and "spaced" class table
A td tag in a detail and spaced class table. A td tag in a detail and spaced class table.
An alternate class td tag in a detail and spaced class table. An alternate class td tag in a detail and spaced class table.

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.

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

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

A th tag in a "grayscale" and "spaced" class table
A td tag in a grayscale and spaced class table. A td tag in a grayscale and spaced class table.
An alternate class td tag in a grayscale and spaced class table. An alternate class td tag in a grayscale and spaced class table.