Skip to content
Print Page Email Page PDF Version of Page

Office of Computing and Information Systems


SOD Web Site Visual Identity Guidelines


Headings


Item Type Example Code
Web Page Heading

Human Resources

<h2>Human Resources</h2>

Section Heading

Human Resources

<h3>Human Resources</h3>

Sub-Section Heading

Human Resources

<h4>Human Resources</h4>

Bold Heading (small)
Human Resources
<h5>Human Resources</h5>

Ordered Lists


All ordered lists should use a marginleft20 class so that they will start indented 20 characters from the left.

Item Type Example Code
Bulleted List
  • Item 1
  • Item 2
<ul>
<li class="marginleft20">Item 1</li>
<li class="marginleft20">Item 2</li>
</ul>

Numbered List
  1. Item 1
  2. Item 2
<ol>
<li class="marginleft20">Item 1</li>
<li class="marginleft20">Item 2</li>
</ol>

Hyperlinks


Hyperlinks that occur in a paragraph of text should use Hyperlink with Underline Always. Hyperlinks that occur in an Ordered List should use the Hyperlink with Hover Only

Note: you only need to use the "Open in New Window" class when pointing to a pdf document, or to an address outside the SOD.

Item Type Example Code
Hyperlink with Hover Underline, Open in Same Window Human Resources <a href="/units/service/humanresources/index.cfm" id="hoverunderline">Human Resources</a>

Hyperlink with Hover Underline, Open in New Window Human Resources <a href="/units/service/humanresources/index.cfm" id="hoverunderline" target="_blank">Human Resources</a>

Hyperlink with Underline Always, Open in Same Window Human Resources <a href="/units/service/humanresources/index.cfm">Human Resources</a>

Hyperlink with Underline Always, Open in New Window Human Resources <a href="/units/service/humanresources/index.cfm" target="_blank">Human Resources</a>

Text


All Paragraphs should have a <p> before the text and </p> at the end of the text.

Example: <p>This is an example paragraph.</p>



To bold text, but a <strong> before the text starts and </strong> when the text ends.



To italicize text, but a <i> before the text starts and </i> when the text ends.



Small Text should be written as follows:

<span class="small">This is small text</span>


CSS Classes to use


Note: All class names are case sensitive, so always use lowercase.

Also, you can use multiple class names on the same statement:

<td class="center bottombar rightbar marginleft20">This column is centered, with a bottom and right bar displayed and a left margin starting 20 characters to the right</td>

Class Name Example
center <td class="center">This column is centered</td>

right <td class="right">This column is right justified</td>

left <td class="left">This column is left justified</td>

leftbar <td class="leftbar">Displays a black left bar in a table</td>

rightbar <td class="leftbar">Displays a black right bar in a table</td>

topbar <td class="leftbar">Displays a black top bar in a table</td>

bottombar <td class="leftbar">Displays a black bottom bar in a table</td>

marginleft20 <td class="marginleft20">The left margin of this column will start 20 characters to the right.</td>

Tables


Example Table:

Heading 1 Heading 2
Row 1, Item 1 Row 1, Item 2
Row 2, Item 1 Row 2, Item 2

Code to use:

<table id="phonebookcontent">
<tr class="tableheading">
<td>Heading 1</td>
<td>Heading 2</td>
</tr>
<tr>
<td>Row 1, Item 1</td>
<td>Row 1, Item 2</td>
</tr>
<tr class="altrow">
<td>Row 2, Item 1</td>
<td>Row 2, Item 2</td>
</tr>
</table>



Last Modified: 10/20/2010