---
title: Create custom style classes and rules
description: Use style classes rules in UI Builder to apply custom visual styling to UI elements by referencing CSS classes.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/application-development/ui-builder/custom-style-classes-rules.html
release: australia
product: UI Builder
classification: ui-builder
topic_type: task
last_updated: "2026-03-12"
reading_time_minutes: 1
breadcrumb: [Manage the visual style of UI Builder experiences, Working in UI Builder, UI Builder, Builder library, Developing your application, Building applications]
---

# Create custom style classes and rules

Use style classes rules in UI Builder to apply custom visual styling to UI elements by referencing CSS classes.

## Before you begin

Role required: admin

## About this task

Control the appearance of fields, containers, buttons, and other interface components without writing inline styles making the UI cleaner, more consistent, and easier to maintain. All style classes and rules can be applied to any container or component on the page. For more information about CSS styles, see the [ServiceNow Developer site](https://developer.servicenow.com/dev.do#!/guides/yokohama/now-platform/next-experience-guide/now-experience-css) and the [ServiceNow Community site](https://www.servicenow.com/community/developer-blog/the-ultimate-service-portal-css-guide/ba-p/2290168).

## Procedure

1.  Navigate to **All** > **Now Experience Framework** > **UI Builder**.

2.  Open an experience to work in or create an experience by selecting **Create** > **Experience**.

    See [Configure how users interact with your applications in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-experiences.md) for more information on creating experiences.

3.  Create or open a page.

4.  Add a component to your page.

5.  Select the **Styles** tab in the configuration panel.

6.  Select the **...** icon next to the **Style class** field.

    The **Page classes and rules** pop up will appear.\[Omitted image "style-class-pop-up.png"\] Alt text: Page classes and rules pop up.

7.  Select **+ Add class**.

    1.  Enter a name in the **Style class name** field.

    2.  Provide the CSS style you would like to apply to the component.

    3.  Select **Apply**.

8.  Select **+ Add rule**.

    1.  Enter a name in the **Style rule name** field.

    2.  Provide the CSS rule you would like to apply to the component.

    3.  Select **Apply**.

9.  Close the **Page classes and rules** pop up.

10. Select the **Style class** field.

11. Select a style class or style rule from the list.

12. Select **Save**.

13. Select **Preview** to test the applied style class or style rule.


**Parent Topic:**[Manage the visual style of UI Builder experiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/manage-the-visual-style-of-ui-builder-experiences.md)