div=topMenu a=link
/misc/style/CheatSheet.htm
div=title1 Cheat sheet for Peter's standard markup
div=title2 Style derived from PefStdDoc.css
The completely self-contained version PefStdDoc-min.css has fonts removed and all images in-lined.

H1 Heading level 1

H2 Heading level 2

Shortcut notation: Where you see
something like div=xyz it means
HTML <div class=xyz>

H3 Plain text

Plain text bold italic
span=q quote marks added automatically
span=emph span=highlight
span=name span=cool
span=tiny span=scream
span=path span=tags
span=grunge span=powder
span=code Also applies to div. See Below.
span=shadow Also applies to other elements
k e y
Above and below margins
div=mx 1.4em above
div=mt 0.7em above. <p> inserted below

div=mb 0.7em below

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 strike pin blob warn ques (mouse over)
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 brown violet pink navy sky grey pale lilac emerald orange

Bolded : red green blue black yellow white brown violet pink navy sky grey pale lilac emerald orange

invert bgpnk bggrn bgblu bggry bgdark bgxdark bgyel bgwhi bgbrn bglime bgpuce bgsky bgsun
Sizes : f80 f90 f100 f110 f120 f150 f200 f300
Bold examples: f80 f100 f200 Fixed point size: f8 (8 point) f10 (10 point)


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>

Fonts4

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

3.aH3 with fonts is this

3.a.1H4 with fonts is this

3.aH3 without fonts is this

3.a.1H4 without fonts is this

The No-font version of this stylesheet removes chunky heading fonts but saves many 120 Kb and 6 requests
The line above is hr=shadow w2. The line below is hr=invert shadow w80

Simple boxouts5

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".
4.3
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
fish hat 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.
fish hat 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.
fish hat 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.
fish hat 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
Use button and disabled to get a ghost button
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";}

4H1 Splitting, boxouts and indenting for 2015

In 2015 most browsers can now implement more flexible and reliable methods for allocating horizontal space. This is especially important for boxouts and glossary-style lists.
ul-indent and div-split are highly preferred methods over boxout and plain lists

Splitting

For the very common task of putting a box-out to the right of the main text use div=split. This always splits the horizontal space into two. Now add fifth, quarter, third, half, threeQuarters to the div. This allocates how much space is given over to the second element.

Within the div place two elements, typically divs, but spans and h6s will work too. The sub-divs do not need any classes.

Example of quarter This h6 follows straight on from the main div. Note that the main div has the quarter class

Indenting

In short, use li=indent then add i5, i10, i15 or i20 for how many ems to use. See the lists section. This is great for sections and sub-sections of text where you would otherwise have to nest text in div after div

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

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 compact will reduce inter-cell spacing. 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 compact (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

Code documentation and terminal I/O

You can use <pre> without any class for this monospace box
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
$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 nowspan=notespan=slashes 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.
span=slashes is used where you'd have 'double slashes' in code.

span=note inserts commentary notes.

Terminal actions can be shown with div=console. For example
peter@FLOR /Servers/htdocs/test/foo $ console For terminal commands and output. Continuation lines are indicated with <span class=crlf></span>. However long lines will not be lost but the user will have to scroll. peter@FLOR /Servers/htdocs/test/foo $
span=prompt gives blue
span=crlf gives a continuation symbol.

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.
ul=sectionsul=indent i5ul=then
  • Underline the heading and then the rest of the text follows. <li><u>head</u>text
    • Lower levels look like this
    • Just... ul/li/u without any other action
  • Contrast? Add the contrast class to the ul to get a more emphasised heading
  • Simpler option than ul=indent as all you have to do is put ul=sections at the top and the rest happens automatically.
  • Headings
    Once you've set your ul=indent all you need is <li>s with two elements. The first element gets a certain number of em spaces to it as a title and the second element gets the rest.
  • Colouring
    We've coloured these two divs so you can see the area claimed by each
  • Nesting
    • works as
      with text being indented like this. You can think of it as a glossary style that can go on and on and on. You can think of it as a glossary style that can go on and on and on. You can think of it as a glossary style that can go on and on and on.
    • you'd expect
      You can think of it as a glossary style that can go on and on and on. You can think of it as a glossary style that can go on and on and on. You can think of it as a glossary style that can go on and on and on.
  • Options
    • Width
      The amount of indenting is specified in ems. Use i5,i10,i15 or i20
    • Alignment
      Add kiss to get the labels kissing the text. ie. Right alignment
  • Step 1
  • Step 2
  • Step 3 is quite long and in this case is stuffed into a div=w75
  • Step 4
  • ...
Usage Often you want to illustrate a sequence of steps. Nothing more is needed than ul=then with subsequent list items being automatically indented as shown.
Make a list slim
  • Not much in this list
  • but it takes the whole width
  • Add class slim
  • to tidy it up
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.