Example 2

Here's the markup in a world where @import directives can be inlined. The document's original structure is preserved, and the document is obviously much smaller using this approach; in fact, it's approximately 37.3% the size of Example 1. Even better, I didn't have to spend most of an hour figuring out which styles should be placed in which style attribute. This was a simple cut-and-paste operation, with about ten seconds' extra typing required. Also note that there is an example of the ability to declare external stylesheets for multiple media, which isn't even possible using traditional inline styles. Including this example drove up the character count slightly, but it was worth it.

Number of characters in the following example: 3113 (includes markup, content, and whitespace)

<table cellpadding="1" cellspacing="0" border="0" 
   style="@import url(http://www.webreview.com/style/grid-screen.css) screen; 
          @import url(http://www.webreview.com/style/grid-print.css) print;"
   >
<tr class="brow">
<th rowspan="2" colspan="2"><big>Property</big><br/>or Value</th>
<td width="3" class="blk">&nbsp;</td>
<th colspan="8">Windows95/98/NT</th>
<td width="3" class="blk">&nbsp;</td>
<th colspan="5">Macintosh</th>
<td width="3" class="blk">&nbsp;</td>
<td class="norel">&nbsp;</td>	
</tr>
<tr class="vers">
<td class="blk">&nbsp;</td>
<th>&nbsp;Nav4&nbsp;</th>
<th>&nbsp;Nav6&nbsp;</th>
<th>&nbsp;IE3&nbsp;</th>
<th>&nbsp;IE4&nbsp;</th>
<th>&nbsp;IE5&nbsp;</th>
<th>&nbsp;IE55&nbsp;</th>
<th>&nbsp;Op3&nbsp;</th>
<th>&nbsp;Op4&nbsp;</th>
<td class="blk">&nbsp;</td>
<th>&nbsp;Nav4&nbsp;</th>
<th>&nbsp;Nav6&nbsp;</th>
<th>&nbsp;IE3&nbsp;</th>
<th>&nbsp;IE4&nbsp;</th>
<th>&nbsp;IE5&nbsp;</th>
<td class="blk">&nbsp;</td>	
<td class="norel">&nbsp;</td>	
</tr>
<tr class="par">
<td class="secn">5.6.1&nbsp;</td>
<td class="prop"><a href="glossary.html#561">display</a></td>	
<td class="blk">&nbsp;</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="P">P</td>
<td class="P">P</td>
<td class="P">P</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
</tr>
<tr>
<td></td>
<td>block</td>	
<td class="blk">&nbsp;</td>
<td class="B">B</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="B">B</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
</tr>
<tr>
<td></td>
<td>inline</td>	
<td class="blk">&nbsp;</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="B">B</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="rel">[<a href="notes.html#561inline">note</a>]</td></tr>
<tr>
<td></td>
<td>list-item</td>	
<td class="blk">&nbsp;</td>
<td class="B">B</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="P">P</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
</tr>
<tr>
<td></td>
<td>none</td>	
<td class="blk">&nbsp;</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="N">N</td>
<td class="Y">Y</td>
<td class="Y">Y</td>
<td class="blk">&nbsp;</td>
</tr>
</table>