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

References

ASP.NET CssClass Property