Web Style Guide

The following content outlines the best practices for using the CMS page editor. Under no circumstances should you copy and paste content from a word processor or existing internet page directly to the Pages WYSIWYG 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. test

Header Styles









This is the Proper Styling for a Sub Title Header

The above title is created by selecting Heading 2 from the format dropdown in the WYSIWYG. The Sub Title Header provides an easy way to break your page up into Sub Sections.

This is the Proper Styling for a Third Level Header

The above title is created by selecting Heading 3 from the format dropdown in the WYSIWYG. The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.

This is the Proper Styling for a Fourth Level Header

The above title is created by selecting Heading 4 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

HTML Example (Headers):

<h2>This is the Proper Styling for a Sub Title Header</h2>

<h3>This is the Proper Styling for a Third Level Header</h3>

<h4>This is the Proper Styling for a Fourth Level Header</h4>

Back to Top

List Styles

An Unordered List

An Ordered List

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

HTML Example (Lists):

<h3>An Unordered List</h3>
<ul>
<li>This is an unordered list item.</li>
<li>This is a second item.</li>
<li>This is a third item.</li>
<li><a href="http://web.pugetsound.edu/web-style-guide/">This is a list item that links back to this page.</a></li>
</ul>

<h3>An Ordered List</h3>
<ol>
<li>This is an ordered list item.</li>
<li>This is a second item.</li>
<li>This is a third item.</li>
<li><a href="http://web.pugetsound.edu/web-style-guide/">This is a list item that links back to this page.</a></li>
</ol>

Back to Top

Paragraph Styles

Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait 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.

Paragraph Sub Title
Paragraph subtitles can be made by bolding the title and then using a soft return (shift + return).

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.

HTML Example (Headers):

<p>Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus <strong>this is bold copy<strong> premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala <em>this is italic copy</em>. 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.</p>

<p><strong>Paragraph Sub Title</strong><br />
Paragraph subtitles can be made by bolding the title and then using a soft return (shift + return).</p>

<p>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.</p>

Back to Top

Link Styles

This is a paragraph that contains different kinds of links. This is a link to a page inside the Puget site. This is a link to a PDF document. This is a link to a PowerPoint document. This is a link to an Excel document. This is a link to a Word document. You can add these icons to your document links by clicking on the link in the WYSIWYG then clicking on the Insert/Edit anchor link, then clicking on the advanced tab and typing in the Classes field. Type pdf for a PDF; type ppt for a PowerPoint document; doc for a Word Document; and xls for an Excel Document.

Sometimes you need to add an External Link to your page. To add this icon to your link, click on the link in the WYSIWYG then click on the Insert/Edit anchor link, then click on the advanced tab and type external_link in the Classes field.

Unordered List with Links

HTML Example (Document Classes):

<ul>
<li>
<a href="http://www.web.pugetsound.edu/Document.pdf" class="pdf">Adobe PDF Document</a>
</li>
<li>
<a href="http://www.web.com/Document.ppt" class="ppt">PowerPoint Document</a>
</li>
<li>
<a href="http://www.web.com/Document.xls" class="xls">Excel Document</a>
</li>
<li>
<a href="http://www.web.com/Document.doc" class="doc">Word Document</a>
</li>
<li>
<a href="http://www.google.com" class="external_link" target="_blank">External Link</a>
</li>
<li>
<a href="http://web.pugetsound.edu/">Internal Link</a>
</li>
</ul>

Back to Top

Same Page Link Styles (Anchor Links)

Sometimes a page you have created is very long, or people may be coming to it for a very specific reason. If this is the case, you can create a special set of links that will jump to points that you specify on the page. These are called Anchor Links. We have used them on the top of this page so that it is easy to jump around the page. Below we have created a mock list of links. Below these links, we have created a back to top link that will jump back to the top of the Anchor Links.

























This is Link 1

This is Link 2

This is Link 3

This is Link 4









Back to Top

HTML Example (Anchor Links):

<div class="container">
<div class="anchor_links">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</div>
<div class="anchor_links">
<ul>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4">Link 4</a></li>
</ul>
</div>
<br class="clear"/>
</div>


These Must Link Somewhere
This HTML would be placed at the corresponding places on the page you want to
jump to:

<p>
<a name="link1">This is Link 1</a>
</p>
<p>
<a name="link2">This is Link 2</a>
</p>
strong><p>
<a name="link3">This is Link 3</a>
</p>
strong><p>
<a name="link4">This is Link 4</a>
</p>

HTML Example (Back to Top Link):

<p>
<a href="#top" class="back_to_top">Back to Top</a>
</p>

This Must Link Somewhere
This HTML would be placed at the top of the page:

<p>
<a name="top"></a>
</p>

Back to Top

Table Styles

This is a Table Title

Data Type Number Letter
Data 1 1 A
Data 2 2 B
Data 3 3 C

 

How to Style Tables

To make a new table that is styled properly, you can either copy and paste the HTML from an existing table over to the page you need it to be and edit the content, or you can start fresh. We have a video explaining how to build a table from scratch on our Help Page.

We created the Table Title by selecting Header 2 for the title then eding the HTML by adding class="table_header" inside of the desired h2 tag.

HTML Example (Tables):

<h2 class="table_header">This is a Table Title</h2>
<table>
<thead>
<tr>
<th>Data Type</th>
<th>Number</th>
<th>Letter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>Data 2</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>Data 3</td>
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>

Back to Top

Table Styles

This is a Table Title

Data Type Number Letter
Data 1 1 A
Data 2 2 B
Data 3 3 C

 

How to Style Tables With Grid Lines

To make a new table that is styled properly, you can either copy and paste the HTML from an existing table over to the page you need it to be and edit the content, or you can start fresh. We have a video explaining how to build a table from scratch on our Help Page. To make a table with grid lines add class="grid" to the table tag in the html editor.

We created the Table Title by selecting Header 2 for the title then eding the HTML by adding class="table_header" inside of the desired h2 tag.

HTML Example (Tables):

<h2 class="table_header">This is a Table Title</h2>
<table class="grid">
<thead>
<tr>
<th>Data Type</th>
<th>Number</th>
<th>Letter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>Data 2</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>Data 3</td>
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>

Back to Top

CSS Classes

.pdf
Denotes that a link is a PDF file.
Adobe PDF Document

HTML Example:

<a href="http://www.web.com/Document.pdf" class="pdf">Adobe PDF Document</a>

.xls
Denotes that a link is an Excel file.
Excel Document

HTML Example:

<a href="http://www.web.com/Document.xls" class="xls">Excel Document</a>

.doc
Denotes that a link is an Word file.
Word Document

HTML Example:

<a href="http://www.web.com/Document.doc" class="doc">Word Document</a>



.ppt
Denotes that a link is a PowerPoint file.
Power Point Document

HTML Example:

<a href="http://www.web.com/Document.ppt" class="ppt">PowerPoint Document</a>



.external_link
Denotes that a link is to an external site.
External Link

HTML Example:

<a href="http://www.google.com" class="external_link" target="_blank">External Link</a>



.container
Creates a container around content with a gray border at the bottom and extra white space at the top and bottom.

 

HTML Example:

<div class="container">
<p>Place content here.</p> </div>



.block_left
Sets an item to the left and creates some white space around the borders.









HTML Example:

<img src="http://www.web.pugetsound.edu/files/resources/3100_image.jpg" alt="" class="block_left"/>



.block_right
Sets an item to the right and creates some white space around the borders.









HTML Example:

<img src="http://www.web.pugetsound.edu/files/resources/3100_image.jpg" alt="" class="block_right"/>



.anchor_links
Creates an unordered list without bullet points that is half the width of the content area.

 









HTML Example:

<div class="container">
<div class="anchor_links">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</div>
<div class="anchor_links">
<ul>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4">Link 4</a></li>
</ul>
</div>
<br class="clear"/>
</div>


These Must Link Somewhere
This HTML would be placed at the corresponding places on the page you want to
jump to:

<p>
<a name="link1">This is Link 1</a> <a name="link2">This is Link 2</a> <a name="link3">This is Link 3</a> <a name="link4">This is Link 4</a> </p>



.back_to_top
Creates a link with an arrow pointing up, to be used for in page links back to the top of the content.

Back to Top

 

HTML Example:

<p>
<a href="#top" class="back_to_top">Back to Top</a>
</p>

This Must Link Somewhere
This HTML would be placed at the top of the page:

<p>
<a name="top"></a>
</p>



.table_header
Creates a block-like Header for the table styles.

 

This is a Table Title

HTML Example:

<h2 class="table_header">This is a Table Title</h2>



Back to Top