Pointwise.com Style Guide

Page Layout Using Tables & CSS

Tables are used for the layout of all pages on Pointwise.com as shown below.

td.marginLeft	td.layoutHome		td.marginRight
td.marginLeft	td.layoutNav1		td.marginRight
td.marginLeft	td.layoutChevron		td.marginRight
td.marginLeft	td.layoutNav2	td.layoutContent	td.marginRight
td.marginLeft	td.layoutFooter		td.marginRight

The one exception to this layout is the home page which uses a third column for headlines.

td.marginLeft	td.layoutHome			td.marginRight
td.marginLeft	td.layoutNav1			td.marginRight
td.marginLeft	td.layoutChevron			td.marginRight
td.marginLeft	td.layoutNav2	td.layoutContent	td.layoutHeadlines	td.marginRight
td.marginLeft	td.layoutFooter			td.marginRight

CSS Colors

color	hex	usage
	#ffffff	page background
	#cccccc	nav2 border
	#aaaaaa	headline border
	#999999	p.CaptionL
	#555555	.headlineTitle
	#000000	default text
	#ccccff	nav2 background, input.send color
	#9999ff	th.shaded border-color
	#0023c6	chevron
	#003399	input.send background-color
	#313e7a	.nav2Title, th.shaded color
	#00406f	.faq1
	#ffcc99	th.shaded background-color
	#996600	p.Caption, caption.fig

CSS Styles

Cascading Style Sheets are used extensively to define the presentation of text on Pointwise.com. Default attributes for the entire site are set via CSS for the body tag (no class selector).

Headings

class	appearance
h1.hed1	Heading
h2.hed2	Heading
h3.hed3	Heading
h1.pr	Heading

Paragraph Styles

class	appearance
p.Content	This is a p.Content paragraph.
p.Caption	This is a p.Caption paragraph.
p.Footer	This is a p.Footer paragraph.
p.faqQ	This is a p.faqQ paragraph.
p.faqA	This is a p.faqA paragraph.
p.prL	This is a p.prL paragraph.
p.prC	This is a p.prC paragraph.
li.*	This is li.liBullet. This is li.nob.
p.CaptionL	This is a p.CaptionL paragraph.

Text Styles

class	appearance
.nav1	nav1 Text
.nav2Title	nav2Title Text
.nav2	nav2 Text
.nav2a	nav2a Text
.nav2b	nav2b Text
.nav2c	nav2c Text
.headlineTitle	headlineTitle Text
.emph	Emphasized Text
.Hilite	Hilited Text
.ggButton	Gridgen Button
.ggHotkey	Gridgen Hotkey
.ggTypein	Gridgen Typein

Tables

This is table.fig with caption.fig.
The image goes here.

This is a table.standard.
This is th.shaded.
This is td.standard.

This is table.box.
This is td.box.

This is table.form.
This is th.form.
This is td.formR.	This is td.formL.
This is td.formC.
This is td.formC inside a tr.formO.

This text is in an .ad05 TD inside a table.ad05.

XHTML

The World Wide Web Consortium (www.w3.org) currently recommends using XHTML. This hybrid language looks and works much like HTML but is based on XML. Pointwise.com uses XHTML 1.0 Transitional, a version of XHTML that works well in both old and new browsers. Writing XHTML can be summarized in a few simple rules.

Begin With the Proper Tags

Every document should begin with the following lines:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The following line declares use of the UTF-8 character set.

Tags In Lower Case

All XHTML tags and attributes must be in lower case. For example, instead of <TABLE> you must write <table>.

Quote All Attribute Values

The values of all XHTML tag attributes must have double-quotes around them. For example, instead of width=75% you must write width="75%".

Close All Tags

All XHTML tags must be closed, including "empty" tags. For example, instead of writing
<p>This is a paragraph.
you must write
<p>This is a paragraph.</p>
Empty tags are closed by adding a slash before the tag's end. For example, <br> is written as <br />.

Use Alt With Images

Image tags must include the alt attribute as in
<img src="grid.gif" alt="grid">

Validate

A free, on-line validator is available at validator.w3.org.

Other Recommended Practices

Do not do direct formatting in the XHTML using tags like <b< or <i> or <font>. Use CSS instead.
Do not use deprecated tags like <center>.
Be careful when copying text from a Word document into an XHTML document. Characters that don't conform to UTF-8 may result.