On this page:
Tools for Validating Code
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
<div class="box">
Default width is "auto". Use <div class="box" style="width: 50%;"> to specify width of 50%.
Heading 2
<p class="last">Cras purus sapien, pharetra at, ultrices in, faucibus vitae, enim. Morbi elementum risus at dui. Sed vestibulum. Suspendisse dolor lectus, mattis quis, condimentum eu, cursus eu, tellus. Maecenas elementum.
<div class="color-box">
Default width is "auto". Use <div class="box" style="width: 50%;"> to specify width of 50%.
Heading 2
<p class="last">Nunc rhoncus, ante aliquam euismod ornare, tellus ante gravida nulla, eu eleifend tellus lectus nec arcu. Donec ac dolor a mi lacinia elementum.
<div class="center-box">
Default width is 80%. Use <div class="center-box" style="width: 50%;"> to specify width of 50%.
Heading 2
<p class="last">Vestibulum ac ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In sit amet justo.
<div class="left-box">
Default width is 200px. Use <div class="left-box" style="width: 400px;"> to specify width of 400px.
Heading 2
<p class="last">Integer pretium nibh id sem. Duis ac ipsum at nisl faucibus adipiscing.
<div class="right-box">
Default width is 200px. Use <div class="right-box" style="width: 400px;"> to specify width of 400px.
Heading 2
<p class="last">Duis id est. Integer iaculis dui in neque accumsan scelerisque. Fusce fringilla, tellus sit amet ultricies placerat, purus libero aliquam enim, sed dictum nisi tortor sit amet turpis.
<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.
For left floating content: <div style="float: left; width: 200px; margin: 0px 10px 10px 0px;"> Curabitur convallis porta turpis.
For right floating content: <div style="float: right; width: 200px; margin: 0px 0px 10px 10px;"> Sed cursus lacus a ante.
<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="https://itservices.stanford.edu/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>
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>]
or …
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 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
Unordered List
- <ul>
- Default Bullet 1
- Default Bullet 2
- <ul class="square">
- Square Bullet 1
- Square Bullet 2
- <ul class="disc">
- Disc Bullet 1
- Disc Bullet 2
- <ul class="circle">
- Circle Bullet 1
- Circle Bullet 2
- <ul class="uncheck">
- Unchecked Bullet 1
- Unchecked Bullet 2
- <ul class="check">
- Checked Bullet 1
- Checked Bullet 2
- <ul class="none">
- Invisible Bullet 1
- Invisible Bullet 2
- <ul class="linebreak">
- Default Bullet 1
- Default Bullet 2
- <ul class="square-linebreak">
- Square Bullet 1
- Square Bullet 2
- <ul class="disc-linebreak">
- Disc Bullet 1
- Disc Bullet 2
- <ul class="circle-linebreak">
- Circle Bullet 1
- Circle Bullet 2
- <ul class="uncheck-linebreak">
- Unchecked Bullet 1
- Unchecked Bullet 2
- <ul class="check-linebreak">
- Checked Bullet 1
- Checked Bullet 2
- <ul class="none-linebreak">
- Invisible Bullet 1
- Invisible Bullet 2
Ordered List
- <ol>
- Default Bullet 1
- Default Bullet 2
- <ol class="decimal">
- Decimal Bullet 1
- Decimal Bullet 2
- <ol class="lroman">
- Lower-Roman Bullet 1
- Lower-Roman Bullet 2
- <ol class="uroman">
- Upper-Roman Bullet 1
- Upper-Roman Bullet 2
- <ol class="lalpha">
- Lower-Alpha Bullet 1
- Lower-Alpha Bullet 2
- <ol class="ualpha">
- Upper-Alpha Bullet 1
- Upper-Alpha Bullet 2
- <ol class="linebreak">
- Default Bullet 1
- Default Bullet 2
- <ol class="decimal-linebreak">
- Decimal Bullet 1
- Decimal Bullet 2
- <ol class="lroman-linebreak">
- Lower-Roman Bullet 1
- Lower-Roman Bullet 2
- <ol class="uroman-linebreak">
- Upper-Roman Bullet 1
- Upper-Roman Bullet 2
- <ol class="lalpha-linebreak">
- Lower-Alpha Bullet 1
- Lower-Alpha Bullet 2
- <ol class="ualpha-linebreak">
- Upper-Alpha Bullet 1
- Upper-Alpha Bullet 2
Definition List
- <dl>
- Term 1
- Definition 1
- Term 2
- Definition 2
- Term 3
- Definition 3
- <dl class="linebreak">
- Term 1
- Definition 1
- Term 2
- Definition 2
- Term 3
- Definition 3
- <dl class="nobreak">
- Term 1
- Definition 1
- Term 2
- Definition 2
- Term 3
- Definition 3
Font Sizes
- <span class="largest">
- Sample Text
- <span class="larger">
- Sample Text
- <span class="large">
- Sample Text
- <span class="medium">
- Sample Text
- <span class="small">
- Sample Text
- <span class="smaller">
- Sample Text
- <span class="smallest">
- Sample Text
Headings
- <h1>
-
Heading 1
- <h2>
-
Heading 2
- <h3>
-
Heading 3
- <h4>
-
Heading 4
- <h5>
-
Heading 5