HTML and CSS Standards

After several years of experience and experimentation I have recently (2009) decided that the CSS code below is a good starting point for many applications. Various differences among browsers can mean jumping through hoops to get the same appearance. These styles overcome significant differences and otherwise lay a solid framework for building the complete framework you want. Some of these were already in use in these files before I settled on this particular set. Explanations below.

/**********************************************************
 *                                                        *
 * www.silvermaplesoftware.com suggested default CSS file *
 *       see www.silvermaplesoftware.com/standards/       *
 *              file name -- sms_default.css              *
 *                                                        *
 **********************************************************/

* {
	margin: 0;
	padding: 0;
	}
body {
	font-size: 62.5%;
	font-family: Verdana, sans-serif;
	}
h1, h2, h3, h4 {
	font-family: Georgia, serif;
	}
ul {
	list-style-type: none;
	}
p, li, th, td {
	font-size: 1.3em;
	}
li p, li li, th p, th li, td p, td li {
	font-size: 100%;
	}
img, table {
	border: 0;
	}
table {
	width: 100%;
	}
/**********************************************************/

*

The greatest difference among browsers is how they treat spacing and the most obvious place is with lists. IE uses margin, the W3C suggestion, but the others use padding. If you don't want the default indentation, especially if you're unaware of these differences, you can run into various difficulties. Lists used as menus rarely use indentation. Headings, paragraphs, and lists normally default to both top and bottom margins, meaning that if you want no space between a paragraph and a list, you need to zero the paragraph bottom margin and the list top margin—what a nuisance. By zeroing all margin and padding values you make your own choices about spacing. I have avoided making a choice here because spacing can be personal or situational.

body

See Alternate scalable for an explanation of the font-size specification here and at “p, li, th, td”. Specifying the principal font-family here means you never have to do it again unless you get into a nesting with inheritance situation (I never have).

Caveat: my nephew sets a minimum text size (em) of thirteen pixels; that means my standard size of 1.3 em becomes 17 pixels (13 pixels times 1.3 em equals 16.9 pixels rounded to 17). If your target audience might make similar adjustments, you may have to adjust your sizing.

h1, h2, h3, h4

Most often I want the contrast of a serif typeface for principal headings (though not in these files). It is generally acknowledged that a sans-serif typeface is easier to read on a computer screen than a serif in small sizes, but with larger sizes it is strictly a personal choice.

ul

Most unnumbered lists are used as menus or in other contexts where the default marker is not desired.

p, li, th, td

I've found 1.3em (13 pixels) to be a satisfactory size in most instances. Smaller sizes are harder to read.

li p, li li, th p, th li, td p, td li

Nesting would produce ever increasing sizes if not constrained.

img, table

Almost no one wants the default blue border around images used as links. Eliminating the border here avoids adding the attribute border="0" to all linked images. Since tables are so often used for layout (generally discouraged), this avoids another (multiple) attribute border="0".

table

By default tables are only as wide as they need to be, but when used for layout, they and their cells should be constrained as little as necessary and then by external constraints. For instance, several successive tables used for header, content and footer can all have their widths controlled and kept consistent by an outer div, instead of having to change all three tables separately.

As using these styles will probably be very different from the way you've worked with CSS in the past, don't just slap them into your next tight-deadline project; you will regret it. You have to make the decisions about vertical margins of headings, paragraphs, lists, etc. If not carefully chosen or you forget about margin collapse, these choices can lead to unexpected results.

If you choose to use this in whole or a major part thereof, please keep the credit information attached at the top. I would also like to hear from you as to your experience with these techniques and any suggestions for changes.