stylesheets in guidelines

In my view the guidelines may be improved in 
everthing related to style sheets. 

I listed down a few tips for style sheets 
and some examples. Wording needs more work.
I think it is better not to have bad examples 
in the guidelines, but I included them here for 
comparison.

Stylesheet tips:

Consistent style throughout the site increases usability, 
 easier to maintain, and faster download for the users:

* use a centralized stylesheet for the whole website.
  use linked stylesheets. 
* Avoid inline style. 

To assure good rendering when your site is read without your 
stylesheets:

* Use DIV and SPAN *only after* you run out of HTML meaning- 
carrying elements. If you want to strongly emphasize text 
use the STRONG element and assign styles to it, rather than 
using SPAN.

Make it possible to use the same classes in 
stylesheets designed for different media:

* Define class and id to mark *content related concepts* that 
  are not covered by HTML elements. Define classes site-wide 
  and not in each page. Do not define classes by the 
  typographical features of a particular medium.

bad class choices: redline newbullet dropcap
good class choices: new warning summary chapter toc 

HTML and Stylesheets examples:

Bad Example: 

<STYLE type="text/css" ...>
   .newtxt { font-weight: bold;
             color: red;
             background-color: yellow }
   .newbullet { list-style : url(yellow.gif) }
</STYLE>
...
<UL>
   <LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
   <LI> 401(k)</LI>
</UL>

End bad example.

Good Example:

<STYLE type="text/css" media=screen>
STRONG {font-weight: bold;}
UL LI.new {list-style : url(yellow.gif);}
UL LI.new STRONG {color: red;
                  background-color: yellow;}
</STYLE>
...
<UL>
 <LI class="new">Roth IRA <STRONG>New</STRONG></LI>
 <LI> 401(k)</LI>
</UL>

End good example.

Bad example:

<P>This is an <IMG src="BigRedExample.gif" 
 alt="example"> of what we mean.</P>

End of bad example.

Good example:

<STYLE type="text/css" media="screen">
STRONG IMG {font-weight: bold;
            font-size: bigger;
            font-color: red;}
</STYLE>

<P>This is an <STRONG><IMG src="BigRedExample.gif" 
 alt="example"></STRONG> of what we mean.</P>

End of good example.

Some browsers may apply style rules to alt 
text. e.g., Lynx would show the alt text "example"
strongly emphasized. Opera3.5 even applies the style 
sheet to the alt text.

Bad example:

<STYLE ...>
      .dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
...
<P><SPAN class="dropcap">O</SPAN>nce upon a time...

Good example:

<STYLE type="text/css" media="screen">
      .story P:first-letter { font-size: 120%; 
                              font-family : Helvetica }
</STYLE>
...
<DIV class="story">
<P>Once upon a time...

</DIV>

Bad example (IMG has no alt among other things):

<IMG src="redline.gif" title="End of Chapter 7 - Visual Displays">
   <H1>Chapter 8 - Auditory and Tactile Displays</H1>

End bad example.

Another bad example:

   <STYLE type="text/css">
        HR.redline { color : red }
   </STYLE>
   <HR class="redline" title="End of Chapter 7 - Visual Displays">
   <H1>Chapter 8 - Auditory and Tactile Displays</H1>

End bad example.

Good example:

<STYLE type="text/css" media="screen,print,tty">
  DIV.chapter {border-bottom: thin solid red;}
</STYLE>

<STYLE type="text/css" media="aural,braille">
  DIV#chapter-7:after {content: "End of Chapter 7 - Visual Displays"}
  DIV#chapter-8:after {content: "End of Chapter 8 - Auditory and Tactile Displays"}
</STYLE>

<DIV class="chapter" id="chapter-7">
<H2>Chapter 7 - Visual Displays</H2>
<P>...</P>
<P>...</P>
</DIV>

<DIV class="chapter" id="chapter-8">
<H2>Chapter 8 - Auditory and Tactile Displays</H2>
<P>...</P>
<P>...</P>
</DIV>

End good example.

Nir Dagan, Ph.D.
http://www.nirdagan.com
mailto:nir@nirdagan.com

"There is nothing quite so practical as a good theory." 
-- A. Einstein

Received on Monday, 23 November 1998 14:08:58 UTC