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
- element
- element
- nested element
- 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
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:
- Schedule an appointment with the testing center.
- Bring pencil, calculator, and two forms of ID (see acceptable forms of ID).