Screen design with CSS
CLASS attribute
When the browser renders the screen (converting the HTML tags into fields, text etc.) it looks at the different attributes on the tags for colors, ways to display background and more. Normally you would have to set the attributes on all the fields, table cells etc. repeating the same attributes over and over again. But there is a attribute called “class” that can be set on nearly all tags in HTML.

The Class refers to a set of attributes in a file with an extension of CSS. This means that you can set the attributes in the CSS file and refer to them. This way you get a unified look of all your screens and an easy way of changing the look of your site in a quick change of the CSS file.


Here is a table where the table-definitions (it’s from school06) have the CLASS attribute set. The attribute value is “listitem” table Html example



<table id="section2">

 <tr>

   <td class="listitem">1.00</td>

   <td class="listitem">section 2,2</td>

   <td class="listitem">section 2,3</td>

 </tr>

</table>


In the top of the rendered HTML file the following line appears:

This means that the classes are defined in a “stylesheet” called i2w.css

And in this file the following definition appear (among others):



.listitem

{

    border:0px solid #FFFFFF; PADDING-RIGHT: 4px;

    PADDING-LEFT: 4px;

    PADDING-BOTTOM: 1px;

    COLOR: #000000;

    PADDING-TOP: 1px;

    FONT-FAMILY: Arial, Verdana;

    BACKGROUND-COLOR: #E0E0E0

}


This defines the layout of anything referring to this class.
Alternative CLASS attribute
iSeries2web supports an alternative class on the table tag. Then using this alternative class every second line on the table will use the attributes from this class. This has to be put on the table row to be in effect. (Any class attributes on the TD definitions will override the table row definition.



<table id="section2">

  <tr class="listitem" altclass=”altlistitem”>

     <td>1.00</td>

     <td>section 2,2</td>

     <td>section 2,3</td>

  </tr>

</table>