My standard css stylesheet for technical documents

Latest version 28 February 2013
I write lots of technical documents and have evolved a css style sheet that gives me a standard look and feel and lots of convenient classes such as box-outs, various sorts of table, code display and so on.
Firefox(5) IE(8)standards mode
Chrome(12) Safari(5.1)
Opera(11.5) 		Box-outs work well on the screen
There are quick shortcuts for allocating horizontal space		 There's a cool image and caption class
Also box frames
Pages can be printed without breaking the layout or content.
(Except most browsers are abysmal at printing anyway so don't expect perfection.)		 There are a useful set of informal and formal table styles There is a cool way of displaying an email address that can't be scraped
Try it below
  • The idea is that you use this as the basis for your own standard style.
  • If you don't know how css works or don't write in HTML then this isn't for you.
  • If you come up with a brilliant improvement then let me know

A cool and useful CSS trick

This is a div with a class of img containing an ordinary <img> which is scaled to the appropriate width.
This is a div with a class of img containing an ordinary <img> which is scaled to the appropriate width.
How do you get images and captions to resize together? It is very simple. The HTML for all thes images here is exactly the same.

Explanation

CSS

div.img { display:table; /* key setting */ color:white; background-color:black; font-weight:bold; text-align:center; overflow:hidden; padding: 0px 5px 3px 5px; border-radius:5px; /* cosmetic */ } div.img>img { width:100%; /* fills div */ }

HTML

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

Result

This is a div with a class of img containing an ordinary <img> which is scaled to the appropriate width.