While there are a variety of options for decorating web pages, Cascading Style Sheets (CSS) is the pre-dominant choice for influencing the presentation of web pages. With CSS, designers can create style sheets that define how the different elements of a web page appear. It facilitates the separation of the structure of the page and the presentation (or style) of the page. The style definitions can be defined in a single location and re-used across many pages, and any changes to the definition are automatically reflected on all the pages.
Reference:
There are a two aspects to using CSS within Skyway Web Models. First there is the general page decoration using CSS, and then there is the specific use of CSS with Skyway web controls.
The HTML Editor provides some CSS support in regards to general page design. Anything that can't be accomplished using editor's menu bar or toolbar can be configured manually using the editor's code view.
Most Skyway web controls have advanced properties that can be configured with inline styles or class attributes. 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 the class definition.
Class definitions are generally defined in the header of the web page, and this can be accomplished in Skyway Web Models in one of two ways. They can be defined in an external resource (i.e. stylesheet.css) that is imported into a web page, or they can be defined directly in the header. Since using external resources (see How To Guide: Using CSS Stylesheets in Skyway) is slightly more complicated, defining CSS style definitions directly in the header is the most common solution.
Styles
The style editor dialogue allows users to easily build CSS styles and apply them to various controls. This editor is available throughout the web controls wherever Skyway requires a user to configure a CSS style. Currently, this includes the Advanced Properties panel, the Iterator wizard and the scaffolding wizards.
On the Style Editor Dialog, the user chooses between “Selection Mode” or “Text Edit Mode”.
Selection Mode
When in Selection mode, the user may select CSS options from selectors, or may type custom values directly into the fields. All selections made by the user are merged into the “Inline Style” field on the Text Edit Mode panel.
Style Elements
The style elements configured in Selection mode (in alphabetical order) are:
background-color
border-color
border-style
border-width
color
font-family
font-size
font-style
font-weight
margin-bottom
margin-left
margin-right
margin-top
padding-bottom
padding-left
padding-right
padding-top
Auto-Fill
When the user selects a Top Margin and no other margin settings have been made, the Bottom, Left, and Right values auto-fill with the Top value. The same is true for the Padding selectors.
Text Edit Mode
When in Text Edit mode, the Style Editor dialogue contains a text area that will accept an inline style manually entered. The Inline Style panel will show the inline style values on a single line and in alphabetical order.
Common Style Selector
For complex wizards where multiple elements can be styled, such as the Iterator control wizard and the Scaffolding wizards, the common style panel will appear as a selector with a text field for a CSS Class Name and an “Edit Style…” button.
When presented with the selector, the user may type a CSS class name directly onto the wizard panel, or may press the “Edit Style…” button to launch the Style Editor dialog that provides the ability to select or type inline style elements.
Once the user has configured an Inline Style, the icon next to the button will become colored indicating that there is an inline style set. When the Configure Style dialog is used, the Common Style panel will disable fields that are not relevant to the current context.
A good example of this contextual enablement is the dialog you see when styling table rows:
