Documentation, Design, and Development (DDD) has developed the current Stanford web templates to comply strictly with XHTML 1.0 and CSS (Cascading Style Sheets) standards set by the W3C (World Wide Web Consortium). CSS allows Web authors to address the graphical layout of a page separately from its content and logical structure. This makes for cleaner, easier-to-update HTML code and the potential to view single HTML files in multiple formats, as appropriate for different contexts and devices.

Cascading Style Sheets

The CSS 2.0 style sheets that define layout, sizes, colors, etc. for the web templates are available for preview.

Sidebar Icons

To invoke these styles you must label your navigation lists <ul class="calendar"> or paragraphs <p class="calendar"> with one of these specific class names:

• class="calendar"
  
• class="computing"
  
• class="contact"
  
• class="document"
  
• class="download"
  
• class="email"
  
• class="faq"
  
• class="forms"
  
• class="login"
  
• class="medical"
  
• class="navigate"
  
• class="people"
  
• class="search"
  
• class="see-also"
  
• class="users"
  
• class="video"
  

Commonly-used Page Elements and How to Specify Them with Simple Code:

Paragraphs

<span class="highlight">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras in magna et libero placerat eleifend. Donec interdum velit sit amet dolor. Suspendisse pellentesque tellus ac lorem blandit egestas. Pellentesque et diam. In adipiscing eros vel pede. In nec eros. Maecenas nec elit. Donec nulla dolor, lacinia vitae, vehicula quis, vehicula a, justo. Praesent sodales tristique nisi.

<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mollis interdum est. Nullam auctor sollicitudin sapien. <em>Phasellus id magna sit amet justo viverra sodales. Integer et elit. Curabitur sit amet dolor nec est posuere mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam faucibus urna non lectus. Cras posuere vulputate leo. Integer condimentum.

<span class="select">

Suspendisse egestas arcu sed urna. Fusce dui. Donec sollicitudin, eros pellentesque ultricies lobortis, arcu justo varius nibh, id tincidunt lectus sem quis felis.

<span class="important">

Vivamus pulvinar risus a lacus. Nunc purus velit, fermentum sed, iaculis vitae, commodo quis, augue. Mauris in felis. Donec commodo elit ac metus. Integer interdum elementum nisl. Donec ac ligula ut mauris varius eleifend.

<code>

Line 1 <a href="title.html">title</a> Line 2 Line 3

<pre>

Massa risus rhoncus tortor, quis pretium orci diam vel erat.

<p style="text-align: right;"> Praesent imperdiet, et volutpat dolor nisi at nibh.

<p style="text-align: center;"> Nunc a dui at sapien tempus faucibus. Fusce posuere dignissim mauris.

Horizontal Rules and Breaks

<hr />

---

<hr class="brown" />

---

<hr class="gold" />

---

<hr class="red" />

---

<br />
<br style="clear: both;" />

Links to Downloadable Documents

Name the link according to its content (when possible, include the document's displayed title), not its file name or meta-information (e.g., don't say "printable version"). Append the format in brackets; the inline style will transform it to all-caps. For sidebar links, keep both the document name and the appended format all within the anchor tag. In the main content area, whenever possible, links to downloadables should be set apart in unordered lists, with the anchor tag surrounding only the FORMAT designation(s) — see examples below. Be sure to include the "title=" variable in the anchor tag and match its contents to the Title or Content-Description of Document.

in sidebars:

<a href="http://www.stanford.edu/yourfilepath" title="Title or Content-Description of Document">Title or Content-Description of Document [<span class="downloadable">FORMAT</span>]</a>

• Service Summary: OnCall Services [PDF]
• Job Aid: Manage Cases [DOC]

Note that when links are placed in sidebars, they display without underlines until they are hovered over.

in main content area:

Title or Content-Description of Document [<a href="http://www.stanford.edu/yourfilepath" class="downloadable" title="Title or Content-Description of Document">FORMAT</a>]

• Service Summary: OnCall Services [PDF]
• Job Aid: Manage Cases [DOC]

or …

• Sharing Ad Hoc Report Formats: [PDF] | [DOC]

Links that Open New Windows or Popups

For links to open in a new window: <a href="http://www.stanford.edu" rel="external">

New window (replaces target="_blank")

For links to open in a new window with specific attributes:
<a href="http://www.stanford.edu" target="newwindow" onclick="window.open('http://www.stanford.edu', 'newwindow', 'location=0,toolbar=0,scrollbars=1,status=0,menubar=0,directories=0,resizable=1,width=600,height=400')">

To open multiple external windows with specific attributes, replace "newwindow" with "window1", "window2", etc in the target and window.open attributes.
<a href="http://www.stanford.edu" target="window1" onclick="window.open('http://www.stanford.edu', 'window1', 'location=0,toolbar=0,scrollbars=1,status=0,menubar=0,directories=0,resizable=1,width=600,height=400')">

New popup window: requires javascript and XHTML 1.0 Transitional

location	The Location entry field where you enter the URL.
toolbar	The standard browser toolbar, with buttons such as Back and Forward.
scrollbars	Enable the scrollbars if the document is bigger than the window
status	The status bar at the bottom of the window.
menubar	The menu bar of the window
directories	The standard browser directory buttons, such as What's New and What's Cool
resizable	Allow/Disallow the user to resize the window.
width	Specifies the width of the window in pixels. (example: width=600)
height	Specifies the height of the window in pixels. (example: height=400)

Images

For right floating images without border: <img class="right-noborder">
For right floating images with border: <img class="right-border"> Integer semper faucibus dolor. Vivamus eget tortor imperdiet nulla porttitor fermentum. Vivamus fermentum, nunc et facilisis molestie, libero metus imperdiet massa, ut rhoncus orci velit sed nunc. Etiam augue magna, pretium vel, elementum interdum, ornare ac, odio. Donec felis dui, sagittis ut, lobortis a, fermentum a, turpis.

For left floating images without border: <img class="left-noborder">
For left floating images with border: <img class="left-border"> Morbi pede. Vestibulum viverra leo in sem. Mauris et nisl. Integer sit amet sem nonummy est semper congue. Quisque ipsum metus, sagittis tincidunt, cursus quis, feugiat at, nulla. Nulla semper ipsum id justo. Fusce in nisl a nunc fringilla vestibulum. Curabitur mauris. Ut adipiscing, magna nec ultrices pulvinar, ipsum mi laoreet eros, eu varius purus diam ut nibh.

Tables

For aligning text into columns: <table class="noborder">

column 1	column 2	column 3
column 1	column 2	column 3

<table class="red-header">

main header 1	main header 2	main header 3
column 1 column 1 column 1	column 2 column 2 column 2	column 3 <td style="text-align: right;">
column 1	column 2	column 3 <td style="text-align: right;">
column 1	column 2	column 3 <td style="text-align: right;">

<table class="gray-header">

Table Title <h3 style="text-align: center;">

	main header 1	main header 2	main header 3
side header 1 <th class="side-header">	column 1 <tr class="alternate">	column 2	column 3
	column 1	column 2	column 3
	column 1 <tr class="alternate">	column 2	column 3
	column 1	column 2	column 3

<table class="gold-header">

Table Title <h3>

main header 1 <th style="text-align: left;">
side header 1 <th class="side-header">	column 1	column 2 <td class="alternate">	column 3
	column 1	column 2 <td class="alternate">	column 3
	column 1	column 2 <td class="alternate">	column 3
	column 1	column 2 <td class="alternate">	column 3

Lists

---