jQuery Mobile は、CSS クラスを使用してさまざまな要素のスタイルを設定します。
下のリファレンス・リストには、一般的なスタイルの CSS クラスが含まれています。
これらのクラスは、全ての jQuery Mobile ウィジェット（ボタン、ツールバー、パネル、テーブル、リストなど）に追加できます：
| クラス | 説明 |
|---|---|
| ui-corner-all | 要素に角丸を追加する |
| ui-shadow | 要素に影を追加する |
| ui-overlay-shadow | 要素にオーバーレイ・シャドウを追加する |
| ui-mini | 要素を小さくする |
グローバル・クラスに加えて、<a> または <button> 要素（ボタンではありません）に次のクラスを追加できます。：
| クラス | 説明 |
|---|---|
| ui-btn | ボタンとしてスタイリングするには、<a> 要素に追加しなければならない |
| ui-btn-inline | ボタンをインラインで表示する |
| ui-btn-icon-top | ボタン・テキストの上にアイコンを配置する |
| ui-btn-icon-right | ボタン・テキストの右にアイコンを配置する |
| ui-btn-icon-bottom | ボタン・テキストの下にアイコンを配置する |
| ui-btn-icon-left | ボタン・テキストの左にアイコンを配置する |
| ui-btn-icon-notext | アイコンのみを表示する |
| ui-btn-a|b | ボタンの色を指定する。 "a" はデフォルト（テキストが黒色で背景色が灰色）で、一方 "b" はテキストが白色で背景色を黒色のに変更します |
<a> および <button> 要素で使用できるすべてのアイコンクラス（他の要素でアイコンを使用する方法については、 アイコンリファレンスをご覧ください）：
| クラス | Icon 説明 | アイコン |
|---|---|---|
| ui-icon-action | アクション（矢印が箱の外へ時計回りに弧を描く） | |
| ui-icon-alert | 三角の内側に感嘆符 | |
| ui-icon-audio | 音声 / スピーカ | |
| ui-icon-arrow-d-l | 下、左矢印 | |
| ui-icon-arrow-d-r | 下、右矢印 | |
| ui-icon-arrow-u-l | 上、左矢印 | |
| ui-icon-arrow-u-r | 上、右矢印 | |
| ui-icon-arrow-l | 左矢印 | |
| ui-icon-arrow-r | 右矢印 | |
| ui-icon-arrow-u | 上矢印 | |
| ui-icon-arrow-d | 下矢印 | |
| ui-icon-back | 戻る（カーブした矢印が反時計回りに上向きに弧を描く） | |
| ui-icon-bars | お互いの上に3つの横バー | |
| ui-icon-bullets | 互いの上に3つの横向きのバレット | |
| ui-icon-calendar | カレンダ | |
| ui-icon-camera | カメラ | |
| ui-icon-carat-d | ダウンカラット | |
| ui-icon-carat-l | 左カラット | |
| ui-icon-carat-r | 右カラット | |
| ui-icon-carat-u | 上カラット | |
| ui-icon-check | チェックマーク | |
| ui-icon-clock | 時計 | |
| ui-icon-cloud | 雲 | |
| ui-icon-comment | コメント/メッセージ | |
| ui-icon-delete | 削除 | |
| ui-icon-edit | 編集 / 鉛筆 | |
| ui-icon-eye | 目 | |
| ui-icon-forbidden | 禁止記号 | |
| ui-icon-forward | 前に - （カーブした矢印が時計回りに上向きに弧を描く） | |
| ui-icon-gear | 歯車 | |
| ui-icon-grid | グリッド | |
| ui-icon-heart | 心 / 愛のシンボル | |
| ui-icon-home | ホーム / 家 | |
| ui-icon-info | 情報 | |
| ui-icon-location | 位置 | |
| ui-icon-lock | 鍵 / 南京錠 | |
| ui-icon-mail | メール / 手紙 | |
| ui-icon-minus | マイナス記号 | |
| ui-icon-navigation | ナビゲーション | |
| ui-icon-phone | ☎ | |
| ui-icon-power | 電源（オン/オフ） | |
| ui-icon-plus | プラス記号 | |
| ui-icon-recycle | リサイクル記号 | |
| ui-icon-refresh | リフレッシュ - 円の矢印 | |
| ui-icon-search | 検索 / 拡大鏡 | |
| ui-icon-shop | 買い物 / バッグ | |
| ui-icon-star | 星 | |
| ui-icon-tag | タグ | |
| ui-icon-user | ユーザー / 人 | |
| ui-icon-video | ビデオ / カメラ |
jQuery Mobile は、a（グレー）と b（ブラック）の2つのテーマクラスを提供します。 しかし、独自のカスタムクラス値を、文字「z」まで作成することもできます（「テーマ」の章を参照）。 下の表は、利用可能なテーマクラスを示しています。 文字（a-z）は、a ～ z までの文字を指定できることを意味しています。 例えば、ui-bar-a や ui-bar-b などです。
| クラス | 説明 |
|---|---|
| ui-bar-(a-z) | バー（ヘッダー、フッター、その他のバー）の色を指定する |
| ui-body-(a-z) | コンテンツブロック（ページコンテンツペイン（バージョン1.4.0では非推奨）、リストビュー項目、ポップアップ、折りたたみ、ローダー、スライダ、パネル） の色を指定する |
| ui-btn-(a-z) | ボタン（およびアイコン）の色を指定する |
| ui-group-theme-(a-z) | コントロールグループ、リストビュー、折りたたみ可能な集合の色を指定する |
| ui-overlay-(a-z) | ダイアログ、ポップアップ、上に表示されるその他のページ・コンテナの背景色を指定する |
| ui-page-theme-(a-z) | ページの色を指定する |
グリッド内のカラムは、幅が等しく（合計で100％）、ボーダー、背景、マージン、パディングを持っていません。 使用できるレイアウトグリッドは 5 つあります：
| グリッド・クラス | カラム | カラム幅 | Corresponds To | 例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
グリッドの詳細については、jQuery Mobile グリッドの章jをご覧ください。