This is a - considerably simplified! - part of a web page made in MSWord.

h1
	{mso-pagination:widow-orphan;
	font-family:Arial;
	font-weight:bold;}
h2
	{mso-pagination:widow-orphan;
	font-family:Arial;
	font-weight:bold;}
h3
	{mso-pagination:widow-orphan;
	font-family:Arial;
	font-weight:bold;}
h4
	{
	{mso-pagination:widow-orphan;
	font-family:Arial;
	font-weight:normal;
	font-style:italic;}

You can see that identical properties, of related types of text, are repeated over and over again. It can also be much more concise, clearer and smaller, like this:

h1, h2, h3, h4
{
   mso-pagination:widow-orphan;
   font-family   :Arial;
}
h1, h2, h3
{
   font-weight   :bold;
}

h4
{
   font-weight:normal;
   font-style:italic;
}

Moreover, the headings (h1 thru h6) usually use the same font as the ordinary paragraphs (p), or at least it is advisable to do so. In that case the font-family need not be mentioned with the headers (h1 thru h6), but it can be under body.

Here is another example - this time created by Microsoft Outlook Express 6. So it's an e-mail. They did use CSS here, but inline, intermingled with the text, and repeated again and again in every single paragraph, or even in smaller pieces of text, even where the representation is identical. This is not the way to do it!

<DIV><FONT size=2><FONT face=Arial>Some text. <SPAN style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Some word</SPAN> </FONT></FONT><SPAN style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">, and some other words.<BR><BR>En </SPAN><SPAN style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">yet more words.</SPAN> </DIV>

This could be simplified to become:

<P> <SPAN style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Some text. Some word, and some other words.<BR> And yet other words.</SPAN>

Simpler still, with the font specified outside of the text:

<p class=SomeClass> Some text. Some word, and some other words.<BR> And yet other words.

And because Arial 10pt is pretty standard is, there's no need at all to specify that, so this would also have been quite enough:

<P> Some text. Some word, and some other words.<BR> And yet other words.

This makes it clear that HTML in e-mail is nearly always overkill. It's the text that matters, not the presentation. HTML is for the web, not for e-mail.

Back