Setting a CSS Class at the Control Level

Setting a CSS class at the control level is much like doing so at the form and pane levels. As with those levels, the General tab of the Properties view is used, but this time, it is the Properties view for the control, not the form or the pane.

In this task, we’ll set the Claim Amount field to have a red background in order to mark the control as important.

Procedure

  1. Click the Claim Amount control on the form (in the Design view) to open the Properties view for the control.
  2. In the General tab of the Properties view for the Claim Amount control, type into the Style Class Name(s) text field the name of the CSS class within the claims.css file that contains the rules you want applied to the pane. In this case, type important in the Style Class Name(s) text field.
  3. The style defined in the claims.css file in the class .important will be applied to the Claim Amount control. This CSS class defines a red background color, as well as a border style and border width: 
    .important {background-color: #FFAAAA; border-style: solid; border-width: 2px;}
  4. Preview the form to see the effect of applying the style to the Claim Amount control.
Next topic: Changing the Style of a Control Based on an Input Value
Previous topic: Setting a CSS Class at the Pane Level