Home » Tip Bank » Application Design » User Interface Design » Web UI

Language: Web
Expertise: Intermediate

Dec 7, 1998

Cascading Style Sheets (CSS) provide a good way to apply a style sheet to a section of text. With CSS, you can redefine how HTML tags work, for example making all paragraph tags (<P>) use Arial 12 point type, or you can define named styles which only apply to a section or <SPAN> of text. For instance, applying a style named "bodytext" is as easy as:

 
<SPAN CLASS="bodytext">Get ftpMonkey to do the work</SPAN>

Sometimes it is easier to apply the style to the whole table cell, for example:

 
<TD WIDTH="200" CLASS="bodytext">Get ftpMonkey to do the work</TD>

But if by accident a section of text is styled with a SPAN tag and as a table cell style, the effects are cumulative in some browsers, and the text will be rendered huge or tiny instead of the size specified in the style sheet. The following example shows a doubly applied style, which should be avoided:

 
<TD WIDTH="200" CLASS="bodytext"><SPAN CLASS="bodytext">Get 
ftpMonkey to do the work</SPAN></TD>