ASNA Cascading Style Sheets

The elements in an HTML document can have attributes that are used to describe the appearance and functionality of that element on the displayed page. You can assign these attributes to each element on the aspx page individually; or styles can be placed inline within a single HTML element, grouped in a <STYLE> block in the HEAD portion of your Web page. But the best practice is to combine these attributes to create a style "CcsClass name" in an external cascading style sheet file and then apply the "CssClass name" to each element. The same external style sheet file can be linked to many Web pages, thus giving a common appearance to an entire Web site.

CSS style rules serve as the gold standard 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 visible controls. It will always be rendered as the class attribute, regardless of the browser.

Example

Put this definition in an external cascading style sheet:

 .TestStyle
{ 
  font: 12pt verdana; 
  font-weight:700;
  color:orange;
}

Then use the CssClass name TestStyle in your ASPX page.

<asp:Button id="Button" CssClass="TestStyle" Text="Submit" runat="server"/> 

CSS Summary Table

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).
DdsDecFieldK 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 default 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 function 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).

Next: Web.config Considerations

Previous: Display File Master Pages