Web Style Guide

Fonts

WHITNEY LIGHT

The five boxing wizards jump quickly.

WHITNEY BOOK

The five boxing wizards jump quickly.

CLARENDON ROMAN

The five boxing wizards jump quickly.

Colors

Basic Content Styles

H1: Primary Header

The Primary Header is for the primary page title and should only be used once. This is added through the page editor under the field "Page Header" and should not be added again in the Page Content section.

H2: Secondary Header

The Sub Title Header provides an easy way to break your page up into Sub Sections.

H3: Tertiary Header

The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.

H4: Quaternary Header

The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

Paragraph Styles

Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicaus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interidco ingenium macto hendrerit facilisi os typicus accumsan dignissim velit faugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala this is italic copy. Sit, blandit magna haero hos, pala minim. Enim tincidunt conventio macto abico delenit refoveo si nobis, quibus typicus rusticus. Gravis odio nutus ludus, inhibeo, importunus, nisl tamen nunc gemino, distineo in feugait ex. Accumsan nobis commodo consequat pagus ulciscor dolore.

Dolor nostrud usitas facilisi commoveo paratus ille facilisi autem dolus eligo iaceo augue exputo. Mauris camur paulatim sagaciter defui typicus suscipit. Praesent roto ut multo quibus inhibeo autem, ne nimis torqueo ventosus vicis, nonummy ut.

General Content Organization Guidelines

The following outlines the best practices for organizing content in the Castleton website. Under no circumstances should you copy and paste content from a word processor or existing internet page directly into the CMS page editor. When content is directly pasted from word processors or an internet page, the copy may retain its existing styling which will make it look different than the rest of the Website.

Sample Content Outlines

Let's go over a simple way to organize your content on the page:

• Page header (Header 1)
  • Intro blurb
• Section header (Header 2)
  • Description paragraph, images, list, or table
    • Subsection (Header 3)
      • Description paragraph, images, list, or table
• Section header (Header 2)
  • Description paragraph, images, list, or table

The page header is the title of your page. This is also referred to as Header 1. Because it is used as the title, there can only be one Header 1 per page. This is added through the CMS page editor as the "Page Header." The intro blurb is added underneath the Page Header as the "Page Intro". Underneath these two fields in the page editor is the "Page Content," where the rest of the content is included.

The page is broken down into sections, with titles for each of those sections. The titles to these sections are called headings. Headings start with the most general and overarching title, Heading 1 (h1), and go down to the most specific, Heading 4 (h4). Again, there can only be one h1, but you can have as many of the others as you like. When writing titles and subtitles, keep in mind that they should be a clear and concise summation of the content that follows.

Headings should always follow a clear order. Say, for example, you have a page called "Facts & Figures" that is broken into three sections called "The Academic Program," "The People," and "The Place." And "The People" is broken into three subsections called "Students," "Student Honors Earned," and "Faculty." Your page should be organized like this:

• h1: Facts & Figures
  • h2: The Academic Program
  • h2: The People
    • h3: Students
    • h3: Student Honors Earned
    • h3: Faculty
  • h2: The Place

As you'll notice, any subsection that sits under Heading 2 is a Heading 3. Let's say we add two subsections to each Heading 3 item. The page would then look like this:

• h1: Facts & Figures
  • h2: The Academic Program
  • h2: The People
    • h3: Students
      • h4: Subsection
      • h4: Subsection
    • h3: Student Honors Earned
      • h4: Subsection
      • h4: Subsection
    • h3: Faculty
      • h4: Subsection
      • h4: Subsection
  • h2: The Place

Extended Content Styles

List Styles

Unordered List

• This is an unordered list item.
• This is a second item.
  • This is a second level unordered list item.
  • This is a second item.
  • This is a third item.
  • This is a list item that links to another page.
• This is a third item.
• This is a list item that links to another page.

Ordered List

1. This is an ordered list item.
2. This is a second item.
   1. This is a second level ordered list item.
   2. This is a second item.
   3. This is a third item.
   4. This is a list item that links to another page.
3. This is a third item.
4. This is a list item that links to another page.

Tabular Data