My standard css stylesheet for technical documents

See everything showcased on the cheatsheet

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	Flowcharts extension for turning lists into loops and tests nicely indented and graphically spiced. A very compact and powerful method.
Pages can be printed without breaking the layout or content. (Except most browsers are abysmal at printing anyway so don't expect perfection.)	Automatic heading numbering Newspaper columns Arrows and standardised highlights	There is a cool way of displaying an email address that can't be scraped Try it below
All sorts of clever lists including tick-boxes and then, then instructions	There are a useful set of informal and formal table styles	Standard buttons extension for apps

See everything showcased on the cheatsheet Download the one essential file with no external refs. Ideal for most applications. Getting started tutorial and quick reference Download the complete shebang if you want to hack it.

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.

Explanation

• The secret to this trick is display:table
• overflow:hidden helps with rounded corners if you apply them.
• width:100% scales the image to fit the space in the div.
• The padding and margins are a bit of trial and error

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.