Web Designer Classes as Selector

To make it possible to define specific style sheet rules for typical Web Designer objects like buttons, groups, or grids, all Web Designer objects are classed.

For each object, the XML Tag Name property specifies this class. For example, the SaveButton in the BottomButtonGroup has class: ButtonControl, and a TextColumnControl has class: ColumnControl. You can change this XML Tag Name property if required.

This classification is stored in the repository and in the generated (GUI) XML documents. These documents represent the internal page structure and presentation definitions of all pages. The important thing is that at run time, these class definitions are also generated into the client HTML documents. Here is a fragment of a generated client HTML file:

<table id="ResultRecordRangeGroup" class="ContainerControl" style="width:100%;">
   <tr>
      <td>
         <div id="ResultLabel" class="ResultLabelControl">Results</div>
     </td>
     ...
   </tr>
 </table>

In cascading style sheets, you can attach a style sheet rule to all elements of the same class by preceding the class name with a period symbol. For example, this style sheet rule specifies that all HTML elements that belong to the LabelControl class have a blue background color:

.LabelControl{
    background-color: blue;
}

You can also define style sheet rules for a specific HTML element that belongs to a specific class. This style sheet rule specifies the alignment of TD elements that belong to the GridCellControl class:

td.GridCellControl{
    vertical-align: middle;
    text-align: center;
}