A cascading style sheet (CSS) contains style definitions that are applied to elements in an HTML document. CSS styles define how elements are displayed and where they are positioned on your page. Instead of assigning attributes to each element on your page individually, you can create a general rule that applies attributes whenever a web browser encounters an instance of an element, or an element assigned to a certain style known as a CssClass.
CSS styles can be placed inline within a single HTML element, grouped in a <style> block in the HEAD portion of a web page, or imported from a separate CSS style sheet file. The last option is the best practice for a simple reason: The same external style sheet files can be linked to many Web pages thus giving a common appearance to an entire Web site.
To use CSS style rules in the HTML Designer, the targetSchema property of your HTML document must be set to a web browser that supports HTML 4.0 or higher. Obsolete browsers (Internet Explorer 6, or older) that support only HTML 3.2 or earlier will simply ignore CSS styles. When the targetSchema property is set to an older browser, the integrated development environment (IDE) conceals CSS options and properties that are only available in newer browsers. When the targetSchema property is set to a browser that does support HTML 4.0, CSS style rules become the preferred method for specifying the desired appearance and position of HTML elements.
The CssClass property (inherited from WebControl) is used to specify the CSS class to render on the client for the Web Server control. This property will render on browsers for all controls. It will always be rendered as the class attribute, regardless of the browser.
Default Wings pages use a pair of external style sheets, located at ~Themes/Current/Styles/Framework.css and ~Themes/Current/Styles/Theme.css. Framework.css contains a number of core style rules that define the look of information drawn from the underlying IBM i programs, and we recommend leaving the styles in it set to the defaults for initial Wings sites. Theme.css contains flexible styles that can be changed to improve the look and feel of a Wings site without impacting the underlying architecture.
The chart below is a general listing of the types of cascading styles in ~Themes/Current/Styles/Framework.css that you will encounter in your ASNA Wings website. You can refer to the actual file for specific details. For more detailed information on CSS in general, visit http://www.csszengarden.com/.
| CcsClass (ASNA Monarch Framework Reference) |
Description |
|---|---|
| DdsCharField | Controls the display characteristics for a character field, a character field that has a validation error (_Error), a character field that is output only (_OutputOnly), and a character field that contains a hyperlink (_Link). |
| DdsConstant | Controls the display characteristics for a constant value. |
| DdsDateField | Controls the display characteristics for a date field defining a textbox with button or image control that is linked to a javascript calendar; right justified (_Right), has a validation error (_Error), or is output only (_OutputOnly). |
| DdsDecDateField | Controls the display characteristics for a date field, type decimal, that may be defined with a button or image that is linked to a JavaScript calendar. Styles also include right justified (_Right), a decimal date that has a validation error(_Error), or is output only (_OutputOnly). |
| DdsDecField | Controls the display characteristics for a decimal field, a decimal field that is right aligned (_Right), a decimal field that has an error (_Error), a decimal field that is right aligned and has an error (_Error_Right), a decimal field that is output only (_OutputOnly), a decimal field that is right aligned and output only (_Right_OutputOnly), and if an invalid length is encountered (InvalidLength). |
| DdsInlinePopUpBackground | Controls the styles for the background of the overlay that appears after a request is submitted to the IBM i. |
| DdsInlinePopUpContent | Controls the styles for the content of the overlay that appears after a request is sent to the IBM i. |
| DdsInlinePopUpTable | Controls the styles for tables in the overlay that appears after a request is sent to the IBM i. |
| DdsInlinePopUpTitle | Controls the styles for the title in the overlay that appears after a request is sent to the IBM i. |
| DdsSflMsgField | Controls the styles for the subfile message fields, including output only fields (_OutputOnly). |
| DdsSubfileControl DdsSubfile |
Controls the styles for the subfile control and subfile records, including the background color for alternating rows displayed on the subfile (DefaultRow and AlternateRow). |
| DdsTimeField | Controls the display characteristics for a time field, a time field that has a validation error (_Error), a time field that is output only (_OutputOnly), and a time field that contains a hyperlink (_Link). |
| DdsTimestampField | Controls the display characteristics for a timestamp field, a timestamp field that has a validation error (_Error), a timestamp field that is output only (_OutputOnly), and a timestamp field that contains a hyperlink (_Link). |
| (CssClass style elements only) | Controls the styles of a display file including content placement, popup windows, headers, function keys, and standardizes HTML elements and consistent styling for the 5250 terminal emulation. |
| SubmitWait | Controls the display of the overlay with a spinner that appears when the submit button is pressed (to prevent multiple submissions and show that the system is working). |
| SubmitWait_2seconds | Controls the display of the overlay (without a spinner) that appears when the submit button is pressed, keeping the SubmitWait spinner from appearing for two seconds. |
Note – On browsers (IE6 or older) that do not support CSS, setting the CssClass property will have no effect.
The following table lists and details CSS classes that appear by deafult in ~Themes/Current/Styles/Theme.css.
| CSS Class (in Theme.css) |
Description |
|---|---|
| DdsFileFullBannerKey | Controls the display characteristics for Full Banner Keys (large keys displaying all used funtion keys) It supports hover, active, and disabled styles. |
| DdsFileFullBannerRMarginKey | Controls the display characteristics for Full Banner Keys that need to be separated by a horizontal gap, such as by PgUp or PgDn. This class is largely used when implementing vertical banner keys. It supports hover, active, and disabled styles. |
| DdsKey | Controls the display characteristics for a DDS key. |
| DdsVKey | Controls the display characteristics for a virtual DDS Key, used when Wings sites are displayed on mobile devices in a vertical configuration. |
| DdsVKeyW | Controls the display characteristics for a virtual DDS Key, used when Wing sites are displayed on mobile devices in wide screen or horizontal configuration. |
| SubFileDataFields | Controls the styles for the Subfile data fields, right-aligned data fields (_Right), data fields that are output only (_OutputOnly), and data fields that that are right aligned and output only (_Right_OutputOnly). |
| SubfileHeader | Controls the display characteristics for a subfile header. |
| SubfileHeaderFields | Controls the display characteristics for subfile header fields. |
| SubFileRows | Controls the styles for the subfile rows, including the background color for alternating rows displayed on the subfile (DefaultRow and AlternateRow). |