PROBLEM
Cascading Style Sheets (CSS) is a language for describing how an application should formatted. While there are a variety of options for formatting web pages, CSS is the pre-dominant choice because it's a standard supported by all modern web browsers, and it facilitates the separation of the structure of the page and the presentation (or style) of the page.
SOLUTION
There isn't really any special considerations regarding using CSS with Skyway applications. CSS can be used in exactly that same manner as classic web development. Some approaches to using CSS include:
Adding inline CSS to broadly format a web application or format specific sections of a web application.
Defining CSS in separate stylesheet files (.css) that are linked into the JSP page
Configuring web controls with a CSS class that will inherit the style defined elsewhere (inline CSS or stylesheet)
HOW IT WORKS
Most Skyway web controls have style properties panel that can be used to specify a CSS class and/or specify an inline style. In the case of inline styles, at runtime the visual rendering of the web control will be influenced by the embedded style.  In the case of class attributes, the visual rendering of the web control (once again at runtime) will be influenced by a class definition.
 |
When defining the inline style, you can specify the style information directly into the Inline Style section of the style panel. Alternatively you can click on the Style Editor button to configure the style using a specialized CSS editor.
The following JSP fragment shows how external CSS files can be linked into a web application.
Example 2.32. Linking to external CSS files
<head>
<link href="${pageContext.request.contextPath}/css/styles.css" rel="stylesheet" type="text/css" />
</head> The link tag ( <link> ) is a standard html tag for linking a stylesheet to a source HTML document. The href attribute specifies the location of the stylesheet. Typically the stylesheet of a web application will be located in the web application, and in the case of a Skyway project, the stylesheet will be added somewhere in the web content folder. The ${pageContext.request.contextPath} variable is a convenient way to reference at runtime the root context of the web applicaiton. Since in this example the css file was added to a "css" folder in the web content folder, the reference to the css folder is appended to the url along with the name of the css file.
Almost all of the sample projects on the Skyway Community site make use of CSS. Those projects would be a good reference for best practices in using CSS within a web application.
RELATED RECIPES