---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Create custom style classes and rules

# Create custom style classes and rules {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

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 AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") 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.
7. **Optional:** 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.
   {#custom-style-classes-rules__substeps_dqx_r2k_mfc}
8. **Optional:** 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.

*[\>]: and then