Styling Samples

Markup with applied styles using the /Templates/v3-page.dwt template with /_source/style/base.css and /_source/style/v3-4/* stylesheets.

Headings

Below are samples of the headings that may be used for main body content (#content). The H1 and H2 headings are reserved for the PCC logo and Section Title (#stitle).

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading
This is an H6 Heading

Basic Text Styles

Pullquotes

Used to highlight or emphasize a short phrase.

This is a pullquote, can you believe it!

Quotes

For short inline quotes.

Steve said, that test was hard.

Blockquote

Used for longer quotes.

"Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for - in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it."

Ellen Goodman

Lists

Ordered and Unordered have been giving some base styling, but nothing special. However, the indexlist class can be used to create a two column (floated list elements) list.

Ordered List

  1. element
  2. element
    1. nested element
  3. element

Unordered List

  • element
  • element
    • nested element
  • element

Definition Lists

There are three different stylings available for definition lists; default, dictionary, and concise. A fourth, checklist, style is also available and can be used to create show/hide lists.

Default
Definition Term
This is the definition data.
Definition Term
This is the definition data.
Dictionary
Definition Term
This is the definition data.
Definition Term
This is the definition data.
Concise
Definition Term
This is the definition data.
Definition Term
This is the definition data.

Tables

Some basic styles have been applied to tables such as a light cell border and special treatment for header cells in both the table head and table body.

column head 1 column head 2 column head 3
row head A data 2a data 3a
row head B data 2b data 3b

Images and Objects

imgcenter, imgleft and imgright can be used to float and set margins on images and objects used in text. A class of graphic can also be added to remove the border added by imgleft and imgright except on mouseover when link.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mauris arcu, sodales ut, suscipit nec, consequat et, erat.Malesuada eu, rhoncus eget, tempus non, lectus. Suspendisse condimentum vulputate urna.Suspendisse condimentum vulputate urna. Aliquam quis orci at urna bibendum sodales. Mauris gravida. Phasellus suscipit, erat vel malesuada aliquam. Curabitur pretium. Suspendisse sapien erat, vestibulum nec, semper vel, dictum ac, nulla. Curabitur dictum purus ut odio adipiscing pharetra. Nullam nunc leo, malesuada eu, rhoncus eget, tempus non, lectus. Suspendisse condimentum vulputate urna. Aliquam quis orci at urna bibendum sodales. Mauris gravida. Phasellus suscipit, erat vel malesuada aliquam.


Image Caption

caption-imgleft, caption-imgright and caption-imgcenter can be used to float a caption along with the image. To use, the class must be placed on a <div> surrounding the image and a paragraph.

 

caption-imgleft

caption-imgright

condimentum vulputate urna.Suspendisse condimentum vulputate urna. Aliquam quis orci at urna bibendum sodales. Mauris gravida. Phasellus suscipit, erat vel malesuada aliquam. . Curabitur pretium. Suspendisse sapien erat, vestibulum nec, semper vel, dictum ac, nulla. Curabitur dictum purus ut odio adipiscing pharetra. Nullam nunc leo, malesuada eu, rhoncus eget, tempus non, lectus. Suspendisse condimentum vulputate urna. Aliquam quis orci at urna bibendum sodales. Mauris gravida. Phasellus suscipit, erat vel malesuada aliquam.

Special Page Objects

Related Pages

Used at the end of a page to provide links to a few similar, related, pages the visitor may also find of interest.

Glossary

For term definitions or acronym explanation mixed into content pages. If the page itself is nothing but a glossary then use one of the definition list styles (usually either standard or dictionary).

College Lingo

Definition Term
This is the definition data.
Definition Term
This is the definition data.

Action

This object has not been properly defined but is being used in a few areas of the site to highlight "action" related information, i.e., an outline, and links to information about, steps the visitor needs to perform.

Before you arrive: