Applying CSS to a View
You can specify an external style sheet for use by all controls in a view. If you apply the style sheet to a header, or to another view that is imported into all pages of a web application, you can provide a common style to all pages in the application. For more information, see
Importing a View into a VDL File.
To view an example, create a web project with the Starter Web Application project template. By default, the login.xhtml includes the external style sheet styles.css.
You can locate an external CSS at a URL to make it accessible by the application server at runtime, or you can include the CSS in the web application project.
To apply an external style sheet to a view
1. In the UI Development perspective, browse to the location of the external CSS you want to add to the project. Right-click the file and click Copy.
2. Click the Navigator view, then expand the project’s WebContent node.
3. Right-click the WebContent node and click Paste.
4. Open the VDL file for the view you want to work with in the editor.
5. In the WebContent node, drag the CSS to the design canvas and drop it into the VDL file (typically at the top).
6. In the Drop Candidates dialog, click Create “Include Stylesheet” Control and click OK.
The Composite Application Framework automatically adds an Include Stylesheet control to the view and binds it to the CSS file.
7. Click the Preview tab to check the result of adding the external CSS to the view.
8. Save the project.