Framework home page Cheat sheet (html)
Peter's standard css markup
Getting started
Contents

Welcome

Welcome to Peter Fox's CSS framework for HTML authoring. The background is that I've written many user guides and tutorials in HTML and ended up re-inventing the wheel. My style and the style you'll see here is quite different to that produced by a word processor for presentation in PDF. With HTML you can use layout to make it much more punchy by using 'standard' formulas of 'look-at-this', 'here is a summary', 'here is a differently presented example in a frame' and so on. Perhaps most important of these is the box-out which conveys nuggets of information and possible actions.

Keen to learn?Studying the CSS and the HTML here will be useful for people who know a little bit but haven't really got stuck-in
An obvious example of something that we often see on the screen but wouldn't on paper is the contents box to the left here.

Boxouts like this one are an easy to implement screen idiom making use of distinctive styling to convey purpose

The screen idiom of an always available master navigation is implemented in the 'menu bar' fixed to the top of the view independently of document scrolling.
Don't like some style or feature? Change it and evolve your own look-and-feel

1Purpose of this document

1.1Who should use it

This is not suitable for creating cool, flashy web sites.

If you want richly formatted documentation that works across most browsers that look a bit like this one then this is for you.
Writing in HTML is not for everybody. Firstly of course you must have something to say and the ability to put it into logical blocks and words. Then you need a basic knowledge of HTML and CSS and an editor to hack at bare tags. If you want to write documents such as user guides, manuals and even just reports that take advantage of the features that are available on a screen that you don't get with 'designed for paper' then read on.

Why not use the universal language of the screen to write for it? Because it can be a tedious fiddly pain. That's why I've put this together so when I need some formatting or feature I can quickly pick it from the tool-kit.

1.2Benefits of a framework

A framework is just a lot of CSS rules and a bit of documentation. Obviously it is useful to be able to style basic elements such as H1 and anyone who has written user guides will have developed bits of style such as DIV.alert{border:3 solid red;} etc. This gives styling speed and consistency.

What I've done here is tidy up my standard framework and documented it so you can re-use what I re-use.

Remember you can easily adapt it to suit your preferences.
User benefits Author benfits
  • Consistent use of elements for ease of interpretation
  • Easy formatting means better, easier to read layout
  • Rich formatting can give direction and clarity
  • All your documents have a standard look and feel
  • Simplification of formatting and features
  • Easy formatting means better layout, clearer documents
  • Quick picking of complex styles
  • Make your point quickly with ready to use features
This document is deliberatly punchy but you don't have to turn a perfectly straightforward report into a carnival.

2Resources

Framework Select the appropriate downloads from the framework home page. See the link at the very top.
Reference The cheat-sheet is part of the download package. See the link at the very top to view now.
Examples Look at the cheat sheet source, and the source of this document.
One file complete 26K A single css file with absolutely no external references. There are no fonts and cursors but it is ideal for either dropping beside your documents or even cut-n-paste in-line for even less to go wrong.
Have this if you want publish as simply as possible.
Full package download 400K This contains the css, fonts and cursors together with all the other resources.
Have this if you want to tweak the css.
Other resources
If you are relatively new to native HTML and CSS then you need tools for the job and some basic CSS and HTML reference materials. The way elements gets laid-out in HTML can sometimes be mind-bogglingly confusing.

3Coding HTML

Firstly have a look at the cheat sheet to get a feel for what can be done. You'll see things like span=emph or strange things like w3. These are clues to the key words you add to the HTML elements to make things happen.

3.1Basics

3.1.1Reference the stylesheet

Tip Put this line towards the top of the HEAD block as it means you will be able to tweak in-line underneath to override the standard in special cases.
Somewhere in the HEAD section you'll want to add something like link href="PefStdDoc.css" rel="stylesheet" type="text/css".
or the self contained file
link href="PSDNF-min.css" rel="stylesheet" type="text/css".
Do not reference the version at vulpeculox.net directly.

3.1.2Adding classes to tags

Class matters Everything depends on adding one or more classes to HTML elements.
That's all there is to it
Class/style names are case sensitive
Suppose you want to put I'd give it five stars in quotes. Here is all you do:
<span class=q>I'd give it five stars</span>
and this is the result
I'd give it five stars

3.1.3Combining tags

Quotes Single or double are both allowed
Quotes When tags are combined they must be surrounded in quotes. You can get away without quotes for a single class.
Now you could have hours of fun playing with combinations... ... but don't! Let your jazzed-up formatting be driven by your needs. The cheat sheet and to some extent this tutorial contain far too many fancy things for the average document.

3.1.4Start at the top

Base font Normally, for consistent look-and-feel you would edit the CSS to set the default font. Alternatively, for a once-off you could adapt the following to suit in a STYLE block. body{font-family:Serif;}
The way I start my documents is as follows:
div class=topMenu This is fixed to the top of the viewing screen and is used for A links for navigating a library of documents.
div class=title1 Global context
div class=title2 Specific purpose of document
After that anything can happen.

3.1.5Frequently used styles

  • Of course H1, H2 and H3 Note that H1 and H2 will force their way onto a 'new line' but you may need to add clear to H3 if you've got floating bits before it.
    Start the heading text with something underlined to have it appear as a section number in the left margin. Or use class=autonum for automatic numbering.
  • div class=boxOut with various combinations of left, right, w4 and w5 is a really handy way to encapsulate a nugget. It is just a DIV with fancy formatting.
    The w styles are used all the time. Single digits are fractions, double digits percentages. wall is variable up to 100% - often used to override the default 25% width of boxOut
  • TABLE without any class sets up a grid without lines. This is handy for when you want to split the width in a definite way. It is often much easier to force the layout that you want with a table rather than relying on floats. TD class=w4 say will try to restrict the width of a particular column to 25%. It's not ideal but often works.
  • UL class=bare is a convenient way to structure vertical space. Adding a w-class can be handy to stop it sprawling right across the page.
  • UL class=ticks is great for ticks, crosses and boxes.

3.2The joy of box

Have a look at the H6 section of the cheat sheet. There are two important points to notice
  1. The complete styling is done in one go. This means you can allocate certain boxes for particular purposes. In my world helpful hints and tips are always green. This leads the way to quick, consistent formatting and faster comprehension by the reader. You can of course tweak these styles and even add pictorial icons if you want but always put directness of communication before cuteness of candy.
  2. The layout is a not tabular. In fact these boxes float. For example the black box has floated left until it bumps up agsinst the blue box. As well as left and right you can use center or centre.
Floating minefield Whilst you can do really useful things with div class=boxOut and H6 they upset the normal flow of the main content. Sometimes it goes horribly wrong. Tables are simpler if suitable.
factfact w5 left
20% width. Float towards the left. (Bumps up against left margin)
infoinfo w5 left m1
20% width. Float towards the left. Leave a 1em left margin. (Bumps up against fact)
hinthint w4 left m1
25% width. Float towards the left. Leave a 1em left margin. (Bumps up against info)
warnwarn w4 left down
25% width. Float towards the left. (Bumps up against left margin). Without the down the box would try to snuggle up with the row of boxes above.
dontdont w2 right m1 shadow
50% width. Float towards the right. Leave a 1em left margin. (Bumps up against right margin)
factfact w5 left
20% width. Float towards the left. (Bumps up against left margin)
infoinfo w5 left m1
20% width. Float towards the left. Leave a 1em left margin. (Bumps up against fact)
hinthint w4 left m1
25% width. Float towards the left. Leave a 1em left margin. (Bumps up against info)
warnwarn w4 left down
25% width. Float towards the left. (Bumps up against left margin). Without the down the box would try to snuggle up with the row of boxes above.
dontdont w2 right m1 shadow
50% width. Float towards the right. Leave a 1em left margin. (Bumps up against right margin)
The source code for these examples is exactly the same. The H6s just follow on one after another.
<h6 ... fact left"> ... </h6> <h6 ... info left"> ...</h6> <h6 ... hint left"> ... </h6> <h6 ... warn left down"> ... </h6> <h6 ... dont right"> ... </h6>
Note that the grey frames are round DIVS. These needed the floatFix style adding. (The reason is that the floated elements, in this case all the boxes, have been taken out of the flow and the browser doesn't count them as taking up vertical space.)
Get out of float troubleYou may find that a floating box interferes in an unpleasant way with what comes next. There are two things to try:
1 Put a DIV class=floatFix around the offending box and its host section.
2 Add left and down to the following item.

3.3Tables for layout and presentation

3.3.1Good reasons for splitting page into columns

Alternative method See section 3.7 Newspaper columns for a less reliable (uncertain browser support) but smoother way of flowing text between multiple columns.
There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read.
A framework is just a lot of CSS rules and a bit of documentation. Obviously it is useful to be able to style basic elements such as H1 and anyone who has written user guides will have developed bits of style such as DIV.alert{border:3 solid red;} etc. This gives styling speed and consistency.

What I've done here is tidy up my standard framework and documented it so you can re-use what I re-use.

Remember you can easily adapt it to suit your preferences.
User benefits Author benfits
  • Consistent use of elements for ease of interpretation
  • Easy formatting means better, easier to read layout
  • Rich formatting can give direction and clarity
  • All your documents have a standard look and feel
  • Simplification of formatting and features
  • Easy formatting means better layout, clearer documents
  • Quick picking of complex styles
  • Make your point quickly with ready to use features
There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read. There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read.
There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read. There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read. There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read.
There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read. There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read.
No flowUnfortunatly there is no reliable automatic way to flow text between columns. In practice I find this a bit of a bore but it helps to leave putting the text into columns until it has been pretty much finalised. See section 3.7 for alternative method which may be suitable for your needs.
Column widthsUnfortunatly tables have a habit of deciding the width of their columns themselves is based on the amount of text in them and trying to get images to fit and looking at some unfortunate animal's entrails. You can see the adjustment happening above. You can suggest to the browser some widths by adding a w4 etc. to all the TDs of a row. It works for me in this case.
There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read. There are two different reasons for using tables. Firstly to organise the layout and secondly to display tabular data. If I had a long narrative report then I'd probably put it into two columns as shorter lines are easier to read. The great advantage of tables for controlling layout over floats is that you force rows and columns to align regardless. If you look at the source code of section 1.2 you'll see that this is a nest of two tables. Lets see what it would look like without the outer table. I think the narrower columns make it a lot easier to read.
These two columns have full added to the TD for fully justified text.

3.3.2Coding tables for layout

You need to know the basics of HTML tables. Simply a TABLE contains a number of rows (TR) which in turn contain a number of cells (TD). Always TDs inside TRs. Put whatever you like inside the TDs.
The cheat sheet tells you all you need to know about informal tables used to organise layout. There's nothing much to it really. Don't forget you can easily make your table smaller by adding a width class to it. Formatting styles applied to the TABLE often cascade down to every cell.

3.3.3Coding tables for tabular data display

Once again the cheat sheet should tell you all you need to know. The key thing is the table class. That will get you started.
Internet ExplorerVersions less than 9 can't format columns in one go. You have to style each TD!

Adding class table to TABLE gives a bare white grid. The default alignment of text in cells is to the left but you can override this by specifying columns to justify right - typically for figures - with c-column number-r. For example c4r will right justify the fourth column. Similarly background shading can be added using gry blu grn pnk and yel. eg c3grn

Classes total and none can be added to the TR tag. In the cheat sheet the comment at the bottom of the table is actually a blanked-out row.

It is often convenient to have the title of a table attached to it. For this purpose the first row is commandeered for a table-wide heading using titleR1. You have to colspan=6 or however many columns there are. When using this feature you can stick headings on the second row with shadeR2 instead of the usual shadeR1.

3.4Lists for layout and action

As with tables we can use lists for two purposes: A convenient way of organising vertical space and a powerful communication tool. Have a look at the cheat sheet for what you need to know. Notice how in all cases the real-estate of the list nicely encompasses the whole thing.

3.5Pictures made simple

We're all familiar with IMG but we're also familiar with reluctance to stick where they're put and stay with their caption. The cheat sheet shows the code and examples. The styling of the caption is done in the CSS (div.img) so you may want to have a look at that.

3.6Miscellaneous features

3.6.1Email address

One of the annoyances of the web is the harvesting of email addresses to be used to send spam. There is a technique used in the framework which makes it difficult for bots to steal this while being perfectly readable to a human. To use it you need to edit the following two lines in the framework CSS:-
span.email:before {content:"some_post_box";} span.email:after {content:"some_domain";}
In the HTML you put just <span class=email>@<span>. When it comes to being displayed all browsers show the full email address and only IE allows it to be cut and pasted whole. Most browsers only cut the '@'.

If you want to vary the email address on a document by document basis then put the 'before' and 'after' tweaks into a STYLE block after the link to the framework CSS file.

3.6.2Blocks of code

Being a programmer I often want to display blocks of code. That's simple except in IE. DIV class=code with the lines of code inside. There are two SPANs that work inside a code div.

3.7Newspaper columns

This text should be displayed in a number of columns. Each is declared as "15 em" wide. If not then the browser doesn't support 'newspaper' columns. (We discussed the benefits of narrower columns of text above.) The advantage of a newspaper column over a table is that the content will automatically be flowed from the bottom of one column across to the top of the next and so on.

You can specify the number of columns you want with col2, col3 or col4 but usually a better way is to set the column width and let the browser do the rest. These widths are nominally in ems but you may want to experiment. The classes to use are col10, col15, col20 or col25. The other column style is colRule which adds a dotted line between columns.

Experiment by resizing the width of your browser to see how this works. The style for this DIV is col15 colRule

4Technicalities

4.1Printing

Zone of failBrowsers vary from appalling to not very good — certainly not good enough for user documentation — in their ability to print.
It is quite possible to print HTML but don't expect advanced formatting and web-fonts to work. The on-line HTML to PDF converters range from 'give-up' to 'something recognisable'.

One of the issues is breaking pages. Basically anything other than a hard page break is unreliable. To force a new page add newPage to something like a P or a DIV.

4.2Browser differences and quirks

Firefox 5This is my base browser.
  • Rounded corners are not properly rendered when inside tables.
  • Web-fonts are not used for printing
  • Columns
Internet Explorer 8Full of holes
  • Rounded corners don't work
  • Web-fonts don't work. Makes an awful mess.
  • Column justification in tables can't be done globally
  • Shadows don't work
  • Dotted separators don't work in lists
  • Columns
Safari 5.1 winDifferent fonts nightmare
  • Text spills out of the top of elements.
  • Rounded corners don't work
  • Doesn't display span=tick in table when just a space as data
  • Columns
Opera 11.5 winExcellent
  • Slight problem with content inside rounded corners
  • Borders are flakey
  • Columns
Firefox 3.6 Linux
  • Rounded corners are not properly rendered when inside tables.
  • Web-fonts are not used for printing
  • Columns
Chrome 12.0 LinuxExcellent
  • Columns
  • Dire printing

5Authoring and style

5.1HTML is different

Writing directly in HTML is not suitable for everything or everybody — far from it. However there is a niche for documents that carry a lot of information and exploit the features of HTML to get it across to the reader effectively. The purpose of this framework is to make it quicker to present documents with consistent style.

This document is a good example of the sort of use for HTML. A tutorial often benefits from compartmentalisation of information and quick summaries. Obviously while writing this I've used a plethora of effects while you may find your work is 90% plain text with the odd table or picture. Nevertheless the framework makes it easy for you to create a standard look and feel to your documents and sorts out a lot of tricky CSS styling and positioning so all you have to do is bash the words onto the screen.

5.2Developing your own

Steal the CSSThe CSS in this framework has a number of tricks that you may want to use elsewhere. By all means do so.
What you see here is my style that I've developed and amalgamated over time. I expect you'll want to tweak the appearance to suit your preferences and add features. For that you have to get stuck into the CSS. In the mean time have a play so you can get a feel for the convenience of things like H6 and DIV=img.

You'll almost certainly want to fiddle with fonts.

5.3Remember the reader

Finally remember the reader. They are probably tired and don't want to read your stuff anyway. That's what I like about HTML, you can add interest by directing attention. A few boxes, a list of ticks and so on can encourage the reader to keep on going, take bits at a time and feel they are making quick progress.
Quick reference
  • Arrows span arrowN, arrowNE, arrowE ... arrowNW
  • Borders frame1 frame2 round1 round2 round3
  • Boxouts boxOut, h6 fact info hint warn dont
  • Code block div code Inside span=note and span=slashes
  • Colours - foreground red green blue black white
  • Colours - background invert bgpnk bggrn bgblu bggry bgyel bgwhi
  • Colours - columns c1 ... c9 followed by pnk grn blu gry yel eg c4yel
  • Columns table c1r c2r ... c9r shadeC1 shadeLastC
  • Cursors for links a download newWin newWinOffSite offSite video sound document
  • Email address <span class=email>@<span> Details need tweaking in CSS
  • Emphasis todo tiny pin blob
  • Font sizes f80 f90 f100 f110 f120 f150 f200 f300
  • Floating div hardLeft left right centre center down floatfix clear
  • Headings H1 ... H4 autonum or Underline section references
  • Links a link button foot glos
  • Lists ul bare ticks title dotted
  • List items li t0 t1 b0 b1
  • Newspaper columns div col2 col3 col4 col10 col15 col20 col25 colRule
  • Margins (ems) m2 ...m6
  • Miscellaneous p=newPage div=sectionNum div=foot
  • Pictures h6 img IMG goes inside followed by caption
  • Rows tr total titleR1 shadeR1 shadeR2 none
  • Tables - informal table hlines boxed glossary
  • Tables - formal table table
  • Text span q emph name code path tag txl txc txr
  • Ticks span tick0 tick1 tickBox tickBox0 tickBox1
  • Top of page div topMenu title1 title2
  • Vertical space p vspace gap
  • Widths w2 ... w6, w60 ... w100, wall
The author of the framework and this guide is Peter Fox, a freelance web developer from Essex, England.
If you find it useful, find a bug, have some changes you'd like to share then let him know at

This version dated 3rd May 2015