div=topMenu a=link
Updated:25 November 2014
/misc/style/CheatSheet.htm
div=title1Cheat sheet for Peter's standard markup
div=title2Style defined in /misc/style/PefStdDoc.css

H1 Heading level 1

H2 Heading level 2

H3 Plain text

Plain text bold italic
span=q quote marks added automatically
span=emph
span=name
span=tiny
span=code Also applies to div. See Below.
span=path
span=shadow Also applies to other elements
Shortcut notation: Where you see
something like div=xyz it means
HTML <div class=xyz>

Modifiers applicable to most elements

Width fractions: w2 w3 w4 w5 w6 Width percentages: w60 w65 w70 w75 w80 w85 w90 w95 w100
Horizontal position: (float)hardLeft left right center clear
Vertical position: (float) down forces a floater onto the next 'row'.
Actually it is just CSS 'clear:left'. In my experience it is better to use tables or lists for vertical space organisation.
Left margin: Space on left of element. (Measured in em) m1 m2 m3 m4 m5 m6
Padding : Space between content and frame. Left and right 1em: plr Top and bottom 5px: ptb Combine plr and ptb: pad
Emphasis : todo tiny pin blob warn
Ticks : tick0 tick1 tickBox tickBox0 tickBox1 See also ul=ticks below.

Arrows : arrowNW arrowN arrowNE And so on. (Shadows added for clarity.)

Colours : red green blue black yellow white invert bgpnk bggrn bgblu bggry bgyel bgwhi
Sizes : f80 f90 f100 f110 f120 f150 f200 f300 f80 f100 f200

Boxouts and fonts

hardLeft
Banged up
against the
left edge
div.boxout normally floats left and is 25% wide but these can be changed by adding right and w*. Use floatFix on the surrounding DIV if you get unwanted overflows. Also applies to H6 boxes.
This box has class "boxOut w5 right todo".
This is in garamond. You can see it is a bit spidery for the screen but prints nicely. It would do if web fonts were supported by FF when printing. This is in garamond. You can see it is a bit spidery for the screen but prints nicely. It would do if web fonts were supported by FF when printing.
4
This is in serif. It is fine for the screen if you like serifs. This is in serif. It is fine for the screen if you like serifs.
This is the default font. Sans-serif for easy reading on the screen. This is the default font. Sans-serif for easy reading on the screen.
The vertical space below is 50px made by adding class vspace to a <p>

The vertical space above is 50px made by adding class vspace to a <p>
4.3
The numerical section references on the left are class sectionNum. The same effect can be obtained by putting the number underlined inside a heading. eg <h3><u>3.2.1</u> ... </h3>
newPage forces a new page when printing so the item starts at the top of a new page. If this wasn't attached to the H3 heading below here then the following table would be split across two pages without any regard for content.

H6 with underline used to make styled boxouts

factTo make a box like this hi-jack h6. Mark the headline as underlined (<u>) and the rest of the text plain.
infoThe styles fact, info, hint, warn and dont are intended to be used in documents in a standard fashion that's obvious to the reader.
hintThe full thing looks like this:
<h6 class=hint><u>Heading</u>text</h6>
warnThese boxes have had widths and gap between them set with w5, m1, left etc. This one also has down to bring it onto a new row.
dontYou can add other formatting like this shadow but try not to as the idea is that the reader gets consistent formatting

Rounded corners and image captions

All the following images are automatically sized. There are no widths specified.
frame1
frame2
frame1
round1
frame1
round2
frame1
round3
frame2
round2
bgwhi
This is a div=img containing an ordinary <img> which is scaled to the appropriate width. Text in the div follows on on as a caption.
This is a div=img containing an ordinary <img> which is scaled to the appropriate width. Text in the div follows on on as a caption.
This is a div=img containing an ordinary <img> which is scaled to the appropriate width. Text in the div follows on on as a caption.
This is a div=img containing an ordinary <img> which is scaled to the appropriate width. Text in the div follows on on as a caption.
<div class="img round2"> <img src="clubFoo.jpg"> This is a div=img containing an ordinary <img> which is scaled to the appropriate width. </div>

H2 Links etc

Ordinary a shown like this Links to go in top menu a=link shown like this
Glossary a=glos shown like this Button style links a=button or span=button shown like this
Footnote a=foot 5
Cursor variants: Move cursor over to see
  • a=download a=newWin
  • a=newWinOffSite a=offSite
  • a=video a=sound a=document
Email links (non-active) that are difficult to copy. Details need hacking in the css. Just <span class=email>@<span> eg @ To vary the email address on a page by page basis put the following into a <style> block span.email:before {content:"some_post_box";} span.email:after {content:"some.domain";}

5H1 Tables
The section numbers are obtained by putting them in the Hs as underlines. eg <h1><u>5.1</u>...</h1>

5.1H2 Informal tables

Informal tables don't have any class but they can be tweaked by using hlines to add horizontal lines, boxed for all lines. Adding cnr will right-justify the specified column.

Firstly This table has class "w2 right" and two columns . . . Ut wisi enim ad minim veniam, quis nostrud exerci tation
Secondly . . . and two rowsifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
This is plain text which isn't in a table at all
When colspan=n is used text is automatically centered.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. quod mazim placerat facer possim assum. Typi non habent claritatem

w6 left c2r
one1
seven7
seventeen17
w5 m2 left shadow hlines c2r (tr=total on last row)
Big ones1000
Small ones70
Total1070
w5 m2 left shadeC1 shadeR1 boxed
one
seven
seventeen
w4 m1 left frame2 bgpnk glossary
Bee-lineShortest distance between two points
FelineMember of the cat family
SalineSalty

5.2H2 Formal tables

Class table gives white background and lines.
  • The table on the right has the styles
    table shadeC1 titleR1 shadeR2 c2r c3r c4r shadeLastC right w3
  • shadeC1 highlights the labels in the first column.
  • shadeLastC highlights the 'totals' in the last column.
  • titleR1 lets us use the first row for a title.
  • shadeR2 highlights the column headings in the second row.
  • Without a title we would have used shadeR1
  • cnr indicates the specified column should be right justified. cncolour indicates the specified column should be shaded.
  • cnr and shadeR2 and shadeLastC don't work in IE<9. You have to style each TD by hand :(
  • Other common styles applied to TABLE wn, left and right
  • TR class=total has the effect shown on the last row
titleR1
shadeR2JanFebshadeLastC
shadeC15066116
Elephants549
Dogs121628
tr=total6786153
Using tr=none on a row is handy for things like notes

Column colours
c1gryc2bluc3grnc4pnkc5yelNormal
table=shadeHead for thead
Alternative shade scheme
table=shadeFoot for tfoot

5.2.1Blank formal tables

For cutting and pasting
~
~~
~~
~
~~~
~
5-cols
~~~~
~
6 cols + totals
~~~~~
~
~

Code documentation

You can use <pre> without any class for this monospace box
span=slashes is used where you'd have 'double slashes' in code.

span=note inserts commentary notes.

span=path is used for file paths. For example f:/temp/bits/things.txt
span=code is used for short bits of code. For example var msg = 'error';
Quantities of code can be listed with div=code. For example
Internet Explorer has known bugs in this department
$rv = false; $scoredPage = str_replace('/','_',$Page); $pageInfo = file(LOCAL_INFO_PATH . '/pageInfo.txt',FILE_TEXT + FILE_IGNORE_NEW_LINES ); we have the full list by now foreach($pageInfo as $pi){ run through lines if(strpos($pi,'.htm ')!==false){ ignoring blank/comments $bits = explode(' ',trim($pi)); split into page and parameters if($Page==$bits[0]){ we have the specified page continues etc. etc.

Lists

ul=titleul=bareul=ticksol=dotted
  • Item 1 turned into a title
  • Second item
  • nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in
  • Tiny nested div
    You can of course do just about anything inside a list item.
  • Rather than proper nesting of ULs within ULs you can use m1 etc. to indent.
  • As you'd expect m2 gives another level and so on.
HintUse this when you want vertical organisation without any bullets etc. A list of A tags in a menu for example.
  • This list is
  • unordered
  • nobis eleifend option congue assum. Typi non habent claritatem insitam; est usus legentis in
  • yak yak yak yak yak yak yak yak yak yak yak yak yak yak yak
BackgroundsThe backgrounds have been added so you can see the full extent of each list's real-estate
HintUse this when you want add ticks etc. to items. Set the tick type in each list item.
  • The first couple of items
  • in this list have default
  • This item is li=t0
  • This item is li=t1
  • This item is li=b0
  • This item is li=b1
Watch the namesThese have different style/class names to the stand-alone ticks.
There is a good reason for this
  1. This list is
  2. ordered.
  3. Nothing special to see except the dotted class has been added which is a bit of candy.
  4. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
5This is a sample footnote div=foot makes it happen with the number at the head underlined <div class=foot><u>5</u> ... </div>

Columns

IE disaster zoneNewspaper columns are not supported by IE yet.
Narrower columns of text make for much easier reading. Apply these classes to a <div> for the content within to be flowed across multiple columns. There are two basic ways to define columns: Number or width. I suggest using width most of the time. The following classes are provided in the style sheet:
Narrower columns of text make for much easier reading. Apply these classes to a <div> for the content within to be flowed across multiple columns. There are two basic ways to define columns: Number or width. I suggest using width most of the time. The following classes are provided in the style sheet:
Narrower columns of text make for much easier reading. Apply these classes to a <div> for the content within to be flowed across multiple columns. There are two basic ways to define columns: Number or width. I suggest using width most of the time. The following classes are provided in the style sheet:

Automatic numbering

Goes down to

the h4 level

like this

and like this

using class Hn=autonum

Automatic numbering

This framework was developed and put in the public domain by Peter Fox. The web address is vulpeculox.net/misc/style.