Changing the CSS Values for a Control

Edit online

About this task

You can edit CSS style values for controls in a web application or portlet application project using the Composite Application Framework UI Development perspective. CSS property values and attributes applied to individual controls have precedence over a CSS applied to the entire page. For more information, see Applying CSS to a View.

To edit the CSS values for a control

Procedure

  1. On the UI Development perspective, open the View Declaration Language (VDL) file for the view you want to work with in the editor.
  2. Select the control you want to modify.
    Tip: For the following steps, click the The Expert Properties button in the Properties view tool bar to view the Display tab.
  3. In the Properties view, click the Display tab.
  4. For the CSS Style property, do any of the following:
    • Place the cursor inside the CSS Style text field and start typing your CSS definition.
    • Click The Binding Selection button to open the CSS editor. In the Edit CSS dialog box, define the CSS property and attribute values to apply to the control, or edit any existing text. Click OK.
    • Click the expression binding browse button The Binding Expression button if you want to add a binding expression to your style definition.
      Important: Doing so will overwrite all contents in the CSS Style field. A selected binding expression is added to CSS Style field and can be further edited in the CSS editor.
  5. Click Preview to view the run-time appearance of your CSS Style property change.
  6. Save the project.