---
title: "Set up CSS class references"
slug: "set-up-css-class-references"
description: "Create device-specific layouts for menus and form controls using CSS classes in Mobility Studio to enhance your application's design and functionality."
tags: ["Task", "Anywhere Mobility Studio"]
updated: 2026-03-20T12:53:17Z
published: 2026-03-20T17:46:51Z
canonical: "docs.staedean.com/set-up-css-class-references"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.staedean.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up CSS class references

You can define a device-specific layout for a menu or form-control. For example, to apply a different design for a button or to apply a different font. For such a layout, a specific CSS class is required in the relevant style sheet file. To be able to use such a specific CSS class, in Mobility studio, set up a reference to the CSS class in the style sheet. You can link this CSS class reference to the relevant form control to get the required layout.

For several application components, a default CSS class reference is pre-defined. These CSS class references are automatically added when you add a component of the related type to an application:

- Button
- CheckBox
- GridView
- Label
- TextBox
- Caption
- MenuButton
- FormTitle
- DropDown

### Steps

1. Click **Mobility management**.
2. Click **CSS classes**.
3. Click **New**.
4. In the **CSS class ID** field, type a value.
5. In the **CSS class** field, type a value.

> [!NOTE]
> **Note**
> 
> Make sure, this CSS class name matches exactly the related CSS class name in the style sheet file.
6. Close the page.
7. Close the page.

> [!NOTE]
> **Notes**
> 
> The CSS class that you define for the data grid is also used to determine which CSS class is to be used for the components of the data grid. For example, the highlighted row or the button bar. These grid-related CSS classes are not added to the CSS classes in Mobility Studio but must be available in the CSS file.
> 
> For these data grid components, the CSS class is determined based on the CSS class as defined for the data grid (between brackets, an example with the default 'GridView' CSS class):
> 
> - Grid component - [CSSClassName] - (GridView)
> - DIV surrounding grid - [CSSClassName]EnclosingDiv - (GridViewEnclosingDiv)
> - Grid header - [CSSClassName]HeaderStyle - (GridViewHeaderStyle)
> - Grid row - [CSSClassName]RowStyle - (GridViewRowStyle)
> - Alternating row - [CSSClassName]AlternatingRowStyle - (GridViewAlternatingRowStyle)
> - Selected row - [CSSClassName]SelectedRowStyle - (GridViewSelectedRowStyle)
> - Pager (button bar) - [CSSClassName]PagerStyle - (GridViewPagerStyle)

## Related

- [Set up appearance](/set-up-appearance.md)