Skip to content Skip to navigation

HTML & CSS Style Guide (Stanford Modern)

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"
    calendar
  • class="computing"
    computing
  • class="contact"
    contact
  • class="document"
    document
  • class="download"
    download
  • class="email"
    email
  • class="faq"
    faq
  • class="forms"
    forms
  • class="login"
    login
  • class="medical"
    medical
  • class="navigate"
    navigate
  • class="people"
    people
  • class="search"
    search
  • class="see-also"
    see_also
  • class="users"
    users
  • class="video"
    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.

Sample Image
For left floating content: <div style="float: left; width: 200px; margin: 0px 10px 10px 0px;"> Curabitur convallis porta turpis.
Sample Image
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;" />

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>]

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

or …

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

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

Sample Image Sample ImageFor 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.

Sample Image Sample ImageFor 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
  1. column 2
  2. column 2
  3. 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

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

  1. <ol>
    1. Default Bullet 1
    2. Default Bullet 2
  2. <ol class="decimal">
    1. Decimal Bullet 1
    2. Decimal Bullet 2
  3. <ol class="lroman">
    1. Lower-Roman Bullet 1
    2. Lower-Roman Bullet 2
  4. <ol class="uroman">
    1. Upper-Roman Bullet 1
    2. Upper-Roman Bullet 2
  5. <ol class="lalpha">
    1. Lower-Alpha Bullet 1
    2. Lower-Alpha Bullet 2
  6. <ol class="ualpha">
    1. Upper-Alpha Bullet 1
    2. Upper-Alpha Bullet 2
  7. <ol class="linebreak">
    1. Default Bullet 1
    2. Default Bullet 2
  8. <ol class="decimal-linebreak">
    1. Decimal Bullet 1
    2. Decimal Bullet 2
  9. <ol class="lroman-linebreak">
    1. Lower-Roman Bullet 1
    2. Lower-Roman Bullet 2
  10. <ol class="uroman-linebreak">
    1. Upper-Roman Bullet 1
    2. Upper-Roman Bullet 2
  11. <ol class="lalpha-linebreak">
    1. Lower-Alpha Bullet 1
    2. Lower-Alpha Bullet 2
  12. <ol class="ualpha-linebreak">
    1. Upper-Alpha Bullet 1
    2. 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
Last modified July 28, 2011