.ig_OnyxControl {
...
}
.ig_OnyxDisabled {
...
}
.ig_OnyxHeader {
...
}
.ig_OnyxSelected {
...
}
.ig_OnyxHover {
...
}
.ig_OnyxItem{
...
}
.ig_OnyxButton {
...
}
Ultimate UI for ASP.NET のアプリケーション スタイリングの中心は、カスケード スタイル シート（CSS）です。これらのファイルは、描画されるときのルック アンド フィールを変更するためにコントロールが使用するスタイルを定義します。各スタイルセットには、定義の順序と ASPX ページ内のパス仕様に従って、ランタイムに Web ブラウザによってロードおよびキャッシュされるひとつまたは複数の CSS ファイルを含みます。
Application Styling Framework（ASF）は、ページで使用される CSS ファイルの名前と場所を制御します。これを実行することによって、ひとつのディレクトリ パスを変更するのと同じような簡単さでページのスタイルセットを変更することができます。たとえば、Onyx というスタイルセットに関連づけられたすべての CSS ファイルが "/ig_res/onyx" というディレクトリにあり、Aqua というスタイルセットを定義するすべてのファイルが "/ig_res/aqua" というディレクトリに配置される場合、Onyx と Aqua スタイル間を切り替えるには、ひとつの場所で StyleSetName を変更するだけで、これでアプリケーション全体に影響があります。実際的に、これがアプリケーション スタイリングの最大のメリットです。ひとつの場所で異なるパスを指定することによって、アプリケーション全体のルック アンド フィールが変わります。
CSS ファイルは、ファイル内で使用できるクラス名の一連の厳格なガイドラインに準拠します。これらのガイドラインに従うことで、ロールベースのスタイリングを使用して、アプリケーション内のすべてのコントロールで標準のスタイルをひとつにまとめることができます。ひとつの CSS ファイルはコントロールに依存せず、汎用的なロールベースのスタイルを含むために使用されます。このファイルは ig_shared.css と呼ばれ、あらゆるスタイルセットに存在します。
CSS の場合：
.ig_OnyxControl {
...
}
.ig_OnyxDisabled {
...
}
.ig_OnyxHeader {
...
}
.ig_OnyxSelected {
...
}
.ig_OnyxHover {
...
}
.ig_OnyxItem{
...
}
.ig_OnyxButton {
...
}
このファイルで定義されるスタイルは、アプリケーション スタイリングを使用し、また定義されたロールを使用するすべてのコントロールによって使用されます。さらに、コントロールの CSS ファイルで、そのコントロール固有のロールのスタイルを定義できます。たとえば、ig_tree.css という名前の CSS ファイルは WebTree によって使用され、OnyxControl クラスを無効にできるだけでなく、以下に示すように、WebTree の SelectedNode ロールのスタイルを定義できます。
CSS の場合：
.igtr_OnyxControl{
...
}
.igtr_OnyxNode {
...
}
コントロールが描画されるときに、ig_shared.css に定義されたスタイルが最初にロードされ、次に ig_tree.css に定義されたスタイルがロードされるため、この無効の概念が機能します。このように無効にすることで、両方のクラス名を組み合わせたひとつの CSS クラス名が作成されます。たとえば、WebTree の Control ロールの上で定義される CSS ファイルを使用すると、"ig_OnyxControl igtr_OnyxControl" というクラス名を持ちます。このクラス名は ig_shared.css_ig_OnyxControl からのひとつのロールと ig_tree.css_igtr_OnyxControl からのひとつのロールから付けられます。